CINXE.COM

<!DOCTYPE html> <html class="client-nojs vector-feature-language-in-header-disabled vector-feature-language-in-main-page-header-disabled vector-feature-sticky-header-disabled vector-feature-page-tools-pinned-disabled vector-feature-toc-pinned-clientpref-1 vector-feature-main-menu-pinned-disabled vector-feature-limited-width-clientpref-1 vector-feature-limited-width-content-enabled vector-feature-custom-font-size-clientpref--excluded vector-feature-appearance-pinned-clientpref-1 vector-feature-night-mode-disabled skin-theme-clientpref-day vector-toc-available" lang="en" dir="ltr"> <head> <meta charset="UTF-8"> <title>Manual:Coding conventions/SVG - MediaWiki</title> <script>(function(){var className="client-js vector-feature-language-in-header-disabled vector-feature-language-in-main-page-header-disabled vector-feature-sticky-header-disabled vector-feature-page-tools-pinned-disabled vector-feature-toc-pinned-clientpref-1 vector-feature-main-menu-pinned-disabled vector-feature-limited-width-clientpref-1 vector-feature-limited-width-content-enabled vector-feature-custom-font-size-clientpref--excluded vector-feature-appearance-pinned-clientpref-1 vector-feature-night-mode-disabled skin-theme-clientpref-day vector-toc-available";var cookie=document.cookie.match(/(?:^|; )mediawikiwikimwclientpreferences=([^;]+)/);if(cookie){cookie[1].split('%2C').forEach(function(pref){className=className.replace(new RegExp('(^| )'+pref.replace(/-clientpref-\w+$|[^\w-]+/g,'')+'-clientpref-\\w+( |$)'),'$1'+pref+'$2');});}document.documentElement.className=className;}());RLCONF={"wgBreakFrames":false,"wgSeparatorTransformTable":["",""],"wgDigitTransformTable":["",""], "wgDefaultDateFormat":"dmy","wgMonthNames":["","January","February","March","April","May","June","July","August","September","October","November","December"],"wgRequestId":"b402c292-a1a1-4ff5-a2ec-8e7b21920306","wgCanonicalNamespace":"Manual","wgCanonicalSpecialPageName":false,"wgNamespaceNumber":100,"wgPageName":"Manual:Coding_conventions/SVG","wgTitle":"Coding conventions/SVG","wgCurRevisionId":6806061,"wgRevisionId":6806061,"wgArticleId":740452,"wgIsArticle":true,"wgIsRedirect":false,"wgAction":"view","wgUserName":null,"wgUserGroups":["*"],"wgCategories":["Development guidelines","SVG"],"wgPageViewLanguage":"en","wgPageContentLanguage":"en","wgPageContentModel":"wikitext","wgRelevantPageName":"Manual:Coding_conventions/SVG","wgRelevantArticleId":740452,"wgIsProbablyEditable":true,"wgRelevantPageIsProbablyEditable":true,"wgRestrictionEdit":[],"wgRestrictionMove":[],"wgRedirectedFrom":"CC/SVG","wgNoticeProject":"mediawiki","wgCiteReferencePreviewsActive":true,"wgMediaViewerOnClick": true,"wgMediaViewerEnabledByDefault":true,"wgVisualEditor":{"pageLanguageCode":"en","pageLanguageDir":"ltr","pageVariantFallbacks":"en"},"wgMFDisplayWikibaseDescriptions":{"search":true,"watchlist":true,"tagline":false,"nearby":true},"wgWMESchemaEditAttemptStepOversample":false,"wgWMEPageLength":30000,"wgInternalRedirectTargetUrl":"/wiki/Manual:Coding_conventions/SVG","wgTranslatePageTranslation":"source","wgCentralAuthMobileDomain":false,"wgEditSubmitButtonLabelPublish":true,"wgULSPosition":"personal","wgULSisCompactLinksEnabled":true,"wgVector2022LanguageInHeader":false,"wgULSisLanguageSelectorEmpty":false,"wgCheckUserClientHintsHeadersJsApi":["brands","architecture","bitness","fullVersionList","mobile","model","platform","platformVersion"]};RLSTATE={"ext.globalCssJs.user.styles":"ready","site.styles":"ready","user.styles":"ready","ext.globalCssJs.user":"ready","user":"ready","user.options":"loading","ext.translate.tag.languages":"ready","ext.pygments":"ready","ext.cite.styles": "ready","skins.vector.search.codex.styles":"ready","skins.vector.styles":"ready","skins.vector.icons":"ready","ext.translate.edit.documentation.styles":"ready","ext.translate":"ready","ext.wikimediamessages.styles":"ready","ext.visualEditor.desktopArticleTarget.noscript":"ready","ext.uls.pt":"ready","wikibase.client.init":"ready","ext.wikimediaBadges":"ready"};RLPAGEMODULES=["mediawiki.action.view.redirect","ext.pygments.view","ext.cite.ux-enhancements","site","mediawiki.page.ready","mediawiki.toc","skins.vector.js","ext.centralNotice.geoIP","ext.centralNotice.startUp","ext.translate.pagetranslation.uls","ext.urlShortener.toolbar","ext.centralauth.centralautologin","mmv.bootstrap","ext.visualEditor.desktopArticleTarget.init","ext.visualEditor.targetLoader","ext.echo.centralauth","ext.eventLogging","ext.wikimediaEvents","ext.navigationTiming","ext.uls.compactlinks","ext.uls.interface","ext.checkUser.clientHints"];</script> <script>(RLQ=window.RLQ||[]).push(function(){mw.loader.impl(function(){return["user.options@12s5i",function($,jQuery,require,module){mw.user.tokens.set({"patrolToken":"+\\","watchToken":"+\\","csrfToken":"+\\"}); }];});});</script> <link rel="stylesheet" href="/w/load.php?lang=en&modules=ext.cite.styles%7Cext.pygments%2Ctranslate%2CwikimediaBadges%7Cext.translate.edit.documentation.styles%7Cext.translate.tag.languages%7Cext.uls.pt%7Cext.visualEditor.desktopArticleTarget.noscript%7Cext.wikimediamessages.styles%7Cskins.vector.icons%2Cstyles%7Cskins.vector.search.codex.styles%7Cwikibase.client.init&only=styles&skin=vector-2022"> <script async="" src="/w/load.php?lang=en&modules=startup&only=scripts&raw=1&skin=vector-2022"></script> <meta name="ResourceLoaderDynamicStyles" content=""> <link rel="stylesheet" href="/w/load.php?lang=en&modules=site.styles&only=styles&skin=vector-2022"> <meta name="generator" content="MediaWiki 1.44.0-wmf.4"> <meta name="referrer" content="origin"> <meta name="referrer" content="origin-when-cross-origin"> <meta name="robots" content="max-image-preview:standard"> <meta name="format-detection" content="telephone=no"> <meta name="viewport" content="width=1120"> <meta property="og:site_name" content="MediaWiki"> <meta property="og:title" content="Manual:Coding conventions/SVG - MediaWiki"> <meta property="og:type" content="website"> <link rel="preconnect" href="//upload.wikimedia.org"> <link rel="alternate" media="only screen and (max-width: 640px)" href="//m.mediawiki.org/wiki/Manual:Coding_conventions/SVG"> <link rel="alternate" type="application/x-wiki" title="Edit" href="/w/index.php?title=Manual:Coding_conventions/SVG&action=edit"> <link rel="apple-touch-icon" href="/static/apple-touch/mediawiki.png"> <link rel="icon" href="/static/favicon/mediawiki.ico"> <link rel="search" type="application/opensearchdescription+xml" href="/w/rest.php/v1/search" title="MediaWiki (en)"> <link rel="EditURI" type="application/rsd+xml" href="//www.mediawiki.org/w/api.php?action=rsd"> <link rel="canonical" href="https://www.mediawiki.org/wiki/Manual:Coding_conventions/SVG"> <link rel="license" href="https://creativecommons.org/licenses/by-sa/4.0/"> <link rel="alternate" type="application/atom+xml" title="MediaWiki Atom feed" href="/w/index.php?title=Special:RecentChanges&feed=atom"> <link rel="dns-prefetch" href="//meta.wikimedia.org" /> <link rel="dns-prefetch" href="//login.wikimedia.org"> </head> <body class="skin--responsive skin-vector skin-vector-search-vue mediawiki ltr sitedir-ltr mw-hide-empty-elt ns-100 ns-subject mw-editable page-Manual_Coding_conventions_SVG rootpage-Manual_Coding_conventions skin-vector-2022 action-view"><a class="mw-jump-link" href="#bodyContent">Jump to content</a> <div class="vector-header-container"> <header class="vector-header mw-header"> <div class="vector-header-start"> <nav class="vector-main-menu-landmark" aria-label="Site"> <div id="vector-main-menu-dropdown" class="vector-dropdown vector-main-menu-dropdown vector-button-flush-left vector-button-flush-right" > <input type="checkbox" id="vector-main-menu-dropdown-checkbox" role="button" aria-haspopup="true" data-event-name="ui.dropdown-vector-main-menu-dropdown" class="vector-dropdown-checkbox " aria-label="Main menu" > <label id="vector-main-menu-dropdown-label" for="vector-main-menu-dropdown-checkbox" class="vector-dropdown-label cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet cdx-button--icon-only " aria-hidden="true" ><span class="vector-icon mw-ui-icon-menu mw-ui-icon-wikimedia-menu"></span> <span class="vector-dropdown-label-text">Main menu</span> </label> <div class="vector-dropdown-content"> <div id="vector-main-menu-unpinned-container" class="vector-unpinned-container"> <div id="vector-main-menu" class="vector-main-menu vector-pinnable-element"> <div class="vector-pinnable-header vector-main-menu-pinnable-header vector-pinnable-header-unpinned" data-feature-name="main-menu-pinned" data-pinnable-element-id="vector-main-menu" data-pinned-container-id="vector-main-menu-pinned-container" data-unpinned-container-id="vector-main-menu-unpinned-container" > <div class="vector-pinnable-header-label">Main menu</div> <button class="vector-pinnable-header-toggle-button vector-pinnable-header-pin-button" data-event-name="pinnable-header.vector-main-menu.pin">move to sidebar</button> <button class="vector-pinnable-header-toggle-button vector-pinnable-header-unpin-button" data-event-name="pinnable-header.vector-main-menu.unpin">hide</button> </div> <div id="p-navigation" class="vector-menu mw-portlet mw-portlet-navigation" > <div class="vector-menu-heading"> Navigation </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="n-mainpage-description" class="mw-list-item"><a href="/wiki/MediaWiki" title="Visit the main page [z]" accesskey="z"><span>Main page</span></a></li><li id="n-mw-download" class="mw-list-item"><a href="/wiki/Download"><span>Get MediaWiki</span></a></li><li id="n-mw-extensions" class="mw-list-item"><a href="/wiki/Special:MyLanguage/Category:Extensions"><span>Get extensions</span></a></li><li id="n-blog-text" class="mw-list-item"><a href="https://techblog.wikimedia.org/"><span>Tech blog</span></a></li><li id="n-mw-contribute" class="mw-list-item"><a href="/wiki/Special:MyLanguage/How_to_contribute"><span>Contribute</span></a></li> </ul> </div> </div> <div id="p-support" class="vector-menu mw-portlet mw-portlet-support" > <div class="vector-menu-heading"> Support </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="n-help" class="mw-list-item"><a href="/wiki/Special:MyLanguage/Help:Contents" title="The place to find out"><span>User help</span></a></li><li id="n-mw-faq" class="mw-list-item"><a href="/wiki/Special:MyLanguage/Manual:FAQ"><span>FAQ</span></a></li><li id="n-mw-manual" class="mw-list-item"><a href="/wiki/Special:MyLanguage/Manual:Contents"><span>Technical manual</span></a></li><li id="n-mw-supportdesk" class="mw-list-item"><a href="/wiki/Project:Support_desk"><span>Support desk</span></a></li><li id="n-mw-communication" class="mw-list-item"><a href="/wiki/Special:MyLanguage/Communication"><span>Communication</span></a></li> </ul> </div> </div> <div id="p-development" class="vector-menu mw-portlet mw-portlet-development" > <div class="vector-menu-heading"> Development </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="n-mw-developerportal" class="mw-list-item"><a href="https://developer.wikimedia.org/"><span>Developer portal</span></a></li><li id="n-svn-statistics" class="mw-list-item"><a href="/wiki/Development_statistics"><span>Code statistics</span></a></li> </ul> </div> </div> <div id="p-mediawiki.org" class="vector-menu mw-portlet mw-portlet-mediawiki_org" > <div class="vector-menu-heading"> mediawiki.org </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="n-portal" class="mw-list-item"><a href="/wiki/Project:Help" title="About the project, what you can do, where to find things"><span>Community portal</span></a></li><li id="n-recentchanges" class="mw-list-item"><a href="/wiki/Special:RecentChanges" title="A list of recent changes in the wiki [r]" accesskey="r"><span>Recent changes</span></a></li><li id="n-mw-translate" class="mw-list-item"><a href="/wiki/Special:LanguageStats"><span>Translate content</span></a></li><li id="n-randompage" class="mw-list-item"><a href="/wiki/Special:Random" title="Load a random page [x]" accesskey="x"><span>Random page</span></a></li><li id="n-mw-discussion" class="mw-list-item"><a href="/wiki/Project:Village_Pump"><span>Village pump</span></a></li><li id="n-Sandboxlink-portlet-label" class="mw-list-item"><a href="/wiki/Project:Sandbox"><span>Sandbox</span></a></li> </ul> </div> </div> <div id="p-lang" class="vector-menu mw-portlet mw-portlet-lang" > <div class="vector-menu-heading"> In other languages </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> </ul> <div class="after-portlet after-portlet-lang"><span class="wb-langlinks-add wb-langlinks-link"><a href="https://www.wikidata.org/wiki/Special:NewItem?site=mediawikiwiki&page=Manual%3ACoding+conventions%2FSVG" title="Add interlanguage links" class="wbc-editpage">Add links</a></span></div> </div> </div> </div> </div> </div> </div> </nav> <a href="/wiki/MediaWiki" class="mw-logo"> <img class="mw-logo-icon" src="/static/images/icons/mediawikiwiki.svg" alt="" aria-hidden="true" height="50" width="50"> <span class="mw-logo-container skin-invert"> <img class="mw-logo-wordmark" alt="MediaWiki" src="/static/images/mobile/copyright/mediawikiwiki-wordmark.svg" style="width: 7.5em; height: 1.125em;"> </span> </a> </div> <div class="vector-header-end"> <div id="p-search" role="search" class="vector-search-box-vue vector-search-box-collapses vector-search-box-show-thumbnail vector-search-box-auto-expand-width vector-search-box"> <a href="/wiki/Special:Search" class="cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet cdx-button--icon-only search-toggle" title="Search MediaWiki [f]" accesskey="f"><span class="vector-icon mw-ui-icon-search mw-ui-icon-wikimedia-search"></span> <span>Search</span> </a> <div class="vector-typeahead-search-container"> <div class="cdx-typeahead-search cdx-typeahead-search--show-thumbnail cdx-typeahead-search--auto-expand-width"> <form action="/w/index.php" id="searchform" class="cdx-search-input cdx-search-input--has-end-button"> <div id="simpleSearch" class="cdx-search-input__input-wrapper" data-search-loc="header-moved"> <div class="cdx-text-input cdx-text-input--has-start-icon"> <input class="cdx-text-input__input" type="search" name="search" placeholder="Search MediaWiki" aria-label="Search MediaWiki" autocapitalize="sentences" title="Search MediaWiki [f]" accesskey="f" id="searchInput" > <span class="cdx-text-input__icon cdx-text-input__start-icon"></span> </div> <input type="hidden" name="title" value="Special:Search"> </div> <button class="cdx-button cdx-search-input__end-button">Search</button> </form> </div> </div> </div> <nav class="vector-user-links vector-user-links-wide" aria-label="Personal tools"> <div class="vector-user-links-main"> <div id="p-vector-user-menu-preferences" class="vector-menu mw-portlet" > <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="ca-uls" class="mw-list-item active user-links-collapsible-item"><a data-mw="interface" href="#" class="uls-trigger cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet"><span class="vector-icon mw-ui-icon-wikimedia-language mw-ui-icon-wikimedia-wikimedia-language"></span> <span>English</span></a> </li> </ul> </div> </div> <div id="p-vector-user-menu-userpage" class="vector-menu mw-portlet emptyPortlet" > <div class="vector-menu-content"> <ul class="vector-menu-content-list"> </ul> </div> </div> <nav class="vector-appearance-landmark" aria-label="Appearance"> <div id="vector-appearance-dropdown" class="vector-dropdown " title="Change the appearance of the page's font size, width, and color" > <input type="checkbox" id="vector-appearance-dropdown-checkbox" role="button" aria-haspopup="true" data-event-name="ui.dropdown-vector-appearance-dropdown" class="vector-dropdown-checkbox " aria-label="Appearance" > <label id="vector-appearance-dropdown-label" for="vector-appearance-dropdown-checkbox" class="vector-dropdown-label cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet cdx-button--icon-only " aria-hidden="true" ><span class="vector-icon mw-ui-icon-appearance mw-ui-icon-wikimedia-appearance"></span> <span class="vector-dropdown-label-text">Appearance</span> </label> <div class="vector-dropdown-content"> <div id="vector-appearance-unpinned-container" class="vector-unpinned-container"> </div> </div> </div> </nav> <div id="p-vector-user-menu-notifications" class="vector-menu mw-portlet emptyPortlet" > <div class="vector-menu-content"> <ul class="vector-menu-content-list"> </ul> </div> </div> <div id="p-vector-user-menu-overflow" class="vector-menu mw-portlet" > <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="pt-sitesupport-2" class="user-links-collapsible-item mw-list-item user-links-collapsible-item"><a data-mw="interface" href="https://donate.wikimedia.org/?utm_source=donate&utm_medium=sidebar&utm_campaign=spontaneous&uselang=en" class=""><span>Donate</span></a> </li> <li id="pt-createaccount-2" class="user-links-collapsible-item mw-list-item user-links-collapsible-item"><a data-mw="interface" href="/w/index.php?title=Special:CreateAccount&returnto=Manual%3ACoding+conventions%2FSVG" title="You are encouraged to create an account and log in; however, it is not mandatory" class=""><span>Create account</span></a> </li> <li id="pt-login-2" class="user-links-collapsible-item mw-list-item user-links-collapsible-item"><a data-mw="interface" href="/w/index.php?title=Special:UserLogin&returnto=Manual%3ACoding+conventions%2FSVG" title="You are encouraged to log in; however, it is not mandatory [o]" accesskey="o" class=""><span>Log in</span></a> </li> </ul> </div> </div> </div> <div id="vector-user-links-dropdown" class="vector-dropdown vector-user-menu vector-button-flush-right vector-user-menu-logged-out" title="More options" > <input type="checkbox" id="vector-user-links-dropdown-checkbox" role="button" aria-haspopup="true" data-event-name="ui.dropdown-vector-user-links-dropdown" class="vector-dropdown-checkbox " aria-label="Personal tools" > <label id="vector-user-links-dropdown-label" for="vector-user-links-dropdown-checkbox" class="vector-dropdown-label cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet cdx-button--icon-only " aria-hidden="true" ><span class="vector-icon mw-ui-icon-ellipsis mw-ui-icon-wikimedia-ellipsis"></span> <span class="vector-dropdown-label-text">Personal tools</span> </label> <div class="vector-dropdown-content"> <div id="p-personal" class="vector-menu mw-portlet mw-portlet-personal user-links-collapsible-item" title="User menu" > <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="pt-sitesupport" class="user-links-collapsible-item mw-list-item"><a href="https://donate.wikimedia.org/?utm_source=donate&utm_medium=sidebar&utm_campaign=spontaneous&uselang=en"><span>Donate</span></a></li><li id="pt-createaccount" class="user-links-collapsible-item mw-list-item"><a href="/w/index.php?title=Special:CreateAccount&returnto=Manual%3ACoding+conventions%2FSVG" title="You are encouraged to create an account and log in; however, it is not mandatory"><span class="vector-icon mw-ui-icon-userAdd mw-ui-icon-wikimedia-userAdd"></span> <span>Create account</span></a></li><li id="pt-login" class="user-links-collapsible-item mw-list-item"><a href="/w/index.php?title=Special:UserLogin&returnto=Manual%3ACoding+conventions%2FSVG" title="You are encouraged to log in; however, it is not mandatory [o]" accesskey="o"><span class="vector-icon mw-ui-icon-logIn mw-ui-icon-wikimedia-logIn"></span> <span>Log in</span></a></li> </ul> </div> </div> <div id="p-user-menu-anon-editor" class="vector-menu mw-portlet mw-portlet-user-menu-anon-editor" > <div class="vector-menu-heading"> Pages for logged out editors <a href="/wiki/Help:Introduction" aria-label="Learn more about editing"><span>learn more</span></a> </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="pt-anoncontribs" class="mw-list-item"><a href="/wiki/Special:MyContributions" title="A list of edits made from this IP address [y]" accesskey="y"><span>Contributions</span></a></li><li id="pt-anontalk" class="mw-list-item"><a href="/wiki/Special:MyTalk" title="Discussion about edits from this IP address [n]" accesskey="n"><span>Talk</span></a></li> </ul> </div> </div> </div> </div> </nav> </div> </header> </div> <div class="mw-page-container"> <div class="mw-page-container-inner"> <div class="vector-sitenotice-container"> <div id="siteNotice"></div> </div> <div class="vector-column-start"> <div class="vector-main-menu-container"> <div id="mw-navigation"> <nav id="mw-panel" class="vector-main-menu-landmark" aria-label="Site"> <div id="vector-main-menu-pinned-container" class="vector-pinned-container"> </div> </nav> </div> </div> <div class="vector-sticky-pinned-container"> <nav id="mw-panel-toc" aria-label="Contents" data-event-name="ui.sidebar-toc" class="mw-table-of-contents-container vector-toc-landmark"> <div id="vector-toc-pinned-container" class="vector-pinned-container"> <div id="vector-toc" class="vector-toc vector-pinnable-element"> <div class="vector-pinnable-header vector-toc-pinnable-header vector-pinnable-header-pinned" data-feature-name="toc-pinned" data-pinnable-element-id="vector-toc" > <h2 class="vector-pinnable-header-label">Contents</h2> <button class="vector-pinnable-header-toggle-button vector-pinnable-header-pin-button" data-event-name="pinnable-header.vector-toc.pin">move to sidebar</button> <button class="vector-pinnable-header-toggle-button vector-pinnable-header-unpin-button" data-event-name="pinnable-header.vector-toc.unpin">hide</button> </div> <ul class="vector-toc-contents" id="mw-panel-toc-list"> <li id="toc-mw-content-text" class="vector-toc-list-item vector-toc-level-1"> <a href="#" class="vector-toc-link"> <div class="vector-toc-text">Beginning</div> </a> </li> <li id="toc-Code_structure" class="vector-toc-list-item vector-toc-level-1 vector-toc-list-item-expanded"> <a class="vector-toc-link" href="#Code_structure"> <div class="vector-toc-text"> <span class="vector-toc-numb">1</span> <span>Code structure </span> </div> </a> <ul id="toc-Code_structure-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Automated_optimisation_(SVGO)" class="vector-toc-list-item vector-toc-level-1 vector-toc-list-item-expanded"> <a class="vector-toc-link" href="#Automated_optimisation_(SVGO)"> <div class="vector-toc-text"> <span class="vector-toc-numb">2</span> <span>Automated optimisation (SVGO)</span> </div> </a> <button aria-controls="toc-Automated_optimisation_(SVGO)-sublist" class="cdx-button cdx-button--weight-quiet cdx-button--icon-only vector-toc-toggle"> <span class="vector-icon mw-ui-icon-wikimedia-expand"></span> <span>Toggle Automated optimisation (SVGO) subsection</span> </button> <ul id="toc-Automated_optimisation_(SVGO)-sublist" class="vector-toc-list"> <li id="toc-How_to_use" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#How_to_use"> <div class="vector-toc-text"> <span class="vector-toc-numb">2.1</span> <span>How to use</span> </div> </a> <ul id="toc-How_to_use-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Safe_plugins:" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#Safe_plugins:"> <div class="vector-toc-text"> <span class="vector-toc-numb">2.2</span> <span>Safe plugins:</span> </div> </a> <ul id="toc-Safe_plugins:-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Exemplified_safe_configuration" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#Exemplified_safe_configuration"> <div class="vector-toc-text"> <span class="vector-toc-numb">2.3</span> <span>Exemplified safe configuration</span> </div> </a> <ul id="toc-Exemplified_safe_configuration-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Exemplified_safe_configuration_(.svgo.config.js)" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#Exemplified_safe_configuration_(.svgo.config.js)"> <div class="vector-toc-text"> <span class="vector-toc-numb">2.4</span> <span>Exemplified safe configuration (.svgo.config.js)</span> </div> </a> <ul id="toc-Exemplified_safe_configuration_(.svgo.config.js)-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Exemplified_safe_configuration_(Gruntfile.js)" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#Exemplified_safe_configuration_(Gruntfile.js)"> <div class="vector-toc-text"> <span class="vector-toc-numb">2.5</span> <span>Exemplified safe configuration (Gruntfile.js)</span> </div> </a> <ul id="toc-Exemplified_safe_configuration_(Gruntfile.js)-sublist" class="vector-toc-list"> </ul> </li> </ul> </li> <li id="toc-Manual_optimisation" class="vector-toc-list-item vector-toc-level-1 vector-toc-list-item-expanded"> <a class="vector-toc-link" href="#Manual_optimisation"> <div class="vector-toc-text"> <span class="vector-toc-numb">3</span> <span>Manual optimisation</span> </div> </a> <ul id="toc-Manual_optimisation-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Other_tools" class="vector-toc-list-item vector-toc-level-1 vector-toc-list-item-expanded"> <a class="vector-toc-link" href="#Other_tools"> <div class="vector-toc-text"> <span class="vector-toc-numb">4</span> <span>Other tools</span> </div> </a> <button aria-controls="toc-Other_tools-sublist" class="cdx-button cdx-button--weight-quiet cdx-button--icon-only vector-toc-toggle"> <span class="vector-icon mw-ui-icon-wikimedia-expand"></span> <span>Toggle Other tools subsection</span> </button> <ul id="toc-Other_tools-sublist" class="vector-toc-list"> <li id="toc-scour" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#scour"> <div class="vector-toc-text"> <span class="vector-toc-numb">4.1</span> <span>scour</span> </div> </a> <ul id="toc-scour-sublist" class="vector-toc-list"> <li id="toc-Description_and_history" class="vector-toc-list-item vector-toc-level-3"> <a class="vector-toc-link" href="#Description_and_history"> <div class="vector-toc-text"> <span class="vector-toc-numb">4.1.1</span> <span>Description and history</span> </div> </a> <ul id="toc-Description_and_history-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-How_to_use_2" class="vector-toc-list-item vector-toc-level-3"> <a class="vector-toc-link" href="#How_to_use_2"> <div class="vector-toc-text"> <span class="vector-toc-numb">4.1.2</span> <span>How to use</span> </div> </a> <ul id="toc-How_to_use_2-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-safe_plugins" class="vector-toc-list-item vector-toc-level-3"> <a class="vector-toc-link" href="#safe_plugins"> <div class="vector-toc-text"> <span class="vector-toc-numb">4.1.3</span> <span>safe plugins</span> </div> </a> <ul id="toc-safe_plugins-sublist" class="vector-toc-list"> </ul> </li> </ul> </li> <li id="toc-svgcleaner" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#svgcleaner"> <div class="vector-toc-text"> <span class="vector-toc-numb">4.2</span> <span>svgcleaner</span> </div> </a> <ul id="toc-svgcleaner-sublist" class="vector-toc-list"> <li id="toc-Description_and_history_2" class="vector-toc-list-item vector-toc-level-3"> <a class="vector-toc-link" href="#Description_and_history_2"> <div class="vector-toc-text"> <span class="vector-toc-numb">4.2.1</span> <span>Description and history</span> </div> </a> <ul id="toc-Description_and_history_2-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-How_to_use_3" class="vector-toc-list-item vector-toc-level-3"> <a class="vector-toc-link" href="#How_to_use_3"> <div class="vector-toc-text"> <span class="vector-toc-numb">4.2.2</span> <span>How to use</span> </div> </a> <ul id="toc-How_to_use_3-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-safe_plugins_2" class="vector-toc-list-item vector-toc-level-3"> <a class="vector-toc-link" href="#safe_plugins_2"> <div class="vector-toc-text"> <span class="vector-toc-numb">4.2.3</span> <span>safe plugins</span> </div> </a> <ul id="toc-safe_plugins_2-sublist" class="vector-toc-list"> </ul> </li> </ul> </li> </ul> </li> <li id="toc-References" class="vector-toc-list-item vector-toc-level-1 vector-toc-list-item-expanded"> <a class="vector-toc-link" href="#References"> <div class="vector-toc-text"> <span class="vector-toc-numb">5</span> <span>References</span> </div> </a> <ul id="toc-References-sublist" class="vector-toc-list"> </ul> </li> </ul> </div> </div> </nav> </div> </div> <div class="mw-content-container"> <main id="content" class="mw-body"> <header class="mw-body-header vector-page-titlebar"> <nav aria-label="Contents" class="vector-toc-landmark"> <div id="vector-page-titlebar-toc" class="vector-dropdown vector-page-titlebar-toc vector-button-flush-left" > <input type="checkbox" id="vector-page-titlebar-toc-checkbox" role="button" aria-haspopup="true" data-event-name="ui.dropdown-vector-page-titlebar-toc" class="vector-dropdown-checkbox " aria-label="Toggle the table of contents" > <label id="vector-page-titlebar-toc-label" for="vector-page-titlebar-toc-checkbox" class="vector-dropdown-label cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet cdx-button--icon-only " aria-hidden="true" ><span class="vector-icon mw-ui-icon-listBullet mw-ui-icon-wikimedia-listBullet"></span> <span class="vector-dropdown-label-text">Toggle the table of contents</span> </label> <div class="vector-dropdown-content"> <div id="vector-page-titlebar-toc-unpinned-container" class="vector-unpinned-container"> </div> </div> </div> </nav> <h1 id="firstHeading" class="firstHeading mw-first-heading"><span class="mw-page-title-namespace">Manual</span><span class="mw-page-title-separator">:</span><span class="mw-page-title-main">Coding conventions/SVG</span></h1> <div class="mw-indicators"> <div id="mw-indicator-tpl-shortcut" class="mw-indicator"><div class="mw-parser-output"><div class="mw-parser-output"><style data-mw-deduplicate="TemplateStyles:r6605561">.mw-parser-output .tpl-badge{background-color:var(--background-color-progressive-subtle,#eaf3ff);color:var(--color-base,#202122);border-radius:10px;display:inline-block;font-size:90%;padding:5px 8px}</style><div class="tpl-badge">shortcut: <a href="/wiki/CC/SVG" class="mw-redirect" title="CC/SVG"><b>CC/SVG</b></a></div></div></div></div> </div> </header> <div class="vector-page-toolbar"> <div class="vector-page-toolbar-container"> <div id="left-navigation"> <nav aria-label="Namespaces"> <div id="p-associated-pages" class="vector-menu vector-menu-tabs mw-portlet mw-portlet-associated-pages" > <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="ca-nstab-manual" class="selected vector-tab-noicon mw-list-item"><a href="/wiki/Manual:Coding_conventions/SVG" title="View the subject page [c]" accesskey="c"><span>Manual</span></a></li><li id="ca-talk" class="vector-tab-noicon mw-list-item"><a href="/wiki/Manual_talk:Coding_conventions/SVG" rel="discussion" class="mw-redirect" title="Discussion about the content page [t]" accesskey="t"><span>Discussion</span></a></li> </ul> </div> </div> <div id="vector-variants-dropdown" class="vector-dropdown emptyPortlet" > <input type="checkbox" id="vector-variants-dropdown-checkbox" role="button" aria-haspopup="true" data-event-name="ui.dropdown-vector-variants-dropdown" class="vector-dropdown-checkbox " aria-label="Change language variant" > <label id="vector-variants-dropdown-label" for="vector-variants-dropdown-checkbox" class="vector-dropdown-label cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet" aria-hidden="true" ><span class="vector-dropdown-label-text">English</span> </label> <div class="vector-dropdown-content"> <div id="p-variants" class="vector-menu mw-portlet mw-portlet-variants emptyPortlet" > <div class="vector-menu-content"> <ul class="vector-menu-content-list"> </ul> </div> </div> </div> </div> </nav> </div> <div id="right-navigation" class="vector-collapsible"> <nav aria-label="Views"> <div id="p-views" class="vector-menu vector-menu-tabs mw-portlet mw-portlet-views" > <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="ca-view" class="selected vector-tab-noicon mw-list-item"><a href="/wiki/Manual:Coding_conventions/SVG"><span>Read</span></a></li><li id="ca-edit" class="vector-tab-noicon mw-list-item"><a href="/w/index.php?title=Manual:Coding_conventions/SVG&action=edit" title="Edit the source code of this page [e]" accesskey="e"><span>Edit</span></a></li><li id="ca-history" class="vector-tab-noicon mw-list-item"><a href="/w/index.php?title=Manual:Coding_conventions/SVG&action=history" title="Past revisions of this page [h]" accesskey="h"><span>View history</span></a></li> </ul> </div> </div> </nav> <nav class="vector-page-tools-landmark" aria-label="Page tools"> <div id="vector-page-tools-dropdown" class="vector-dropdown vector-page-tools-dropdown" > <input type="checkbox" id="vector-page-tools-dropdown-checkbox" role="button" aria-haspopup="true" data-event-name="ui.dropdown-vector-page-tools-dropdown" class="vector-dropdown-checkbox " aria-label="Tools" > <label id="vector-page-tools-dropdown-label" for="vector-page-tools-dropdown-checkbox" class="vector-dropdown-label cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet" aria-hidden="true" ><span class="vector-dropdown-label-text">Tools</span> </label> <div class="vector-dropdown-content"> <div id="vector-page-tools-unpinned-container" class="vector-unpinned-container"> <div id="vector-page-tools" class="vector-page-tools vector-pinnable-element"> <div class="vector-pinnable-header vector-page-tools-pinnable-header vector-pinnable-header-unpinned" data-feature-name="page-tools-pinned" data-pinnable-element-id="vector-page-tools" data-pinned-container-id="vector-page-tools-pinned-container" data-unpinned-container-id="vector-page-tools-unpinned-container" > <div class="vector-pinnable-header-label">Tools</div> <button class="vector-pinnable-header-toggle-button vector-pinnable-header-pin-button" data-event-name="pinnable-header.vector-page-tools.pin">move to sidebar</button> <button class="vector-pinnable-header-toggle-button vector-pinnable-header-unpin-button" data-event-name="pinnable-header.vector-page-tools.unpin">hide</button> </div> <div id="p-cactions" class="vector-menu mw-portlet mw-portlet-cactions emptyPortlet vector-has-collapsible-items" title="More options" > <div class="vector-menu-heading"> Actions </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="ca-more-view" class="selected vector-more-collapsible-item mw-list-item"><a href="/wiki/Manual:Coding_conventions/SVG"><span>Read</span></a></li><li id="ca-more-edit" class="vector-more-collapsible-item mw-list-item"><a href="/w/index.php?title=Manual:Coding_conventions/SVG&action=edit" title="Edit the source code of this page [e]" accesskey="e"><span>Edit</span></a></li><li id="ca-more-history" class="vector-more-collapsible-item mw-list-item"><a href="/w/index.php?title=Manual:Coding_conventions/SVG&action=history"><span>View history</span></a></li> </ul> </div> </div> <div id="p-tb" class="vector-menu mw-portlet mw-portlet-tb" > <div class="vector-menu-heading"> General </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="t-whatlinkshere" class="mw-list-item"><a href="/wiki/Special:WhatLinksHere/Manual:Coding_conventions/SVG" title="A list of all wiki pages that link here [j]" accesskey="j"><span>What links here</span></a></li><li id="t-recentchangeslinked" class="mw-list-item"><a href="/wiki/Special:RecentChangesLinked/Manual:Coding_conventions/SVG" rel="nofollow" title="Recent changes in pages linked from this page [k]" accesskey="k"><span>Related changes</span></a></li><li id="t-upload" class="mw-list-item"><a href="//commons.wikimedia.org/wiki/Special:UploadWizard" title="Upload files [u]" accesskey="u"><span>Upload file</span></a></li><li id="t-specialpages" class="mw-list-item"><a href="/wiki/Special:SpecialPages" title="A list of all special pages [q]" accesskey="q"><span>Special pages</span></a></li><li id="t-permalink" class="mw-list-item"><a href="/w/index.php?title=Manual:Coding_conventions/SVG&oldid=6806061" title="Permanent link to this revision of this page"><span>Permanent link</span></a></li><li id="t-info" class="mw-list-item"><a href="/w/index.php?title=Manual:Coding_conventions/SVG&action=info" title="More information about this page"><span>Page information</span></a></li><li id="t-cite" class="mw-list-item"><a href="/w/index.php?title=Special:CiteThisPage&page=Manual%3ACoding_conventions%2FSVG&id=6806061&wpFormIdentifier=titleform" title="Information on how to cite this page"><span>Cite this page</span></a></li><li id="t-urlshortener" class="mw-list-item"><a href="/w/index.php?title=Special:UrlShortener&url=https%3A%2F%2Fwww.mediawiki.org%2Fwiki%2FManual%3ACoding_conventions%2FSVG"><span>Get shortened URL</span></a></li><li id="t-urlshortener-qrcode" class="mw-list-item"><a href="/w/index.php?title=Special:QrCode&url=https%3A%2F%2Fwww.mediawiki.org%2Fwiki%2FManual%3ACoding_conventions%2FSVG"><span>Download QR code</span></a></li> </ul> </div> </div> <div id="p-coll-print_export" class="vector-menu mw-portlet mw-portlet-coll-print_export" > <div class="vector-menu-heading"> Print/export </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="coll-create_a_book" class="mw-list-item"><a href="/w/index.php?title=Special:Book&bookcmd=book_creator&referer=Manual%3ACoding+conventions%2FSVG"><span>Create a book</span></a></li><li id="coll-download-as-rl" class="mw-list-item"><a href="/w/index.php?title=Special:DownloadAsPdf&page=Manual%3ACoding_conventions%2FSVG&action=show-download-screen"><span>Download as PDF</span></a></li><li id="t-print" class="mw-list-item"><a href="/w/index.php?title=Manual:Coding_conventions/SVG&printable=yes" title="Printable version of this page [p]" accesskey="p"><span>Printable version</span></a></li> </ul> </div> </div> <div id="p-wikibase-otherprojects" class="vector-menu mw-portlet mw-portlet-wikibase-otherprojects emptyPortlet" > <div class="vector-menu-heading"> In other projects </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> </ul> </div> </div> </div> </div> </div> </div> </nav> </div> </div> </div> <div class="vector-column-end"> <div class="vector-sticky-pinned-container"> <nav class="vector-page-tools-landmark" aria-label="Page tools"> <div id="vector-page-tools-pinned-container" class="vector-pinned-container"> </div> </nav> <nav class="vector-appearance-landmark" aria-label="Appearance"> <div id="vector-appearance-pinned-container" class="vector-pinned-container"> <div id="vector-appearance" class="vector-appearance vector-pinnable-element"> <div class="vector-pinnable-header vector-appearance-pinnable-header vector-pinnable-header-pinned" data-feature-name="appearance-pinned" data-pinnable-element-id="vector-appearance" data-pinned-container-id="vector-appearance-pinned-container" data-unpinned-container-id="vector-appearance-unpinned-container" > <div class="vector-pinnable-header-label">Appearance</div> <button class="vector-pinnable-header-toggle-button vector-pinnable-header-pin-button" data-event-name="pinnable-header.vector-appearance.pin">move to sidebar</button> <button class="vector-pinnable-header-toggle-button vector-pinnable-header-unpin-button" data-event-name="pinnable-header.vector-appearance.unpin">hide</button> </div> </div> </div> </nav> </div> </div> <div id="bodyContent" class="vector-body" aria-labelledby="firstHeading" data-mw-ve-target-container> <div class="vector-body-before-content"> <div id="siteSub" class="noprint">From mediawiki.org</div> </div> <div id="contentSub"><div id="mw-content-subtitle"><div class="subpages">< <bdi dir="ltr"><a href="/wiki/Special:MyLanguage/Manual:Coding_conventions" title="Special:MyLanguage/Manual:Coding conventions">Manual:Coding conventions</a></bdi></div><span class="mw-redirectedfrom">(Redirected from <a href="/w/index.php?title=CC/SVG&redirect=no" class="mw-redirect" title="CC/SVG">CC/SVG</a>)</span></div></div> <div id="mw-content-text" class="mw-body-content"><div class="mw-pt-translate-header noprint nomobile" dir="ltr" lang="en"><a href="/w/index.php?title=Special:Translate&group=page-Manual%3ACoding+conventions%2FSVG&action=page&filter=&action_source=translate_page" title="Special:Translate">Translate this page</a></div><div class="mw-content-ltr mw-parser-output" lang="en" dir="ltr"><div class="mw-pt-languages noprint navigation-not-searchable" lang="en" dir="ltr"><div class="mw-pt-languages-label">Languages:</div><ul class="mw-pt-languages-list"><li><a href="/wiki/Manual:Coding_conventions/SVG/de" class="mw-pt-progress mw-pt-progress--low" title="Handbuch:Kodierungskonventionen/SVG (4% translated)" lang="de" dir="ltr">Deutsch</a></li> <li><span class="mw-pt-languages-ui mw-pt-languages-selected mw-pt-progress mw-pt-progress--complete" lang="en" dir="ltr">English</span></li> <li><a href="/wiki/Manual:Coding_conventions/SVG/pl" class="mw-pt-progress mw-pt-progress--low" title="Manual:Coding conventions/SVG/pl (3% translated)" lang="pl" dir="ltr">polski</a></li> <li><a href="/wiki/Manual:Coding_conventions/SVG/pt-br" class="mw-pt-progress mw-pt-progress--low" title="Manual:Convenções de codificação/SVG (7% translated)" lang="pt-BR" dir="ltr">português do Brasil</a></li> <li><a href="/wiki/Manual:Coding_conventions/SVG/cs" class="mw-pt-progress mw-pt-progress--complete" title="Příručka:Konvence pro psaní kódu/SVG (100% translated)" lang="cs" dir="ltr">čeština</a></li> <li><a href="/wiki/Manual:Coding_conventions/SVG/bn" class="mw-pt-progress mw-pt-progress--low" title="নির্দেশিকা:কোডিং প্রচলন/এসভিজি (13% translated)" lang="bn" dir="ltr">বাংলা</a></li> <li><a href="/wiki/Manual:Coding_conventions/SVG/ja" class="mw-pt-progress mw-pt-progress--low" title="Manual:コーディング規約/SVG (12% translated)" lang="ja" dir="ltr">日本語</a></li></ul></div> <style data-mw-deduplicate="TemplateStyles:r6651108">.mw-parser-output table.ombox{margin:4px 10%;border-collapse:collapse;border:1px solid #a2a9b1;background-color:#f8f9fa;color:#333;box-sizing:border-box}.mw-parser-output .ombox td.mbox-empty-cell{border:none;padding:0;width:1px}.mw-parser-output .ombox th.mbox-text,.mw-parser-output .ombox td.mbox-text{border:none;padding:0.25em 0.9em;width:100%}.mw-parser-output .ombox td.mbox-image{border:none;text-align:center;padding:2px 0 2px 0.9em}.mw-parser-output .ombox td.mbox-imageright{border:none;text-align:center;padding:2px 0.9em 2px 0}.mw-parser-output table.ombox-notice{border-color:#a2a9b1}.mw-parser-output table.ombox-speedy{background-color:#fee7e6;color:#333}.mw-parser-output table.ombox-speedy,.mw-parser-output table.ombox-delete{border-color:#b32424;border-width:2px}.mw-parser-output table.ombox-content{border-color:#f28500}.mw-parser-output table.ombox-style{border-color:#fc3}.mw-parser-output table.ombox-move{border-color:#9932cc}.mw-parser-output table.ombox-protection{border-color:#a2a9b1;border-width:2px}html body.mediawiki .mw-parser-output .ombox.mbox-small{clear:right;float:right;margin:4px 0 4px 1em;box-sizing:border-box;width:238px;font-size:88%;line-height:1.25em}@media screen{html.skin-theme-clientpref-night .mw-parser-output table.ombox{background-color:transparent;color:inherit}}@media screen and (prefers-color-scheme:dark){html.skin-theme-clientpref-os .mw-parser-output table.ombox{background-color:transparent;color:inherit}}</style><table class="ombox ombox-notice plainlinks" role="presentation"><tbody><tr><td class="mbox-image"><span typeof="mw:File"><span><img src="//upload.wikimedia.org/wikipedia/commons/thumb/f/f6/OOjs_UI_icon_check-constructive.svg/30px-OOjs_UI_icon_check-constructive.svg.png" decoding="async" width="30" height="30" class="mw-file-element" srcset="//upload.wikimedia.org/wikipedia/commons/thumb/f/f6/OOjs_UI_icon_check-constructive.svg/45px-OOjs_UI_icon_check-constructive.svg.png 1.5x, //upload.wikimedia.org/wikipedia/commons/thumb/f/f6/OOjs_UI_icon_check-constructive.svg/60px-OOjs_UI_icon_check-constructive.svg.png 2x" data-file-width="20" data-file-height="20" /></span></span></td><td class="mbox-text">This page documents a MediaWiki <a href="/wiki/Special:MyLanguage/Development_guidelines" title="Special:MyLanguage/Development guidelines">development guideline</a>, crafted over time by developer consensus (or sometimes by proclamation from a lead developer)</td></tr></tbody></table> <p>This page describes the <b>coding conventions</b> used within files of the <a href="/wiki/Special:MyLanguage/Manual:Code" title="Special:MyLanguage/Manual:Code">MediaWiki codebase</a> written in <b>SVG</b>. See also the <a href="/wiki/Special:MyLanguage/Manual:Coding_conventions#All_languages" title="Special:MyLanguage/Manual:Coding conventions">general conventions</a> which apply to all programming and markup languages, including SVG. </p><p>We make use of <a rel="nofollow" class="external text" href="https://github.com/svg/svgo">SVGO</a> as optimisation tool, see <a href="#Automated_optimisation_(SVGO)">automated optimisation</a> below. </p> <div style="clear: right; margin-bottom: .5em; float: right; margin-left:2em; width: auto;"><meta property="mw:PageProp/toc" /></div> <div class="mw-heading mw-heading2"><h2 id="Code_structure">Code structure </h2><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Manual:Coding_conventions/SVG&action=edit&section=1" title="Edit section: Code structure "><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <p>Minimal code as possible with readability in mind is the premise. </p><p>Example for simple optimised file – <a href="https://phabricator.wikimedia.org/diffusion/GOJU/browse/master/src/themes/wikimediaui/images/icons/subtract.svg" class="extiw" title="phab:diffusion/GOJU/browse/master/src/themes/wikimediaui/images/icons/subtract.svg">subtract.svg from OOUI</a>: </p> <div class="mw-highlight mw-highlight-lang-xml mw-content-ltr" dir="ltr"><pre><span></span><span class="cp"><?xml version="1.0" encoding="UTF-8"?></span> <span class="nt"><svg</span><span class="w"> </span><span class="na">xmlns=</span><span class="s">"http://www.w3.org/2000/svg"</span><span class="w"> </span><span class="na">width=</span><span class="s">"20"</span><span class="w"> </span><span class="na">height=</span><span class="s">"20"</span><span class="w"> </span><span class="na">viewBox=</span><span class="s">"0 0 20 20"</span><span class="nt">></span> <span class="w"> </span><span class="nt"><title></span> <span class="w"> </span>subtract <span class="w"> </span><span class="nt"></title></span> <span class="w"> </span><span class="nt"><path</span><span class="w"> </span><span class="na">d=</span><span class="s">"M4 9h12v2H4z"</span><span class="nt">/></span> <span class="nt"></svg></span> </pre></div> <p>For minimalists, <i>exactly the same</i> can be drawn with </p> <div class="mw-highlight mw-highlight-lang-xml mw-content-ltr" dir="ltr"><pre><span></span><span class="cp"><?xml version="1.0"?></span> <span class="nt"><svg</span><span class="w"> </span><span class="na">xmlns=</span><span class="s">"http://www.w3.org/2000/svg"</span><span class="w"> </span><span class="na">width=</span><span class="s">"20"</span><span class="w"> </span><span class="na">height=</span><span class="s">"20"</span><span class="nt">></span> <span class="w"> </span><span class="nt"><path</span><span class="w"> </span><span class="na">d=</span><span class="s">"m4,9h12v2H4"</span><span class="nt">/></span> <span class="nt"></svg></span> </pre></div> <p>Example for slightly more complex, optimised file – BetaFeatures screenshot template: </p> <div class="mw-highlight mw-highlight-lang-xml mw-content-ltr" dir="ltr"><pre><span></span><span class="cp"><?xml version="1.0" encoding="UTF-8"?></span> <span class="nt"><svg</span><span class="w"> </span><span class="na">xmlns=</span><span class="s">"http://www.w3.org/2000/svg"</span><span class="w"> </span><span class="na">width=</span><span class="s">"264"</span><span class="w"> </span><span class="na">height=</span><span class="s">"162"</span><span class="w"> </span><span class="na">viewBox=</span><span class="s">"0 0 264 162"</span><span class="nt">></span> <span class="w"> </span><span class="nt"><title></span> <span class="w"> </span>BetaFeatures<span class="w"> </span>screenshot<span class="w"> </span>template <span class="w"> </span><span class="nt"></title></span> <span class="w"> </span><span class="nt"><defs></span> <span class="w"> </span><span class="nt"><clipPath</span><span class="w"> </span><span class="na">id=</span><span class="s">"jagged-edge"</span><span class="nt">></span> <span class="w"> </span><span class="nt"><path</span><span class="w"> </span><span class="na">d=</span><span class="s">"M0 0v152l12 10 12-10 12 10 12-10 12 10 12-10 12 10 12-10 12 10 12-10 12 10 12-10 12 10 12-10 12 10 12-10 12 10 12-10 12 10 12-10 12 10 12-10V0z"</span><span class="nt">/></span> <span class="w"> </span><span class="nt"></clipPath></span> <span class="w"> </span><span class="nt"></defs></span> <span class="w"> </span><span class="nt"><g</span><span class="w"> </span><span class="na">fill=</span><span class="s">"#eaecf0"</span><span class="w"> </span><span class="na">clip-path=</span><span class="s">"url(#jagged-edge)"</span><span class="nt">></span> <span class="w"> </span><span class="nt"><path</span><span class="w"> </span><span class="na">id=</span><span class="s">"background"</span><span class="w"> </span><span class="na">fill=</span><span class="s">"#fff"</span><span class="w"> </span><span class="na">d=</span><span class="s">"M0 0h264v162H0"</span><span class="nt">/></span> <span class="w"> </span><span class="nt"><path</span><span class="w"> </span><span class="na">id=</span><span class="s">"logo"</span><span class="w"> </span><span class="na">d=</span><span class="s">"M11 22c0-8 6-14 14-14s14 6 14 14-6 14-14 14-14-6-14-14M38 45v-5H13v5h25"</span><span class="nt">/></span> <span class="w"> </span><span class="nt"><path</span><span class="w"> </span><span class="na">id=</span><span class="s">"sidebar"</span><span class="w"> </span><span class="na">d=</span><span class="s">"M38 163V58H13v106h25"</span><span class="nt">/></span> <span class="w"> </span><span class="nt"><path</span><span class="w"> </span><span class="na">id=</span><span class="s">"personal-tools"</span><span class="w"> </span><span class="na">d=</span><span class="s">"M233 5h26v6h-26V5zM209 5h22v6h-22zM185 5h22v6h-22zM162 5h13v6h-13zM177 5h6v6h-6zM154 5h6v6h-6z"</span><span class="nt">/></span> <span class="w"> </span><span class="nt"><path</span><span class="w"> </span><span class="na">id=</span><span class="s">"search-input"</span><span class="w"> </span><span class="na">d=</span><span class="s">"M258 16v4h-92v-4h92m1-1h-94v6h94v-6z"</span><span class="nt">/></span> <span class="w"> </span><span class="nt"><path</span><span class="w"> </span><span class="na">id=</span><span class="s">"search-icon"</span><span class="w"> </span><span class="na">d=</span><span class="s">"M168 17h2v2h-2z"</span><span class="nt">/></span> <span class="w"> </span><span class="nt"><path</span><span class="w"> </span><span class="na">id=</span><span class="s">"article"</span><span class="w"> </span><span class="na">d=</span><span class="s">"M252 162V29H48v133z"</span><span class="nt">/></span> <span class="w"> </span><span class="nt"><path</span><span class="w"> </span><span class="na">id=</span><span class="s">"border"</span><span class="w"> </span><span class="na">d=</span><span class="s">"M0 0v162h264V0zm1 1h262v150.533l-11 9.166-12-10-12 10-12-10-12 10-12-10-12 10-12-10-12 10-12-10-12 10-12-10-12 10-12-10-12 10-12-10-12 10-12-10-12 10-12-10-12 10-11-9z"</span><span class="nt">/></span> <span class="w"> </span><span class="nt"></g></span> <span class="nt"></svg></span> </pre></div> <p>We will explain the different coding conventions in the following section. </p> <div class="mw-heading mw-heading2"><h2 id="Automated_optimisation_(SVGO)"><span id="Automated_optimisation_.28SVGO.29"></span>Automated optimisation (SVGO)</h2><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Manual:Coding_conventions/SVG&action=edit&section=2" title="Edit section: Automated optimisation (SVGO)"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <p>SVGO was maintained by Kir Belevich (deepsweet<sup id="cite_ref-1" class="reference"><a href="#cite_note-1"><span class="cite-bracket">[</span>1<span class="cite-bracket">]</span></a></sup>) and Lev Solntsev (GreLI<sup id="cite_ref-2" class="reference"><a href="#cite_note-2"><span class="cite-bracket">[</span>2<span class="cite-bracket">]</span></a></sup>) from August 2012<sup id="cite_ref-3" class="reference"><a href="#cite_note-3"><span class="cite-bracket">[</span>3<span class="cite-bracket">]</span></a></sup> to 2016<sup id="cite_ref-4" class="reference"><a href="#cite_note-4"><span class="cite-bracket">[</span>4<span class="cite-bracket">]</span></a></sup><sup id="cite_ref-5" class="reference"><a href="#cite_note-5"><span class="cite-bracket">[</span>5<span class="cite-bracket">]</span></a></sup> and since 2021 by Bogdan Chadkin (TrySound<sup id="cite_ref-6" class="reference"><a href="#cite_note-6"><span class="cite-bracket">[</span>6<span class="cite-bracket">]</span></a></sup>). </p> <div class="mw-heading mw-heading3"><h3 id="How_to_use">How to use</h3><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Manual:Coding_conventions/SVG&action=edit&section=3" title="Edit section: How to use"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <p>Is it recommended to install <code>svgo</code> from <a rel="nofollow" class="external free" href="https://github.com/svg/svgo">https://github.com/svg/svgo</a> or from <code>npm</code> for the command line. There is also an in-browser demo to help with preview and general understanding of the tool at <a rel="nofollow" class="external free" href="https://jakearchibald.github.io/svgomg/">https://jakearchibald.github.io/svgomg/</a>. This should not be used to create production files however. </p> <div class="mw-heading mw-heading3"><h3 id="Safe_plugins:">Safe plugins:</h3><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Manual:Coding_conventions/SVG&action=edit&section=4" title="Edit section: Safe plugins:"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <p>As some SVGO default plugins (options) might result in unexpected appearance with more complex SVGs, we differentiate between safe, considerably less-safe and unsafe plugins. Set the "transformPrecision" at least to 7 to reduce the rist of breaking files.<sup id="cite_ref-7" class="reference"><a href="#cite_note-7"><span class="cite-bracket">[</span>7<span class="cite-bracket">]</span></a></sup> When using unsafe plugins it's recommended to verify before and after diffing per file to ensure visual quality. </p><p>Mentioning only plugins, that are changed from default setting or that might be counter-intuitive: </p> <ul><li>Sorting attributes <code>sortAttrs</code>.<br />Enable by setting to <code class="mw-highlight mw-highlight-lang-php mw-content-ltr" style="" dir="ltr"><span class="k">true</span></code>; disabled by default</li> <li>Remove or cleanup <code>enable-background</code> attribute when possible <code>cleanupEnableBackground</code>.<br />Deprecated attribute, only supported by IE/Edge; enabled by default</li></ul> <p>See <a rel="nofollow" class="external text" href="https://github.com/svg/svgo">SVGO Readme for other enabled, safe plugins</a>. </p><p><b>Plugins to consider carefully:</b>  </p> <table class="wikitable"> <tbody><tr> <td><code>cleanupIDs</code> </td> <td>Remove unused and minify used IDs<br />Might negatively affect readability<sup id="cite_ref-8" class="reference"><a href="#cite_note-8"><span class="cite-bracket">[</span>8<span class="cite-bracket">]</span></a></sup> and breaks some files<sup id="cite_ref-9" class="reference"><a href="#cite_note-9"><span class="cite-bracket">[</span>9<span class="cite-bracket">]</span></a></sup>; enabled by default </td></tr> <tr> <td><code>removeRasterImages</code> </td> <td>As general rule dangerous, could cause data loss, some raster-images are difficult to spot<sup id="cite_ref-10" class="reference"><a href="#cite_note-10"><span class="cite-bracket">[</span>10<span class="cite-bracket">]</span></a></sup>; disabled by default </td></tr> <tr> <td><code>inlineStyles</code> </td> <td>Some users prefer to use CSS than inlineStyles, can reduce editability<sup id="cite_ref-11" class="reference"><a href="#cite_note-11"><span class="cite-bracket">[</span>11<span class="cite-bracket">]</span></a></sup> </td></tr> <tr> <td><code>removeDoctype</code> </td> <td>For SVG 1.1 there is not reason to remove it, however for the upcommong SVG2-draft it will be deapreciated<sup id="cite_ref-12" class="reference"><a href="#cite_note-12"><span class="cite-bracket">[</span>12<span class="cite-bracket">]</span></a></sup> </td></tr></tbody></table> <p><b>Unsafe rules to disable (don't use!):</b> </p> <table class="wikitable"> <tbody><tr> <td><code>convertPathData</code> </td> <td>Might cause (i) imprecise rendering, (ii) wrong rendering by librsvg<sup id="cite_ref-13" class="reference"><a href="#cite_note-13"><span class="cite-bracket">[</span>13<span class="cite-bracket">]</span></a></sup>, (iii) breaking files<sup id="cite_ref-14" class="reference"><a href="#cite_note-14"><span class="cite-bracket">[</span>14<span class="cite-bracket">]</span></a></sup><sup id="cite_ref-15" class="reference"><a href="#cite_note-15"><span class="cite-bracket">[</span>15<span class="cite-bracket">]</span></a></sup><sup id="cite_ref-16" class="reference"><a href="#cite_note-16"><span class="cite-bracket">[</span>16<span class="cite-bracket">]</span></a></sup>; enabled by default </td></tr> <tr> <td><code>cleanupListOfValues</code> </td> <td>Round/rewrite number lists breaks Wikimedia-renderin<sup id="cite_ref-17" class="reference"><a href="#cite_note-17"><span class="cite-bracket">[</span>17<span class="cite-bracket">]</span></a></sup> </td></tr> <tr> <td><code>convertShapeToPath</code> </td> <td>can reduce readability<sup id="cite_ref-notConvert_18-0" class="reference"><a href="#cite_note-notConvert-18"><span class="cite-bracket">[</span>18<span class="cite-bracket">]</span></a></sup> and breaks files<sup id="cite_ref-19" class="reference"><a href="#cite_note-19"><span class="cite-bracket">[</span>19<span class="cite-bracket">]</span></a></sup> </td></tr> <tr> <td><code>removeXMLProcInst</code> </td> <td>Remove XML processing instructions, aka XML declaration<sup id="cite_ref-20" class="reference"><a href="#cite_note-20"><span class="cite-bracket">[</span>20<span class="cite-bracket">]</span></a></sup><sup id="cite_ref-21" class="reference"><a href="#cite_note-21"><span class="cite-bracket">[</span>21<span class="cite-bracket">]</span></a></sup> <code class="mw-highlight mw-highlight-lang-xml mw-content-ltr" dir="ltr"><span class="cp"><?xml version="1.0" encoding="UTF-8"?></span></code> <br />Issues when viewed as standalone file in some editors, also possible issues with MIME type interpretation<br />Example: If the SVG doesn't start with an XML declaration, then its MIME type will be detected as <code>text/plain</code> rather than <code>image/svg+xml</code> by libmagic and consequently, MediaWiki's CSSMin CSS minifier. libmagic's default database currently requires that <a rel="nofollow" class="external text" href="https://github.com/threatstack/libmagic/blob/master/magic/Magdir/sgml#L5">SVGs contain an XML declaration</a>; disable by setting to <code class="mw-highlight mw-highlight-lang-php mw-content-ltr" style="" dir="ltr"><span class="k">false</span></code>; enabled by default </td></tr> <tr> <td><code>removeTitle</code> </td> <td>Remove <code class="mw-highlight" style="white-space:nowrap"><span class="p">‎<</span><span class="nt">title</span><span class="p">></span></code> <br />Problematic for accessibility reasons<sup id="cite_ref-22" class="reference"><a href="#cite_note-22"><span class="cite-bracket">[</span>22<span class="cite-bracket">]</span></a></sup>; set to <code class="mw-highlight mw-highlight-lang-php mw-content-ltr" style="" dir="ltr"><span class="k">false</span></code>; enabled by default </td></tr> <tr> <td><code>removeDesc</code> </td> <td>Remove <code class="mw-highlight" style="white-space:nowrap"><span class="p">‎<</span><span class="nt">desc</span><span class="p">></span></code><br />Problematic for accessibility reasons; set to <code class="mw-highlight mw-highlight-lang-php mw-content-ltr" style="" dir="ltr"><span class="k">false</span></code>; enabled by default </td></tr> <tr> <td><code>removeViewBox</code> </td> <td>Remove <code>viewBox</code> attribute<br />Results in troublesome appearance in some browsers, therefore both, <code>width</code>/<code>height</code> and <code>viewbox</code> should be featured; set to <code class="mw-highlight mw-highlight-lang-php mw-content-ltr" style="" dir="ltr"><span class="k">false</span></code>; enabled by default </td></tr> <tr> <td><code>removeDimensions</code> </td> <td>Remove dimensions <code>width</code>/<code>height</code> when <code>viewbox</code> is available<br />As above; set to <code class="mw-highlight mw-highlight-lang-php mw-content-ltr" style="" dir="ltr"><span class="k">false</span></code>; disabled by default </td></tr> <tr> <td><code>removeMetadata</code> </td> <td>Possible Copyright-Information<sup id="cite_ref-invalidkept_23-0" class="reference"><a href="#cite_note-invalidkept-23"><span class="cite-bracket">[</span>23<span class="cite-bracket">]</span></a></sup> </td></tr> <tr> <td><code>removeHiddenElems</code> </td> <td>Possible reference lines, editor data, real text before convertion, Copyright-informations<sup id="cite_ref-invalidkept_23-1" class="reference"><a href="#cite_note-invalidkept-23"><span class="cite-bracket">[</span>23<span class="cite-bracket">]</span></a></sup> </td></tr> <tr> <td><code>removeUnknownsAndDefaults</code> </td> <td>removes <a href="https://commons.wikimedia.org/wiki/User:JoKalliauer/RepairFlowRoot" class="extiw" title="c:User:JoKalliauer/RepairFlowRoot">Flow-Text</a> <sup id="cite_ref-24" class="reference"><a href="#cite_note-24"><span class="cite-bracket">[</span>24<span class="cite-bracket">]</span></a></sup> </td></tr> <tr> <td><code>cleanupNumericValues</code> </td> <td>breaks some files <sup id="cite_ref-25" class="reference"><a href="#cite_note-25"><span class="cite-bracket">[</span>25<span class="cite-bracket">]</span></a></sup> </td></tr> <tr> <td><code>minifyStyles</code> </td> <td>breaks some files<sup id="cite_ref-26" class="reference"><a href="#cite_note-26"><span class="cite-bracket">[</span>26<span class="cite-bracket">]</span></a></sup> </td></tr> <tr> <td><code>removeComments</code> </td> <td>reduces readability and possible removes reference lines, editor data, real text before convertion, Copyright-informations<sup id="cite_ref-27" class="reference"><a href="#cite_note-27"><span class="cite-bracket">[</span>27<span class="cite-bracket">]</span></a></sup> </td></tr> <tr> <td><code>removeEditorsNSData</code> </td> <td>reduces editability with GUI-SVG-Editors<sup id="cite_ref-28" class="reference"><a href="#cite_note-28"><span class="cite-bracket">[</span>28<span class="cite-bracket">]</span></a></sup> </td></tr> <tr> <td><code>collapseGroups</code> </td> <td>reduced readability and editability <sup id="cite_ref-29" class="reference"><a href="#cite_note-29"><span class="cite-bracket">[</span>29<span class="cite-bracket">]</span></a></sup> and breaks some files<sup id="cite_ref-30" class="reference"><a href="#cite_note-30"><span class="cite-bracket">[</span>30<span class="cite-bracket">]</span></a></sup> </td></tr> <tr> <td><code>removeStyleElement</code> </td> <td>breaks some files<sup id="cite_ref-31" class="reference"><a href="#cite_note-31"><span class="cite-bracket">[</span>31<span class="cite-bracket">]</span></a></sup> </td></tr> <tr> <td><code>removeOffCanvasPaths</code> </td> <td>breaks some files<sup id="cite_ref-32" class="reference"><a href="#cite_note-32"><span class="cite-bracket">[</span>32<span class="cite-bracket">]</span></a></sup> </td></tr> <tr> <td><code>removeEmptyContainers</code> </td> <td>breaks some files<sup id="cite_ref-33" class="reference"><a href="#cite_note-33"><span class="cite-bracket">[</span>33<span class="cite-bracket">]</span></a></sup><sup id="cite_ref-34" class="reference"><a href="#cite_note-34"><span class="cite-bracket">[</span>34<span class="cite-bracket">]</span></a></sup> </td></tr> <tr> <td><code>removeElementsByAttr</code> </td> <td>breaks some files<sup id="cite_ref-35" class="reference"><a href="#cite_note-35"><span class="cite-bracket">[</span>35<span class="cite-bracket">]</span></a></sup> </td></tr> <tr> <td><code>convertStyleToAttrs</code> </td> <td>breaks some files<sup id="cite_ref-36" class="reference"><a href="#cite_note-36"><span class="cite-bracket">[</span>36<span class="cite-bracket">]</span></a></sup> </td></tr> <tr> <td><code>convertTransform</code> </td> <td>breaks some files<sup id="cite_ref-37" class="reference"><a href="#cite_note-37"><span class="cite-bracket">[</span>37<span class="cite-bracket">]</span></a></sup><sup id="cite_ref-38" class="reference"><a href="#cite_note-38"><span class="cite-bracket">[</span>38<span class="cite-bracket">]</span></a></sup><sup id="cite_ref-39" class="reference"><a href="#cite_note-39"><span class="cite-bracket">[</span>39<span class="cite-bracket">]</span></a></sup><sup id="cite_ref-40" class="reference"><a href="#cite_note-40"><span class="cite-bracket">[</span>40<span class="cite-bracket">]</span></a></sup> </td></tr> <tr> <td><code>cleanupNumericValues</code> </td> <td>breaks some files <sup id="cite_ref-41" class="reference"><a href="#cite_note-41"><span class="cite-bracket">[</span>41<span class="cite-bracket">]</span></a></sup> </td></tr> <tr> <td><code>inlineStyles</code> </td> <td>breaks some CSS-features<sup id="cite_ref-42" class="reference"><a href="#cite_note-42"><span class="cite-bracket">[</span>42<span class="cite-bracket">]</span></a></sup> </td></tr> <tr> <td><code>reusePaths</code> </td> <td>breaks some files <sup id="cite_ref-43" class="reference"><a href="#cite_note-43"><span class="cite-bracket">[</span>43<span class="cite-bracket">]</span></a></sup> </td></tr></tbody></table> <p><br /> </p> <div class="mw-heading mw-heading3"><h3 id="Exemplified_safe_configuration">Exemplified safe configuration</h3><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Manual:Coding_conventions/SVG&action=edit&section=5" title="Edit section: Exemplified safe configuration"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <p>Note that this is for SVGO v1.x; v2.x takes different CLI arguments: </p><p><code>$ svgo path/to/image.svg --disable={cleanupIDs,convertPathData,removeDesc,removeTitle,removeViewBox,removeXMLProcInst} --enable='sortAttrs' --pretty --final-newline</code> </p><p>Use <code>pretty</code> output for human readable code and in the process indent code by tabs. </p> <div class="mw-heading mw-heading3"><h3 id="Exemplified_safe_configuration_(.svgo.config.js)"><span id="Exemplified_safe_configuration_.28.svgo.config.js.29"></span>Exemplified safe configuration (.svgo.config.js)</h3><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Manual:Coding_conventions/SVG&action=edit&section=6" title="Edit section: Exemplified safe configuration (.svgo.config.js)"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <p><b>June 2023</b> - SVGO v3.0.0+ compatibility, amending to new <code>cleanupIds</code> plugin name. (<a href="https://phabricator.wikimedia.org/T324899" class="extiw" title="phab:T324899">phab:T324899</a>) </p><p><b>January 2022</b> - NPM run scripts enabled SVGO configuration. (<a href="https://phabricator.wikimedia.org/T246321" class="extiw" title="phab:T246321">phab:T246321</a>) </p> <div class="mw-highlight mw-highlight-lang-js mw-content-ltr" dir="ltr"><pre><span></span><span class="cm">/**</span> <span class="cm"> * SVGO Configuration</span> <span class="cm"> * Compatible to v3.0.0+</span> <span class="cm"> * Recommended options from:</span> <span class="cm"> * https://www.mediawiki.org/wiki/Manual:Coding_conventions/SVG#Exemplified_safe_configuration</span> <span class="cm"> */</span> <span class="s1">'use strict'</span><span class="p">;</span> <span class="nx">module</span><span class="p">.</span><span class="nx">exports</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">{</span> <span class="w"> </span><span class="nx">plugins</span><span class="o">:</span><span class="w"> </span><span class="p">[</span> <span class="w"> </span><span class="p">{</span> <span class="w"> </span><span class="c1">// Set of built-in plugins enabled by default.</span> <span class="w"> </span><span class="nx">name</span><span class="o">:</span><span class="w"> </span><span class="s1">'preset-default'</span><span class="p">,</span> <span class="w"> </span><span class="nx">params</span><span class="o">:</span><span class="w"> </span><span class="p">{</span> <span class="w"> </span><span class="nx">overrides</span><span class="o">:</span><span class="w"> </span><span class="p">{</span> <span class="w"> </span><span class="nx">cleanupIds</span><span class="o">:</span><span class="w"> </span><span class="kc">false</span><span class="p">,</span> <span class="w"> </span><span class="nx">removeDesc</span><span class="o">:</span><span class="w"> </span><span class="kc">false</span><span class="p">,</span> <span class="w"> </span><span class="nx">removeTitle</span><span class="o">:</span><span class="w"> </span><span class="kc">false</span><span class="p">,</span> <span class="w"> </span><span class="nx">removeViewBox</span><span class="o">:</span><span class="w"> </span><span class="kc">false</span><span class="p">,</span> <span class="w"> </span><span class="c1">// If the SVG doesn't start with an XML declaration, then its MIME type will be detected as "text/plain" rather than "image/svg+xml" by libmagic and, consequently, MediaWiki's CSSMin CSS minifier.</span> <span class="w"> </span><span class="c1">// libmagic's default database currently requires that SVGs contain an XML declaration:</span> <span class="w"> </span><span class="c1">// https://github.com/threatstack/libmagic/blob/master/magic/Magdir/sgml#L5</span> <span class="w"> </span><span class="nx">removeXMLProcInst</span><span class="o">:</span><span class="w"> </span><span class="kc">false</span><span class="w"> </span><span class="c1">// https://phabricator.wikimedia.org/T327446</span> <span class="w"> </span><span class="nx">convertPathData</span><span class="o">:</span><span class="w"> </span><span class="kc">false</span><span class="w"> </span><span class="c1">// https://github.com/svg/svgo/issues/880 https://github.com/svg/svgo/issues/1487</span> <span class="w"> </span><span class="nx">removeMetadata</span><span class="o">:</span><span class="w"> </span><span class="kc">false</span><span class="w"> </span><span class="c1">// Copyright-Violation</span> <span class="w"> </span><span class="nx">removeHiddenElems</span><span class="o">:</span><span class="w"> </span><span class="kc">false</span><span class="w"> </span><span class="c1">// source for converted text2path</span> <span class="w"> </span><span class="nx">removeUnknownsAndDefaults</span><span class="o">:</span><span class="w"> </span><span class="kc">false</span><span class="w"> </span><span class="c1">// removes Flow-Text: https://commons.wikimedia.org/wiki/User:JoKalliauer/RepairFlowRoot</span> <span class="w"> </span><span class="nx">cleanupNumericValues</span><span class="o">:</span><span class="w"> </span><span class="kc">false</span><span class="w"> </span><span class="c1">// https://github.com/svg/svgo/issues/1080</span> <span class="w"> </span><span class="nx">minifyStyles</span><span class="o">:</span><span class="w"> </span><span class="kc">false</span><span class="w"> </span><span class="c1">//https://github.com/svg/svgo/issues/888</span> <span class="w"> </span><span class="nx">removeComments</span><span class="o">:</span><span class="w"> </span><span class="kc">false</span><span class="w"> </span><span class="c1">//reduces readability</span> <span class="w"> </span><span class="nx">removeEditorsNSData</span><span class="o">:</span><span class="w"> </span><span class="kc">false</span><span class="w"> </span><span class="c1">// https://github.com/svg/svgo/issues/1096</span> <span class="w"> </span><span class="nx">collapseGroups</span><span class="o">:</span><span class="w"> </span><span class="kc">false</span><span class="w"> </span><span class="c1">// https://github.com/svg/svgo/issues/1057</span> <span class="w"> </span><span class="nx">removeOffCanvasPaths</span><span class="o">:</span><span class="w"> </span><span class="kc">false</span><span class="w"> </span><span class="c1">//https://github.com/svg/svgo/issues/1732</span> <span class="w"> </span><span class="nx">removeEmptyContainers</span><span class="o">:</span><span class="w"> </span><span class="kc">false</span><span class="w"> </span><span class="c1">// https://github.com/svg/svgo/issues/1194 https://github.com/svg/svgo/issues/1618</span> <span class="w"> </span><span class="nx">convertTransform</span><span class="o">:</span><span class="w"> </span><span class="nx">fasle</span><span class="w"> </span><span class="c1">// https://github.com/svg/svgo/issues/988 https://github.com/svg/svgo/issues/1021</span> <span class="w"> </span><span class="nx">cleanupNumericValues</span><span class="o">:</span><span class="w"> </span><span class="kc">false</span><span class="w"> </span><span class="c1">// https://github.com/svg/svgo/issues/1080</span> <span class="w"> </span><span class="nx">inlineStyles</span><span class="o">:</span><span class="w"> </span><span class="kc">false</span><span class="w"> </span><span class="c1">// https://github.com/svg/svgo/issues/1486</span> <span class="w"> </span><span class="p">}</span> <span class="w"> </span><span class="p">}</span> <span class="w"> </span><span class="p">},</span> <span class="w"> </span><span class="s1">'removeRasterImages'</span><span class="p">,</span> <span class="w"> </span><span class="s1">'sortAttrs'</span> <span class="w"> </span><span class="p">],</span> <span class="w"> </span><span class="c1">// Set whitespace according to Wikimedia Coding Conventions.</span> <span class="w"> </span><span class="c1">// @see https://github.com/svg/svgo/blob/main/lib/stringifier.js#L39 for available options.</span> <span class="w"> </span><span class="nx">js2svg</span><span class="o">:</span><span class="w"> </span><span class="p">{</span> <span class="w"> </span><span class="nx">eol</span><span class="o">:</span><span class="w"> </span><span class="s1">'lf'</span><span class="p">,</span> <span class="w"> </span><span class="nx">finalNewline</span><span class="o">:</span><span class="w"> </span><span class="kc">true</span><span class="p">,</span> <span class="w"> </span><span class="c1">// Configure the indent to tabs (default 4 spaces) used by '--pretty' here.</span> <span class="w"> </span><span class="nx">indent</span><span class="o">:</span><span class="w"> </span><span class="s2">"\t"</span><span class="p">,</span> <span class="w"> </span><span class="nx">pretty</span><span class="o">:</span><span class="w"> </span><span class="kc">true</span> <span class="w"> </span><span class="p">},</span> <span class="w"> </span><span class="nx">multipass</span><span class="o">:</span><span class="w"> </span><span class="kc">true</span> <span class="p">}</span> </pre></div> <div class="mw-heading mw-heading3"><h3 id="Exemplified_safe_configuration_(Gruntfile.js)"><span id="Exemplified_safe_configuration_.28Gruntfile.js.29"></span>Exemplified safe configuration (Gruntfile.js)</h3><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Manual:Coding_conventions/SVG&action=edit&section=7" title="Edit section: Exemplified safe configuration (Gruntfile.js)"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <pre lang="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 } ] } } </pre> <div class="mw-heading mw-heading2"><h2 id="Manual_optimisation">Manual optimisation</h2><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Manual:Coding_conventions/SVG&action=edit&section=8" title="Edit section: Manual optimisation"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <p>Beyond automated optimising SVGs there are further steps to consider: </p> <ul><li>retain the following code <code>xml:space="preserve"</code>, <code>   </div><noscript><img src="https://login.wikimedia.org/wiki/Special:CentralAutoLogin/start?type=1x1" alt="" width="1" height="1" style="border: none; position: absolute;"></noscript> <div class="printfooter" data-nosnippet="">Retrieved from "<a dir="ltr" href="https://www.mediawiki.org/w/index.php?title=Manual:Coding_conventions/SVG&oldid=6806061">https://www.mediawiki.org/w/index.php?title=Manual:Coding_conventions/SVG&oldid=6806061</a>"</div></div> <div id="catlinks" class="catlinks" data-mw="interface"><div id="mw-normal-catlinks" class="mw-normal-catlinks"><a href="/wiki/Special:Categories" title="Special:Categories">Categories</a>: <ul><li><a href="/wiki/Category:Development_guidelines" title="Category:Development guidelines">Development guidelines</a></li><li><a href="/wiki/Category:SVG" title="Category:SVG">SVG</a></li></ul></div></div> </div> </main> </div> <div class="mw-footer-container"> <footer id="footer" class="mw-footer" > <ul id="footer-info"> <li id="footer-info-lastmod"> This page was last edited on 21 October 2024, at 18:54.</li> <li id="footer-info-copyright">Text is available under the <a rel="nofollow" class="external text" href="https://creativecommons.org/licenses/by-sa/4.0/deed.en">Creative Commons Attribution-ShareAlike License</a>; additional terms may apply. Text in <a class="external text" href="https://www.mediawiki.org/wiki/Special:MyLanguage/Help:Contents">the Help: namespace</a> is available under the <a rel="nofollow" class="external text" href="https://creativecommons.org/publicdomain/zero/1.0/">Creative Commons CC0 License</a>. By using this site, you agree to the <a class="external text" href="https://foundation.wikimedia.org/wiki/Special:MyLanguage/Policy:Terms_of_Use">Terms of Use</a> and <a class="external text" href="https://foundation.wikimedia.org/wiki/Special:MyLanguage/Policy:Privacy_policy">Privacy Policy</a>.</li> </ul> <ul id="footer-places"> <li id="footer-places-privacy"><a href="https://foundation.wikimedia.org/wiki/Special:MyLanguage/Policy:Privacy_policy">Privacy policy</a></li> <li id="footer-places-about"><a href="/wiki/Project:About">About mediawiki.org</a></li> <li id="footer-places-disclaimers"><a href="/wiki/Project:General_disclaimer">Disclaimers</a></li> <li id="footer-places-wm-codeofconduct"><a href="https://www.mediawiki.org/wiki/Special:MyLanguage/Code_of_Conduct">Code of Conduct</a></li> <li id="footer-places-developers"><a href="https://developer.wikimedia.org">Developers</a></li> <li id="footer-places-statslink"><a href="https://stats.wikimedia.org/#/www.mediawiki.org">Statistics</a></li> <li id="footer-places-cookiestatement"><a href="https://foundation.wikimedia.org/wiki/Special:MyLanguage/Policy:Cookie_statement">Cookie statement</a></li> <li id="footer-places-mobileview"><a href="//m.mediawiki.org/w/index.php?title=Manual:Coding_conventions/SVG&mobileaction=toggle_view_mobile" class="noprint stopMobileRedirectToggle">Mobile view</a></li> </ul> <ul id="footer-icons" class="noprint"> <li id="footer-copyrightico"><a href="https://wikimediafoundation.org/" class="cdx-button cdx-button--fake-button cdx-button--size-large cdx-button--fake-button--enabled"><img src="/static/images/footer/wikimedia-button.svg" width="84" height="29" alt="Wikimedia Foundation" loading="lazy"></a></li> <li id="footer-poweredbyico"><a href="https://www.mediawiki.org/" class="cdx-button cdx-button--fake-button cdx-button--size-large cdx-button--fake-button--enabled"><img src="/w/resources/assets/poweredby_mediawiki.svg" alt="Powered by MediaWiki" width="88" height="31" loading="lazy"></a></li> </ul> </footer> </div> </div> </div> <div class="vector-settings" id="p-dock-bottom"> <ul></ul> </div><script>(RLQ=window.RLQ||[]).push(function(){mw.config.set({"wgHostname":"mw-web.codfw.main-f69cdc8f6-2c6ql","wgBackendResponseTime":116,"wgPageParseReport":{"limitreport":{"cputime":"0.586","walltime":"0.764","ppvisitednodes":{"value":4515,"limit":1000000},"postexpandincludesize":{"value":54398,"limit":2097152},"templateargumentsize":{"value":9817,"limit":2097152},"expansiondepth":{"value":16,"limit":100},"expensivefunctioncount":{"value":52,"limit":500},"unstrip-depth":{"value":0,"limit":20},"unstrip-size":{"value":46711,"limit":5000000},"entityaccesscount":{"value":0,"limit":400},"timingprofile":["100.00% 489.299 1 -total"," 58.60% 286.726 1 Template:Conventions_navigation"," 56.96% 278.703 1 Template:Navbox"," 39.84% 194.941 36 Template:Ll"," 15.04% 73.606 72 Template:Translatable"," 14.22% 69.584 38 Template:Pagelang"," 13.33% 65.237 1 Template:Development_guideline"," 12.29% 60.156 1 Template:Mbox"," 6.80% 33.291 13 Template:TNTN"," 5.18% 25.339 2 Template:Ym"]},"scribunto":{"limitreport-timeusage":{"value":"0.168","limit":"10.000"},"limitreport-memusage":{"value":1955097,"limit":52428800}},"cachereport":{"origin":"mw-web.eqiad.main-668977ddd9-rh6d5","timestamp":"20241120231113","ttl":2592000,"transientcontent":false}}});});</script> </body> </html>