Manual:Coding conventions/SVG/cs

Tato stránka popisuje kódovací konvence používané v souborech MediaWiki codebase napsané v SVG. Viz také obecné konvence, které platí pro všechny programovací a značkovací jazyky, včetně SVG.

Jako optimalizační nástroj používáme SVGO, viz automatizovaná optimalizace níže.



Struktura kódu
Předpokladem je co nejjednodušší kód s ohledem na čitelnost.

Příklad jednoduchého optimalizovaného souboru – subtract.svg od OOUI:

Pro minimalisty lze kreslit úplně stejně

Příklad trochu složitějšího, optimalizovaného souboru – BetaFeatures šablona snímku obrazovky:

V následující části vysvětlíme různé konvence kódování.



Automatická optimalizace (SVGO)


Jak používat
Je doporučeno instalovat  z https://github.com/svg/svgo nebo z   pro příkazový řádek. K dispozici je také demo v prohlížeči, které vám pomůže s náhledem a obecným pochopením nástroje na https://jakearchibald.github.io/svgomg/. Toto by se však nemělo používat k vytváření produkčních souborů.



Bezpečné pluginy:
Protože některé výchozí zásuvné moduly (možnosti) SVGO mohou mít za následek neočekávaný vzhled u složitějších zásuvných modulů SVG, rozlišujeme mezi bezpečnými, podstatně méně bezpečnými a nebezpečnými zásuvnými moduly. Nastavte "transformPrecision" alespoň na 7, abyste snížili riziko poškození souborů. Při používání nebezpečných zásuvných modulů se doporučuje ověřit před a po rozdílu na soubor, aby byla zajištěna vizuální kvalita.

Uvádíme pouze pluginy, které jsou změněny z výchozího nastavení nebo které mohou být neintuitivní:

Viz SVGO Readme pro další povolené, bezpečné pluginy.
 * Atributy řazení . Povolit nastavením na . Ve výchozím nastavení zakázáno
 * Pokud je to možné, odstraňte nebo vyčistěte atribut . Zastaralý atribut, podporován pouze IE/Edge; ve výchozím nastavení povoleno

Pluginy, které je třeba pečlivě zvážit:

Nebezpečná pravidla k deaktivaci (nepoužívejte!):



Příklad bezpečné konfigurace
Všimněte si, že toto je pro svgo v1.x; v2.x přebírá různé argumenty CLI:

Použijte výstup  pro kód čitelný pro člověka a v procesu odsazení kódu po tabulátorech.



Příklad bezpečné konfigurace (.svgo.config.js)
 - Kompatibilita s SVGO v3.0.0+, změna názvu nového pluginu. (T324899)

 - Spouštěcí skripty NPM umožnily konfiguraci SVGO. (T246321)



Příklad bezpečné konfigurace (Gruntfile.js)
svgmin: { options: { js2svg: { indent: '\t', pretty: true },		plugins: [ { cleanupIDs: false }, {			removeDesc: false }, {			removeRasterImages: true }, {			removeTitle: false }, {			removeViewBox: false }, {			removeXMLProcInst: false }, {			sortAttrs: true }, {			convertPathData: false // https://github.com/svg/svgo/issues/880 }, {			removeMetadata: false // Copyright-Violation }, {			removeHiddenElems: false // source for converted text2path }, {			removeUnknownsAndDefaults: false // removes Flow-Text }, {			cleanupNumericValues: false // https://github.com/svg/svgo/issues/1080 }, {			minifyStyles: false //https://github.com/svg/svgo/issues/888 }, {			removeComments: false //reduces readability }, {			removeEditorsNSData: false // https://github.com/svg/svgo/issues/1096 }, {			collapseGroups: false // https://github.com/svg/svgo/issues/1057 }, {			removeOffCanvasPaths: false //https://github.com/svg/svgo/issues/1732 }, {			removeEmptyContainers:false // https://github.com/svg/svgo/issues/1194 https://github.com/svg/svgo/issues/1618 }, {			convertTransform: fasle // https://github.com/svg/svgo/issues/988 https://github.com/svg/svgo/issues/1021 }, {			cleanupNumericValues: false // https://github.com/svg/svgo/issues/1080 }, {			inlineStyles: false // https://github.com/svg/svgo/issues/1486 } ]	} }



Ruční optimalizace
Kromě automatické optimalizace SVG je třeba zvážit další kroky:


 * Ponechte si následující kód,  ,  ,  ,  ,  ,  ,  ,  ,  ,  ,  , ,  ,  ,  ,  ,  ,  ,  ,  ,  ,  ,  ,  ,  ,  ,  ,  ,  ,  , viz c:Help:směrnice SVG
 * Odeberte  z instrukce zpracování XML, protože je výchozí
 * Malá písmena (pro lepší gzip) a hex hodnoty barev zkraťte, pokud je to možné, např.  místo.
 * Atributy, které jsou stejné pro skupinu prvků, lze místo toho použít na společný rodič nebo někdy dokonce specifikovat příkazem   (viz příklad: CHE Bettens COA.svg). To může snížit upravitelnost nebo čitelnost
 * Spolehněte se na výchozí hodnoty, jako je  a.
 * Syntaxe  je téměř vždy kratší než syntaxe základních tvarů, jako je  nebo dokonce, nicméně , ,  jsou obecně snadněji čitelné/upravitelné, a proto je obecně preferováno použití specifičtějších.
 * V případě potřeby slučte prvky . Nedělejte to, pokud mají být obě cesty upravovány samostatně.
 * Neodstraňujte nadbytečný atribut, pokud je shodný s  , bude obtížnější jej číst/upravovat.
 * Odstraňte nepotřebné  a  . Tato pravidla mají vliv pouze na určité cesty, např. když se cesta protne.
 * Hledejte chyby zaokrouhlení IEEE jako  nebo  . Taková čísla zabírají místo, aniž by poskytovala další informace. Téměř vždy je lze odříznout, aniž by se cokoli vizuálně změnilo.
 * Při kreslení pracujte s nezlomkovou pixelovou mřížkou a zarovnejte co nejvíce bodů na této mřížce. Tyto body mají mnohem vyšší šanci, že budou ve výsledném kódu reprezentovány jako krátká celá čísla.
 * Vyberte mřížku bez zlomků tak, aby odpovídala rysům existujícího obrázku, a upravte velikost nebo překreslete tvary tak, aby na mřížku dopadalo co nejvíce bodů. Výsledek může být špatně zarovnaný a lze jej oříznout pomocí.

Pokud se chcete ponořit ještě hlouběji, existují další optimalizace pro kompresi doručení, například:


 * automatické zavírání cest (neboli odebrání  pro určité tvary),
 * při vytváření cest používejte relativní příkazy (místo absolutních příkazů, např. "m" pro "move by" (přesunout o), místo "M" pro "move to" (přesunout do)),
 * optimalizace pro zpětné reference komprese



Další nástroje
Další nástroje, které mohou být užitečné:


 * 1) SvgWorkAroundBot
 * 2) SVGOMG
 * 3) scour
 * 4) svgcleaner
 * 5) další možnosti naleznete na stránce Nápověda:Pokyny pro SVG#Jak optimalizovat.

scour


Popis a historie


Jak používat
Můžete jej použít v prohlížeči za https://svgworkaroundbot.toolforge.org/ nebo jej nainstalovat přes  z příkazového řádku (Linux-PC/Mac-PC/Windows).



bezpečné pluginy
Scour je velmi opatrný optimalizátor, nicméně některé pluginy stále mohou rozbít soubor nebo odstranit důležité neviditelné části, pro jistotu můžete použít

svgcleaner


Popis a historie
Tento optimalizátor vyvíjel od ledna 2012 do roku 2022 Yevhenii Reizner. Zaměřuje se na dodržování aktuálních standardů w3c (SVG1.1).



Jak používat
Můžete jej použít v prohlížeči na https://svgworkaroundbot.toolforge.org/ nebo si jej stáhnout z https://github.com/RazrFalcon/svgcleaner-gui/releases.

