Komentáře k článku
Responzivní SVG

Používání SVG pro ikony nebo logotypy namísto PNG či GIF obrázků hájím kam vkročím, ale v jedné věci jsou bitmapy zlaté: V přizpůsobování šířce layoutu a zachování poměru stran.
Používání SVG pro ikony nebo logotypy namísto PNG či GIF obrázků hájím kam vkročím, ale v jedné věci jsou bitmapy zlaté: V přizpůsobování šířce layoutu a zachování poměru stran.
Poskakování stránky
Atributy
img.width
aimg.height
(případně jejich obdoby v CSS) se používají proto, aby prohlížeč věděl, kolik má pro obrázek vyhradit místa před tím, než ho stáhne. Pokud je neuvedeme, tak obsah stránky poskakuje při tom, jak se obrázky postupně načítají. Je nějaký důvod, proč tyto atributy u SVG nepoužít? V kapitole o vkládání pomocí<img>
je uvedené, že se mají odstranit, ale není vysvětlené, proč.Re: Poskakování stránky
To si nerozumíme.
width
a hlavněheight
u<img>
je v pořádku. Doporučuji je ale odmazat ze zdrojového .svg souboru, tedy ze značky<svg>
. Viz odstavec „Nastavení šířky a výšky je k ničemu, použijte viewbox“ – je tam odkaz na zdrojový článek.Pokud nejsou rozměry značky img fixní (jinak řečeno, pokud má obrázek proměnlivou šířku a výšku v procentech) pak stejně musíte použít padding-bottom hack kvůli tomu, aby stránka neposkakovala. Pak jsou width a height zbytečné, prohlížeč je ignoruje. Platí nejen pro SVG, ale i rastrovou grafiku s pružnou šířkou.
Re:
Jasně, to
width
aheight
prohlížeč tak často nepoužije, protože s vykreslením čeká na CSSka, kde bude nějaký předpis pro pružnou šířku a přizpůsobení výšky. Ale může se stát, že přidání těchhle stylů se děje asynchronním Javascriptem atd. Konkrétněheight
pro jistotu dávám všude.