4 komentářů k článku Responzivní SVG:

  1. Jakub Vrána

    Poskakování stránky
    Atributy img.width a img.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č.

    1. Martin MichálekAutor příspěvku

      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.

  2. Leoš Ondra

    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.

    1. Martin MichálekAutor příspěvku

      Re:
      Jasně, to width a height 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.

Napsat komentář

Tato diskuse je již příliš stará, pravděpodobně již vám nikdo neodpoví. Pokud se chcete na něco zeptat, použijte diskusní server Devel.cz

Zdroj: https://www.zdrojak.cz/?p=20211