| Autor | Zpráva | ||
|---|---|---|---|
| Tomášeek Profil |
#1 · Zasláno: 1. 11. 2018, 10:14:20
Ahoj,
potřeboval bych poprosit o radu ohledně práce s SVG obrázky, resp. ikonami. Pokud by to byly PNG obrázky, ikony bych umístil asi do :after daného elementu jako pozadí tohoto pseudoelementu. Totéž jsem praktikoval i s SVG (background: url('ikona.svg')), ale zjistil, že takto ne...
Vygeneroval jsem si online tento kód: <svg aria-hidden="true" style="position: absolute; width: 0; height: 0; overflow: hidden;" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<symbol id="icon-love" viewBox="0 0 33 32">
<title>love</title>
<path d="M32.916 15.597c0.604-0.66 ..."></path>
</symbol>
<symbol id="icon-shop" viewBox="0 0 34 32">
<title>shop</title>
<path d="M17.148 27.977c-..."></path>
</symbol>
</defs>
</svg>A v HTML pak <svg class="icon icon-shop"><use xlink:href="#icon-shop"></use></svg> Můj dotaz zní: 1. Pokud to jsou ikony, patří semanticky správně do HTML namísto CSS? 2. Ikon je napříč webem asi 60 různých, přičemž některé se opakují. Vygenerované HTML výše (definice symbolů) má 50kB. Mám to umístit do globální layout šablony všechno a neřešit, nebo vždy vložit jen to, co potřebuji? Našel jsem třeba tento kód How to change color of SVG image using CSS (jQuery SVG image replacement)?, který funguje tak, že se vloží do HTML <img src="ikona.svg"> a scriptem se z toho udělá výstup podobný tomu výše, pro každý obrázek zvlášť.
3. Jak takto nahrané SVG cachovat? Nebo to udělat úplně jinak? Hledal jsem, četl, ale moc moudrý z toho nejsem. Děkuji za rady a podělení se o zkušenosti, případně odkázání na nějaký další článek, kde bych z toho byl moudřejší. |
||
|
Časová prodleva: 1 měsíc
|
|||
| Kcko Profil |
#2 · Zasláno: 4. 12. 2018, 22:26:00
1) Imho css background nebo do before/after pseudo elementu je v pořádku pokud ovšem nepotřebujes měnit barvu ikony.
2) Dle tohoto "článku" css-tricks.com/lodge/svg je bod 7, tj inline-svg nejsprávnější řešení a také se tomu dá nejsnadněji měnit barva jednotlivých "bodů/objektů" SVG ikony. U 1čky to jde taky, ale musí se to dělat složitě přes filter nebo masku a podpora je dosti hrozivá (i na mě, kterej kálí už defakto i na IE11). Takže bych zůstal dle potřeby u 1 či 2; v případě 2ky samozřejmě napsat nějaký php helper ( showSVG("some-icon.svg") ) |
||
|
Časová prodleva: 5 let
|
|||
0