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ů. The result might be misaligned and can be cropped using.

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.

