Jak funguje optimalizace SVG kódu
Formát SVG (Scalable Vector Graphics) je založen na XML, což znamená, že grafické prvky jsou definovány pomocí textových značek, atributů a souřadnic. Při exportu z grafických editorů však tyto soubory často obsahují velké množství nadbytečných dat, která nemají žádný vliv na výsledný vzhled obrázku v prohlížeči.
Tento online nástroj analyzuje strukturu vloženého XML kódu a provádí bezpečné čištění. Proces optimalizace probíhá tak, že se odstraní nepotřebné části kódu, zatímco samotná vizuální podoba grafiky zůstane zcela nezměněna. Uživatel vloží kód do vstupního pole, nástroj jej zpracuje a následně zobrazí porovnání velikosti před a po optimalizaci spolu s možností zmenšený kód zkopírovat nebo stáhnout.
Bezpečné čištění bez vlivu na vzhled
Optimalizace se zaměřuje výhradně na redundantní data. Mezi prvky, které nástroj z kódu bezpečně odstraňuje, patří:
- Komentáře a metadata vložená grafickými editory.
- Jmenné prostory editorů (editor namespaces) a nepoužité jmenné prostory.
- Nadbytečné mezery mezi atributy.
- Zápisy barev, které lze zkrátit na jejich kratší ekvivalentní tvary.
Naopak v zájmu zachování plné funkčnosti a správného vykreslování v moderním webovém designu nástroj striktně zachovává klíčové strukturální prvky. Nedochází k přepisování cest (path rewrites), přejmenovávání identifikátorů ID, odstraňování atributu viewBox ani k zaokrouhlování přesnosti souřadnic (precision rounding). Tím je zajištěno, že se optimalizovaná grafika chová v responzivním layoutu přesně tak, jak autor zamýšlel.
Význam optimalizace pro webový výkon
Velikost souborů přímo ovlivňuje rychlost načítání webových stránek a celkovou uživatelskou přívětivost. Každý ušetřený bajt u inline ikon a ilustrací snižuje objem přenášených dat mezi serverem a prohlížečem uživatele.
Při použití inline SVG se kód stává přímou součástí dokumentu HTML. Pokud není kód optimalizován, prohlížeč musí parsovat stovky řádků zbytečných metadat a komentářů, což může zpomalit vykreslování stránky. Použitím optimalizovaného SVG se minimalizuje DOM strom dokumentu, což vede k efektivnějšímu zpracování stránky klientským zařízením.
Bezpečnostní pravidla a omezení vstupu
Z důvodu zajištění stability a bezpečnosti při zpracování XML struktur platí pro vstupní kód specifická pravidla. Nástroj nepovoluje zpracování souborů SVG, které obsahují deklaraci typu dokumentu (doctype) nebo vlastní entity (custom entities).
Parsování externích nebo vlastních XML entit v webových aplikacích s sebou nese bezpečnostní rizika, jako jsou útoky typu XML External Entity (XXE). Z tohoto důvodu jsou tyto deklarace blokovány a uživatel je před optimalizací musí z kódu odstranit.
Zpracování kódu má také stanovený časový limit. Pokud optimalizace trvá déle než 15 sekund, proces je automaticky přerušen, aby nedošlo k přetížení systémových prostředků. Stejně tak je hlídána maximální délka řetězce, kdy vstup nesmí překročit definovaný limit počtu znaků.
Ochrana soukromí při zpracování
Při práci s grafickými podklady je klíčová důvěryhodnost zpracování dat. Tento optimalizátor provádí veškeré operace lokálně přímo ve vašem webovém prohlížeči. Kód SVG se nikam neposílá a na servery BroBroGo se nic neodesílá. Celý proces čištění a komprese tak probíhá na vašem zařízení.
Přehled stavových a chybových hlášení
Během práce s nástrojem se mohou v závislosti na stavu vstupu zobrazit následující systémová hlášení a chyby:
| Stav / Chyba | Zobrazená zpráva v rozhraní | Příčina a řešení |
|---|---|---|
| Úspěšná optimalizace | Optimalizováno – o {pct} % menší (ušetřeno {saved}). |
Kód byl úspěšně zmenšen. Zobrazuje se procentuální úspora a ušetřené bajty. |
| Žádná úspora | Optimalizováno. Při bezpečném čištění nedošlo k žádné úspoře velikosti. | Kód již byl optimální a bezpečné čištění nenašlo žádný balast k odstranění. |
| Prázdný vstup | Nejprve vložte kód SVG. | Pokusili jste se spustit optimalizaci bez vloženého kódu. |
| Neplatný formát | Nebyl nalezen žádný prvek <svg>. | Vložený text neobsahuje platný kořenový prvek SVG. |
| Blokovaný obsah | Tento soubor SVG používá typ dokumentu nebo vlastní entitu. Před optimalizací je odstraňte. | Vstup obsahuje zakázané deklarace doctype nebo entit. |
| Překročení velikosti | Toto SVG je pro tento nástroj příliš velké. Velikost musí být pod {max} znaků. |
Vložený kód překročil maximální povolený limit znaků. |
| Vypršení limitu | Zpracování trvalo příliš dlouho a bylo zastaveno – zkuste menší SVG. | Optimalizace trvala déle než 15 sekund a byla z bezpečnostních důvodů ukončena. |
| Obecná chyba | Toto SVG se nepodařilo optimalizovat. | Nastala neočekávaná chyba při analýze struktury kódu. |
Pokud během probíhající optimalizace vymažete vstupní pole nebo změníte jeho obsah, aktuální proces zpracování se okamžitě ukončí.
Často kladené otázky
Co všechno odstraňuje?
Odstraňuje komentáře, metadata, jmenné prostory editorů, nadbytečné mezery u atributů, nepoužité jmenné prostory a zkracuje barvy na ekvivalentní tvary. Ponechává viewBox, ID, popisky a geometrii nedotčené.
Dokáže optimalizovat každé SVG?
Zvládá běžný inline kód SVG. Soubory SVG s deklarací typu dokumentu (doctype) nebo vlastních entit jsou blokovány, protože mohou činit parsování nebezpečným. Odstraňte tyto deklarace a zkuste to znovu.
Změní se vzhled grafiky?
Optimalizátor se vyhýbá přepisování cest, přejmenovávání ID, odstraňování viewBox a zaokrouhlování přesnosti. Pokud vaše SVG spoléhá na komentáře nebo metadata pro návrhářské workflow, uschovejte si kopii originálu.