Proč jsou exportovaná SVG nateklá: anatomie vektorové režie
Rychlá odpověď: Návrhové nástroje jako Adobe Illustrator, Figma, Inkscape a Sketch vkládají XML jmenné prostory editoru, názvy vrstev, skryté skupiny a 6desetinné souřadnice, aby šly soubory později znovu upravit — často nafouknou webové SVG o 40 % až 80 %.
Scalable Vector Graphics (.svg) jsou prosté XML dokumenty, které popisují tvary matematickými cestami (<path>, <circle>, <rect>, <polygon>). Při exportu ikony nebo ilustrace z desktopového vektorového editoru má exportér prioritu znovuimportovatelnost projektu, ne výkon webu:
- Přehnaná 6desetinná přesnost souřadnic: Příkaz cesty jako
M 14.892341,28.104923 C 19.000124,31.999871... plýtvá desítkami bajtů na vrchol kvůli subpixelovým zlomkům, které na žádné obrazovce nejsou vidět.
- Jmenné prostory editoru a RDF metadata: Inkscape a Illustrator vkládají
<metadata>, <sodipodi:namedview>, xmlns:inkscape, data-name a enable-background, které prohlížeče zcela ignorují.
- Nadbytečné prázdné kontejnery a dlouhé HEX kódy: Vnořené skupiny
<g></g> po zrušení seskupení vrstev a 6znakové hex řetězce (#ffffff místo #fff) přidávají zbytečné uzly DOM i bajty.
Jak zaokrouhlení přesnosti souřadnic zmenší data cest SVG bez zkreslení křivek
Rychlá odpověď: Zaokrouhlení souřadnic cest SVG (atributy d a points) na 2 desetinná místa zkrátí řetězec cesty o 45–70 % a zachová přesnost na setinu pixelu u běžných rozměrů viewBox.
U produkčních webových ikon a ilustrací atribut <path d="..." /> obvykle tvoří 70 % až 90 % celkové velikosti souboru. Správná desetinná přesnost vyvažuje maximální kompresi bajtů a geometrickou věrnost:
| Nastavení přesnosti |
Příklad souřadnice |
Ideální měřítko viewBox |
Typická úspora bajtů a vizuální dopad |
1 desetinné místo (0.1) |
M14.9 28.1 |
Velké ilustrace (500×500+) |
o 65–80 % menší; u drobných ikon 16×16 může mírně posunout řídicí body |
2 desetinná místa (0.01) — výchozí |
M14.89 28.1 |
Běžné UI ikony (24×24 až 512×512) |
o 50–70 % menší; na displejích Retina matematicky nerozeznatelné od originálu |
3 desetinná místa (0.001) |
M14.892 28.105 |
Husté technické CAD / mapy |
o 35–50 % menší; zachová mikro-křivky při extrémním přiblížení |
| 4–5 desetinných míst |
M14.8923 28.1049 |
Normalizovaný viewBox="0 0 1 1" |
o 20–35 % menší; odstraní šum koncových nul a zachová CAD přesnost |
Použijte interaktivní posuvník Před / Po na plátně, přetáhněte se vektorovou kresbou v reálném čase a před exportem ověřte nulový drift křivek.
Optimalizátor SVG vs. převodník SVG na PNG: správné vektorové workflow
Rychlá odpověď: Optimalizátor SVG použijte, když chcete grafiku zachovat jako škálovatelný soubor .svg nebo inline kód <svg> s menší stopou v KB. Převodník SVG na PNG použijte, když potřebujete rastrový bitmap .png pro platformy, které SVG nahrávání blokují.
Oba nástroje zpracovávají vektorové soubory .svg lokálně v prohlížeči, ale slouží zcela jiným publikačním cílům:
| Cíl workflow |
Doporučený nástroj Utiliome |
Výstupní formát a primární použití |
Zmenšit bajtovou velikost .svg pro web a inline kód |
Optimalizátor SVG (tento nástroj) |
Čisté, minifikované vektorové .svg nebo kopírovatelný kód <svg> pro HTML, React, Vue a Core Web Vitals |
Rastrovat .svg do pixelového bitmapu (1x–8x) |
Převodník SVG na PNG |
Vysoké rozlišení bezeztrátové .png s alfa průhledností pro sociální sítě, CMS nahrávání a assety App Store |
| Zakódovat optimalizované SVG jako CSS Data URI |
Převodník obrázku na Base64 |
Řetězec data:image/svg+xml;base64,... pro CSS pozadí bez HTTP požadavků |
| Zabalit SVG logo do favicon prohlížeče |
Generátor favicon |
Balíček více velikostí favicon.ico, apple-touch-icon.png a site.webmanifest |