Dobrý export začíná tam, kde se bude obrázek používat. Tento průvodce vysvětluje, jak zvolit měřítko, připravit soubor SVG a zkontrolovat PNG před jeho použitím.
1. Začněte u cíle
Před převodem zkontrolujte pixelové rozměry požadované webovou stránkou, dokumentem, e-mailovým systémem nebo designovou aplikací, která obrázek přijme. Tento nástroj škáluje vykreslené rozměry SVG pomocí vybraného násobku; neposkytuje vlastní pole pro šířku a výšku. Pokud platforma požaduje šířku 1200 pixelů, porovnejte tento cíl se zobrazenou šířkou SVG a vyberte násobek, který se blíží, aniž by vytvořil zbytečně velký soubor.
2. Pochopte faktory měřítka
Možnosti jsou 1x, 2x, 3x, 4x a 8x. Násobek ovlivňuje šířku i výšku: zdroj 200 × 100 vykreslený při 2x se stane 400 × 200 pixelů. Počet pixelů roste s kvadrátem násobku, takže 8x produkuje 64krát více pixelů než 1x. Větší výstup může spotřebovat výrazně více paměti a nemusí vypadat lépe, když původní grafika nebo cílový displej to nepotřebují.
3. Vyberte faktor pro displeje
Pro standardní grafiku rozhraní je 1x nebo 2x často praktickým východiskem; 2x může pomoci na displejích s vysokou hustotou, když cílové rozvržení obrázek zmenšuje. Zvolte 3x nebo 4x pouze tehdy, když design potřebuje dodatečné pixelové rozměry. Používejte 8x selektivně, protože velmi velká plátna mohou trvat déle při vykreslování nebo překročit limity prohlížeče.
4. Rozhodněte, zda by pozadí mělo být průhledné
Zvolte Průhledné, když musí být PNG umístěn nad barevnou stránkou, prezentací nebo jiným obrázkem. Zvolte Bílé, když cíl očekává bílý obdélník nebo když pevné pozadí usnadňuje kontrolu grafiky. PNG podporuje průhlednost, ale cílová aplikace může zobrazit průhledné pixely nad šachovnicovým vzorem nebo je při vložení obrázku zploštit.
5. Připravte SVG před exportem
Otevřete zdroj ve vektorovém editoru a zkontrolujte, zda má smysluplný viewBox a viditelnou grafiku uvnitř tohoto viewBoxu. Převeďte nebo vložte písma, pokud musí design vypadat identicky na zařízeních, kterým tato písma chybí. Udržujte propojené obrázky a externí zdroje dostupné; tento převaděč v prohlížeči nemusí vykreslit vzdálená písma, propojené obrázky, skripty nebo jiné externí závislosti ze souboru SVG.
6. Převeďte a zkontrolujte náhled
Vyberte jeden soubor SVG, zvolte měřítko a pozadí a poté jej převeďte. Zkontrolujte, zda je celá kresba viditelná, zda text a jemné čáry zůstávají čitelné a zda má náhled očekávané pozadí. Pokud je výsledek oříznutý, zkontrolujte SVG viewBox a rozměry v původním souboru. Převaděč zpracovává jeden soubor po druhém a nabízí stažení PNG pro daný soubor.
7. Zkontrolujte pixely a velikost souboru
Použijte PNG v zamýšleném kontextu a zkontrolujte jej ve velikosti, ve které se skutečně zobrazí. Velký pixelový rozměr automaticky nezlepšuje malou ikonu na obrazovce. Pokud je PNG příliš velký, vraťte se k SVG a exportujte s nižším faktorem. Pokud vypadá rozostřeně, ověřte, zda cíl po převodu nezvětšuje malý rastrový obrázek.
8. Ponechte si upravitelný zdroj
Uložte původní SVG vedle PNG. SVG zachovává vektorové cesty a je obecně lepší pro pozdější úpravy, přebarvování a změnu velikosti. PNG je pohodlná kopie s pevnou velikostí pro cíle, které potřebují rastrové obrázky. Ponechání obou vám umožňuje vytvořit další PNG v jiné velikosti bez opakovaného škálování již rastrizovaného obrázku.