Autor Zpráva
joe
Profil
Ahoj!
Mám problém s SVG, které si sám vytvářím - pokud jednoduše udělám čtverec s ohraničením a SVG kód pak vložím do HTML a zmenším ho, ohraničení je rozmazané, nejspíš kvůli tomu, že velikost kterou chci zobrazit způsobí že třeba ohraničení je 1.4 px.

Ale co s tím? Mám tedy vytvářet vždy takovou velikost, kterou pak chci vidět? Nebo jen zmenšovat / zvětšovat jen tak, aby to vždy vyšlo správně, tedy v určitém poměru? Co když pak nějaké ikony stáhnu, tak je budu muset upravit, aby nebyly rozmazané, protože u nich poměr bude jiný?
Jak to řešíte vy?
M02
Profil *
joe:
Mám tedy vytvářet vždy takovou velikost, kterou pak chci vidět? Nebo jen zmenšovat / zvětšovat jen tak, aby to vždy vyšlo správně, tedy v určitém poměru?
Ano. Tento problém se u detailní vektorové grafiky řeší běžně, většinou editory pomáhají grafikům nějakou formou pixel-hintingu.
Zdá se, že existuje i návrh na nějakou nativní formu hintingu v normě SVG.

Tento problém možná vyřeší čas, respektive vývoj hardwaru. Na 4K a 5K monitorech už jakákoliv forma antialiasingu pouhým okem rozeznatelná není.
joe
Profil
M02:
Díky, "pixel hinting" jsem neznal.

To ale používání SVG značně komplikuje, především na menších ikonách, kde to je vidět. Došel jsem k závěru, že 1px ohraničení je spolehlivější řešit díky dvoum elementům (1 větší a druhý menší), než využití klasického rámečku, který se vykresluje od středu. Tj. pokud například čtverec má mít rámeček 1px, pak samotný čtverec musí být ležet na půlpixelové souřadnici, jinak ve výsledku nebude jednopixelový, ale dvoupixelový díky antialiasingu. Naopak to zase platí pro rámeček 2px.

Hloupé je, že pokud mám stejnou ikonku, kterou chci používat například ve velikosti 24px a 36px a v ní má mít nějaký tvar 1px rámeček, musím tuto ikonku zkrátka vytvořit dvakrát...
Bubák
Profil
joe:
pokud například čtverec má mít rámeček 1px, pak samotný čtverec musí být ležet na půlpixelové souřadnici, jinak ve výsledku nebude jednopixelový, ale dvoupixelový díky antialiasingu.
Nemusí. Když jsem dělal SVG v Inkscape, tak jsem si nastavil přichytávání k 1px mřížce a díky tomu jsem se popisovanému problému vyhnul.
joe
Profil
Bubák:
Kde prosím najdu to nastavení v Inkscapu?
To ale nemění nic na tom, že ten objekt bude na půl pixelu. Hádám, že to chování bude pak podobné jako v Illustratoru při zapnutí volby "Use Preview Bounds"
Bubák
Profil
joe:
Kde prosím najdu to nastavení v Inkscapu?
Nyní nemám Inkscape nainstalovaný, ale vygůglil jsem tohle:
tomas.dankovi.info/content/inkscape

To ale nemění nic na tom, že ten objekt bude na půl pixelu.
Tak to znamená, že kdybys to měl 2× větší, máš to na celý pixel.
joe
Profil
Bubák:
Díky za odkaz.
Zkrátka v tom vidím stále problém - typicky pro ikonky 16x16 a 24x24. Pokud si vytvořím ikonu pro 24x24 a pak ji chci použít ve velikosti 16x16 (nebo naopak - zvětšení o 1/2) bude problém, protože při renderování dojde k rozpixelování například jednopixelové linky a ikonka bude rozmazaná a nezbývá nic jiného, než v editoru tu ikonu upravit a mít tak dva zdroje, pro 16 a pak 24. Takže za sebe nevidím zase až tak slavné to používání SVG na ikonky :)
M02
Profil *
Velikost bys samozřejmě měl volit v celých násobcích. Nevidím v tom problém – linka, která měla jeden pixel bude dvoupixelová. Osobně bych se vyhnul používání obrysů vůbec, nebo je před exportem rozbil na polygony, budou se ti snáz kontrolovat skutečné hranice výplní.
joe
Profil
M02:
Nevím jestli teď rozumím přesně. Uvedu příklad, na projektu chci mít ikonky v "outlined" stylu, malé 16x16, větší 24x24 a pak velké 48x48 a 96x96.

Pokud bych vytvořil jednu ikonu, tu nejmenší 16x16 a měl tam rámeček 1px, pokud ji pak zvětším na 24, rámeček by byl 1.5, pokud na 48, tak by byl už tři pixely, atd. Problém je, že já bych chtěl mít malé ikony s rámečkem jen 1px (tzn. ty 16 i 24 a pak 48 a 96 s rámečkem 2px). Neexistuje tedy asi jednoduchá cesta, než všechny ty varianty dělat znovu, protože jinak bude rámeček rozmazaný díky aliasingu. Samozřejmostí je převést pak před zobrazením v prohlížeči na cesty.
Keeehi
Profil
16ti pixelový obrázek s jednopixelovým rámečkem je přece úplně jiný obrázek, než 24 pixelový obrázek s jednopixelovým rámečkem. To není problém SVG ale tvé logiky. Obrázek 24px s rámečkem 1px a 48px obrázek s rámečkem 2px - to už stejné obrázky jsou.
joe
Profil
Keeehi:
Jasně, dává to smysl, ale v SVG existují klasické rámečky, se všechny objekty nepřevedou na cesty. Pak SVG můžeš zvětšit jak chceš a rámeček zůstane stejný. Problém je, že se vykresluje ve výchozím stavu od středu a prohlížeče to zřejmě jinak moc nepodporují...
M02
Profil *
Asi ti není pomoci, na tohle SVG jednoduše není dost výkonný formát. Stroke position, pokud vím, definovat neumí. S obrysovými čarami se u SVG ikon prakticky nesetkáš, ostatně ani podpora non-scaling-stroke není úplně spolehlivá.

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: