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 . Deprecated attribute, only supported by IE/Edge; enabled by default

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


How to use
You can use in the browser at https://svgworkaroundbot.toolforge.org/ or install it via  from the command line (Linux-PC/Mac-PC/Windows).

safe plugins
Scour is a very cautious optimizer, however some plugins can still be break the file or remove important non-visible parts, to be on the safe side you can use

Description and history
This optimizer was developed from Jan 2012 to 2022 by Yevhenii Reizner. It focusses on following the current w3c-Standards (SVG1.1).

How to use
You can use in the browser at https://svgworkaroundbot.toolforge.org/ or download it from https://github.com/RazrFalcon/svgcleaner-gui/releases.