CINXE.COM

<!DOCTYPE html> <html class="client-nojs vector-feature-language-in-header-enabled 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-1 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>SVG image support - Meta</title> <script>(function(){var className="client-js vector-feature-language-in-header-enabled 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-1 vector-feature-appearance-pinned-clientpref-1 vector-feature-night-mode-disabled skin-theme-clientpref-day vector-toc-available";var cookie=document.cookie.match(/(?:^|; )metawikimwclientpreferences=([^;]+)/);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":"6a29fd6c-e3c8-4c94-ab26-e1e40e99b5dc","wgCanonicalNamespace":"","wgCanonicalSpecialPageName":false,"wgNamespaceNumber":0,"wgPageName":"SVG_image_support","wgTitle":"SVG image support","wgCurRevisionId":27806740,"wgRevisionId":27806740,"wgArticleId":916,"wgIsArticle":true,"wgIsRedirect":false,"wgAction":"view","wgUserName":null,"wgUserGroups":["*"],"wgCategories":["MediaWiki archives","SVG"],"wgPageViewLanguage":"en","wgPageContentLanguage":"en","wgPageContentModel":"wikitext","wgRelevantPageName":"SVG_image_support","wgRelevantArticleId":916,"wgIsProbablyEditable":true,"wgRelevantPageIsProbablyEditable":true,"wgRestrictionEdit":[],"wgRestrictionMove":[],"wgNoticeProject":"meta","wgCiteReferencePreviewsActive":false,"wgMediaViewerOnClick":true,"wgMediaViewerEnabledByDefault":true,"wgVisualEditor":{"pageLanguageCode":"en","pageLanguageDir" :"ltr","pageVariantFallbacks":"en"},"wgMFDisplayWikibaseDescriptions":{"search":true,"watchlist":true,"tagline":false,"nearby":true},"wgWMESchemaEditAttemptStepOversample":false,"wgWMEPageLength":20000,"wgCentralAuthMobileDomain":false,"wgEditSubmitButtonLabelPublish":true,"wgDiscussionToolsFeaturesEnabled":{"replytool":true,"newtopictool":true,"sourcemodetoolbar":true,"topicsubscription":false,"autotopicsub":false,"visualenhancements":false,"visualenhancements_reply":false,"visualenhancements_pageframe":false},"wgDiscussionToolsFallbackEditMode":"source","wgULSPosition":"personal","wgULSisCompactLinksEnabled":false,"wgVector2022LanguageInHeader":true,"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.pygments":"ready","ext.discussionTools.init.styles":"ready","oojs-ui-core.styles":"ready","oojs-ui.styles.indicators":"ready","mediawiki.widgets.styles":"ready","oojs-ui-core.icons":"ready","skins.vector.search.codex.styles":"ready","skins.vector.styles":"ready","skins.vector.icons":"ready","ext.wikimediamessages.styles":"ready","ext.visualEditor.desktopArticleTarget.noscript":"ready","ext.uls.pt":"ready","wikibase.client.init":"ready","ext.wikimediaBadges":"ready"};RLPAGEMODULES=["ext.pygments.view","site","mediawiki.page.ready","mediawiki.toc","skins.vector.js","ext.centralNotice.geoIP","ext.centralNotice.startUp","ext.gadget.AddTopic","ext.gadget.formWizard","ext.gadget.ReferenceTooltips","ext.gadget.WishlistTranslation","ext.urlShortener.toolbar","ext.centralauth.centralautologin","mmv.bootstrap","ext.visualEditor.desktopArticleTarget.init","ext.visualEditor.targetLoader","ext.echo.centralauth","ext.discussionTools.init","ext.eventLogging","ext.wikimediaEvents", "ext.navigationTiming","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.discussionTools.init.styles%7Cext.pygments%2CwikimediaBadges%7Cext.uls.pt%7Cext.visualEditor.desktopArticleTarget.noscript%7Cext.wikimediamessages.styles%7Cmediawiki.widgets.styles%7Coojs-ui-core.icons%2Cstyles%7Coojs-ui.styles.indicators%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 property="og:image" content="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b2/Flago_de_Esperanto.svg/1200px-Flago_de_Esperanto.svg.png"> <meta property="og:image:width" content="1200"> <meta property="og:image:height" content="801"> <meta property="og:image" content="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b2/Flago_de_Esperanto.svg/800px-Flago_de_Esperanto.svg.png"> <meta property="og:image:width" content="800"> <meta property="og:image:height" content="534"> <meta property="og:image" content="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b2/Flago_de_Esperanto.svg/640px-Flago_de_Esperanto.svg.png"> <meta property="og:image:width" content="640"> <meta property="og:image:height" content="427"> <meta name="viewport" content="width=1120"> <meta property="og:title" content="SVG image support - Meta"> <meta property="og:type" content="website"> <link rel="preconnect" href="//upload.wikimedia.org"> <link rel="alternate" media="only screen and (max-width: 640px)" href="//meta.m.wikimedia.org/wiki/SVG_image_support"> <link rel="alternate" type="application/x-wiki" title="Edit" href="/w/index.php?title=SVG_image_support&action=edit"> <link rel="icon" href="/static/favicon/community.ico"> <link rel="search" type="application/opensearchdescription+xml" href="/w/rest.php/v1/search" title="Meta (en)"> <link rel="EditURI" type="application/rsd+xml" href="//meta.wikimedia.org/w/api.php?action=rsd"> <link rel="canonical" href="https://meta.wikimedia.org/wiki/SVG_image_support"> <link rel="license" href="https://creativecommons.org/licenses/by-sa/4.0/"> <link rel="alternate" type="application/atom+xml" title="Meta Atom feed" href="/w/index.php?title=Special:RecentChanges&feed=atom"> <link rel="dns-prefetch" href="//login.wikimedia.org"> </head> <body class="ext-discussiontools-replytool-enabled ext-discussiontools-newtopictool-enabled ext-discussiontools-sourcemodetoolbar-enabled skin--responsive skin-vector skin-vector-search-vue mediawiki ltr sitedir-ltr mw-hide-empty-elt ns-0 ns-subject mw-editable page-SVG_image_support rootpage-SVG_image_support 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/Special:MyLanguage/Main_Page" title="Visit the main page [z]" accesskey="z"><span>Main page</span></a></li><li id="n-wikimedia-news-label" class="mw-list-item"><a href="/wiki/Wikimedia_News"><span>Wikimedia News</span></a></li><li id="n-translations-text" class="mw-list-item"><a href="/wiki/Special:LanguageStats"><span>Translations</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-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-help" class="mw-list-item"><a href="/wiki/Special:MyLanguage/Help:Help" title="The place to find out"><span>Help</span></a></li><li id="n-Babel-text" class="mw-list-item"><a href="/wiki/Meta:Babel"><span>Babel</span></a></li> </ul> </div> </div> <div id="p-community" class="vector-menu mw-portlet mw-portlet-community" > <div class="vector-menu-heading"> Community </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="n-WikimediaResourceCenter-text" class="mw-list-item"><a href="/wiki/Special:MyLanguage/Wikimedia_Resource_Center"><span>Wikimedia Resource Center</span></a></li><li id="n-WikimediaForum-text" class="mw-list-item"><a href="/wiki/Wikimedia_Forum"><span>Wikimedia Forum</span></a></li><li id="n-mailinglists-text" class="mw-list-item"><a href="/wiki/Special:MyLanguage/Mailing_lists/Overview"><span>Mailing lists</span></a></li><li id="n-Requests-text" class="mw-list-item"><a href="/wiki/Special:MyLanguage/Meta:Requests_and_proposals"><span>Requests</span></a></li><li id="n-Babylon-text" class="mw-list-item"><a href="/wiki/Special:MyLanguage/Meta:Babylon"><span>Babylon</span></a></li><li id="n-Reports-text" class="mw-list-item"><a href="/wiki/Special:MyLanguage/Wikimedia_Affiliates_Data_Portal"><span>Reports</span></a></li><li id="n-Research-text" class="mw-list-item"><a href="/wiki/Special:MyLanguage/Research:Index"><span>Research</span></a></li><li id="n-planet" class="mw-list-item"><a href="//en.planet.wikimedia.org/" title="Weblog aggregator of Wikimedia-related posts"><span>Planet Wikimedia</span></a></li> </ul> </div> </div> <div id="p-beyond_the_web" class="vector-menu mw-portlet mw-portlet-beyond_the_web" > <div class="vector-menu-heading"> Beyond the Web </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="n-Meetup-text" class="mw-list-item"><a href="/wiki/Special:MyLanguage/Meetup"><span>Meet Wikimedians</span></a></li><li id="n-Events-text" class="mw-list-item"><a href="/wiki/Events"><span>Events</span></a></li><li id="n-wikimedia-movement-affiliates-shortlabel" class="mw-list-item"><a href="/wiki/Special:MyLanguage/Wikimedia_movement_affiliates"><span>Movement affiliates</span></a></li> </ul> </div> </div> </div> </div> </div> </div> </nav> <a href="/wiki/Special:MyLanguage/Main_Page" class="mw-logo"> <img class="mw-logo-icon" src="/static/images/icons/metawiki.svg" alt="" aria-hidden="true" height="50" width="50"> <span class="mw-logo-container skin-invert"> <img class="mw-logo-wordmark" alt="Wikimedia Meta-Wiki" src="/static/images/mobile/copyright/metawiki-wordmark.svg" style="width: 7.5em; height: 1.8125em;"> </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 Meta [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 Meta" aria-label="Search Meta" autocapitalize="sentences" title="Search Meta [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="//donate.wikimedia.org/wiki/Special:FundraiserRedirector?utm_source=donate&utm_medium=sidebar&utm_campaign=C13_meta.wikimedia.org&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=SVG+image+support" 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=SVG+image+support" 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 user-links-collapsible-item" 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="//donate.wikimedia.org/wiki/Special:FundraiserRedirector?utm_source=donate&utm_medium=sidebar&utm_campaign=C13_meta.wikimedia.org&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=SVG+image+support" 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=SVG+image+support" 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> </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-Possible_kinds_of_SVG_support" class="vector-toc-list-item vector-toc-level-1 vector-toc-list-item-expanded"> <a class="vector-toc-link" href="#Possible_kinds_of_SVG_support"> <div class="vector-toc-text"> <span class="vector-toc-numb">1</span> <span>Possible kinds of SVG support</span> </div> </a> <ul id="toc-Possible_kinds_of_SVG_support-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-How_it_works" class="vector-toc-list-item vector-toc-level-1 vector-toc-list-item-expanded"> <a class="vector-toc-link" href="#How_it_works"> <div class="vector-toc-text"> <span class="vector-toc-numb">2</span> <span>How it works</span> </div> </a> <span class="ext-discussiontools-init-sidebar-meta">1 comment</span> <ul id="toc-How_it_works-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Rasterizing" class="vector-toc-list-item vector-toc-level-1 vector-toc-list-item-expanded"> <a class="vector-toc-link" href="#Rasterizing"> <div class="vector-toc-text"> <span class="vector-toc-numb">3</span> <span>Rasterizing</span> </div> </a> <span class="ext-discussiontools-init-sidebar-meta">1 comment</span> <ul id="toc-Rasterizing-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Concerns" class="vector-toc-list-item vector-toc-level-1 vector-toc-list-item-expanded"> <a class="vector-toc-link" href="#Concerns"> <div class="vector-toc-text"> <span class="vector-toc-numb">4</span> <span>Concerns</span> </div> </a> <ul id="toc-Concerns-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Online_editing" class="vector-toc-list-item vector-toc-level-1 vector-toc-list-item-expanded"> <a class="vector-toc-link" href="#Online_editing"> <div class="vector-toc-text"> <span class="vector-toc-numb">5</span> <span>Online editing</span> </div> </a> <ul id="toc-Online_editing-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Browser_notes" class="vector-toc-list-item vector-toc-level-1 vector-toc-list-item-expanded"> <a class="vector-toc-link" href="#Browser_notes"> <div class="vector-toc-text"> <span class="vector-toc-numb">6</span> <span>Browser notes</span> </div> </a> <button aria-controls="toc-Browser_notes-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 Browser notes subsection</span> </button> <ul id="toc-Browser_notes-sublist" class="vector-toc-list"> <li id="toc-Support_via_plugins" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#Support_via_plugins"> <div class="vector-toc-text"> <span class="vector-toc-numb">6.1</span> <span>Support via plugins</span> </div> </a> <ul id="toc-Support_via_plugins-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Unsupported" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#Unsupported"> <div class="vector-toc-text"> <span class="vector-toc-numb">6.2</span> <span>Unsupported</span> </div> </a> <ul id="toc-Unsupported-sublist" class="vector-toc-list"> </ul> </li> </ul> </li> <li id="toc-Implementation" class="vector-toc-list-item vector-toc-level-1 vector-toc-list-item-expanded"> <a class="vector-toc-link" href="#Implementation"> <div class="vector-toc-text"> <span class="vector-toc-numb">7</span> <span>Implementation</span> </div> </a> <ul id="toc-Implementation-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Current_implementation" class="vector-toc-list-item vector-toc-level-1 vector-toc-list-item-expanded"> <a class="vector-toc-link" href="#Current_implementation"> <div class="vector-toc-text"> <span class="vector-toc-numb">8</span> <span>Current implementation</span> </div> </a> <ul id="toc-Current_implementation-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Sources_of_SVG_images_and_icons" class="vector-toc-list-item vector-toc-level-1 vector-toc-list-item-expanded"> <a class="vector-toc-link" href="#Sources_of_SVG_images_and_icons"> <div class="vector-toc-text"> <span class="vector-toc-numb">9</span> <span>Sources of SVG images and icons</span> </div> </a> <ul id="toc-Sources_of_SVG_images_and_icons-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-See_also" class="vector-toc-list-item vector-toc-level-1 vector-toc-list-item-expanded"> <a class="vector-toc-link" href="#See_also"> <div class="vector-toc-text"> <span class="vector-toc-numb">10</span> <span>See also</span> </div> </a> <button aria-controls="toc-See_also-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 See also subsection</span> </button> <ul id="toc-See_also-sublist" class="vector-toc-list"> <li id="toc-Discussion" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#Discussion"> <div class="vector-toc-text"> <span class="vector-toc-numb">10.1</span> <span>Discussion</span> </div> </a> <ul id="toc-Discussion-sublist" class="vector-toc-list"> <li id="toc-Ability_to_upload" class="vector-toc-list-item vector-toc-level-3"> <a class="vector-toc-link" href="#Ability_to_upload"> <div class="vector-toc-text"> <span class="vector-toc-numb">10.1.1</span> <span>Ability to upload</span> </div> </a> <ul id="toc-Ability_to_upload-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Sanitization" class="vector-toc-list-item vector-toc-level-3"> <a class="vector-toc-link" href="#Sanitization"> <div class="vector-toc-text"> <span class="vector-toc-numb">10.1.2</span> <span>Sanitization</span> </div> </a> <ul id="toc-Sanitization-sublist" class="vector-toc-list"> </ul> </li> </ul> </li> </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-main">SVG image support</span></h1> <div id="p-lang-btn" class="vector-dropdown mw-portlet mw-portlet-lang" > <input type="checkbox" id="p-lang-btn-checkbox" role="button" aria-haspopup="true" data-event-name="ui.dropdown-p-lang-btn" class="vector-dropdown-checkbox mw-interlanguage-selector" aria-label="This article exist only in this language. Add the article for other languages" > <label id="p-lang-btn-label" for="p-lang-btn-checkbox" class="vector-dropdown-label cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet cdx-button--action-progressive mw-portlet-lang-heading-0" aria-hidden="true" ><span class="vector-icon mw-ui-icon-language-progressive mw-ui-icon-wikimedia-language-progressive"></span> <span class="vector-dropdown-label-text">Add languages</span> </label> <div class="vector-dropdown-content"> <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=metawiki&page=SVG+image+support" title="Add interlanguage links" class="wbc-editpage">Add links</a></span></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-main" class="selected vector-tab-noicon mw-list-item"><a href="/wiki/SVG_image_support" title="View the content page [c]" accesskey="c"><span>Content page</span></a></li><li id="ca-talk" class="vector-tab-noicon mw-list-item"><a href="/wiki/Talk:SVG_image_support" rel="discussion" 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/SVG_image_support"><span>Read</span></a></li><li id="ca-edit" class="vector-tab-noicon mw-list-item"><a href="/w/index.php?title=SVG_image_support&action=edit" title="Edit 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=SVG_image_support&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/SVG_image_support"><span>Read</span></a></li><li id="ca-more-edit" class="vector-more-collapsible-item mw-list-item"><a href="/w/index.php?title=SVG_image_support&action=edit" title="Edit 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=SVG_image_support&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/SVG_image_support" 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/SVG_image_support" rel="nofollow" title="Recent changes in pages linked from this page [k]" accesskey="k"><span>Related changes</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=SVG_image_support&oldid=27806740" 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=SVG_image_support&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=SVG_image_support&id=27806740&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%2Fmeta.wikimedia.org%2Fwiki%2FSVG_image_support"><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%2Fmeta.wikimedia.org%2Fwiki%2FSVG_image_support"><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=SVG+image+support"><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=SVG_image_support&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=SVG_image_support&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 class="mw-indicators"> </div> <div id="siteSub" class="noprint">From Meta, a Wikimedia project coordination wiki</div> </div> <div id="contentSub"><div id="mw-content-subtitle"></div></div> <div id="mw-content-text" class="mw-body-content"><div class="mw-content-ltr mw-parser-output" lang="en" dir="ltr"><style data-mw-deduplicate="TemplateStyles:r27362704">.mw-parser-output .ombox{margin:4px 0;border-collapse:collapse;border:1px solid #a2a9b1;background-color:var(--background-color-neutral-subtle,#f8f9fa);box-sizing:border-box;color:var(--color-base,#202122)}.mw-parser-output .ombox.mbox-small{font-size:88%;line-height:1.25em}.mw-parser-output .ombox-speedy{border:2px solid #b32424;background-color:#fee7e6}.mw-parser-output .ombox-delete{border:2px solid #b32424}.mw-parser-output .ombox-content{border:1px solid #f28500}.mw-parser-output .ombox-style{border:1px solid #fc3}.mw-parser-output .ombox-move{border:1px solid #9932cc}.mw-parser-output .ombox-protection{border:2px solid #a2a9b1}.mw-parser-output .ombox .mbox-text{border:none;padding:0.25em 0.9em;width:100%}.mw-parser-output .ombox .mbox-image{border:none;padding:2px 0 2px 0.9em;text-align:center}.mw-parser-output .ombox .mbox-imageright{border:none;padding:2px 0.9em 2px 0;text-align:center}.mw-parser-output .ombox .mbox-empty-cell{border:none;padding:0;width:1px}.mw-parser-output .ombox .mbox-invalid-type{text-align:center}@media(min-width:720px){.mw-parser-output .ombox{margin:4px 10%}.mw-parser-output .ombox.mbox-small{clear:right;float:right;margin:4px 0 4px 1em;width:238px}}body.skin--responsive .mw-parser-output table.ombox img{max-width:none!important}@media screen{html.skin-theme-clientpref-night .mw-parser-output .ombox-speedy{background-color:#310402}}@media screen and (prefers-color-scheme:dark){html.skin-theme-clientpref-os .mw-parser-output .ombox-speedy{background-color:#310402}}</style><table class="plainlinks ombox ombox-content" role="presentation"><tbody><tr><td class="mbox-image"><span typeof="mw:File"><span><img alt="" src="//upload.wikimedia.org/wikipedia/commons/thumb/b/b4/Ambox_important.svg/40px-Ambox_important.svg.png" decoding="async" width="40" height="40" class="mw-file-element" srcset="//upload.wikimedia.org/wikipedia/commons/thumb/b/b4/Ambox_important.svg/60px-Ambox_important.svg.png 1.5x, //upload.wikimedia.org/wikipedia/commons/thumb/b/b4/Ambox_important.svg/80px-Ambox_important.svg.png 2x" data-file-width="40" data-file-height="40"/></span></span></td><td class="mbox-text"><b>This page is kept for historical interest. Its content is outdated or may be wrong.</b> You may find more up-to-date information at on the <a href="https://www.mediawiki.org/wiki/" class="extiw" title="mw:">www.mediawiki.org</a> website.</td></tr></tbody></table> <p><a href="https://en.wikipedia.org/wiki/File:Hand.svg" class="extiw" title="w:File:Hand.svg">Example of embedded SVG image with rendering</a> </p><p><b>SVG uploading is currently enabled. See also <a href="https://www.mediawiki.org/wiki/Category:SVG" class="extiw" title="mw:Category:SVG">mw:Category:SVG</a>.</b> </p><p><span typeof="mw:File"><a href="/wiki/File:Flago_de_Esperanto.svg" class="mw-file-description"><img src="//upload.wikimedia.org/wikipedia/commons/thumb/b/b2/Flago_de_Esperanto.svg/300px-Flago_de_Esperanto.svg.png" decoding="async" width="300" height="200" class="mw-file-element" srcset="//upload.wikimedia.org/wikipedia/commons/thumb/b/b2/Flago_de_Esperanto.svg/450px-Flago_de_Esperanto.svg.png 1.5x, //upload.wikimedia.org/wikipedia/commons/thumb/b/b2/Flago_de_Esperanto.svg/600px-Flago_de_Esperanto.svg.png 2x" data-file-width="319" data-file-height="213"/></a></span><br/> <small>(The flag image shown here is actually a PNG rendering from the SVG data.)</small> </p> <hr/> <p>It has been suggested on the mailing lists from time to time that we provide better support for <a href="https://en.wikipedia.org/wiki/Scalable_Vector_Graphics" class="extiw" title="en:Scalable Vector Graphics">SVG</a> vector graphics as inline images. This would be better for charts, graphs, and diagrams that might need to be tweaked, as the SVG could be saved, altered by hand or in an SVG-capable vector editor, and simply re-uploaded without requiring that the original author do the tweak, provide the original vector file as a second upload, or requiring subsequent editors to own a proprietary graphics editor. </p><p>Additionally, vector images scale better when printed; a "printable version" can rasterize at a higher resolution for browsers that don't <a href="https://en.wikipedia.org/wiki/grok" class="extiw" title="en:grok">grok</a> SVG natively. </p><p>For rasterized images produced by MediaWiki's SVG rendering engine for display in articles, the free code image format is <a href="https://en.wikipedia.org/wiki/Portable_Network_Graphics" class="extiw" title="en:Portable Network Graphics">PNG</a>. </p> <meta property="mw:PageProp/toc"/> <div class="mw-heading mw-heading2 ext-discussiontools-init-section"><h2 id="Possible_kinds_of_SVG_support" data-mw-thread-id="h-Possible_kinds_of_SVG_support"><span data-mw-comment-start="" id="h-Possible_kinds_of_SVG_support"></span>Possible kinds of SVG support<span data-mw-comment-end="h-Possible_kinds_of_SVG_support"></span></h2><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=SVG_image_support&action=edit&section=1" title="Edit section: Possible kinds of SVG support"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <p>There are several levels of SVG support that we might hope for in Wikipedia. </p> <ol><li>Simple storage for download. This would permit users creating diagrams to upload “source” along with the PNG so that, for example, people could translate all the text to a new language. Currently disabled for fear of encountering an SVG image that contains <a href="https://en.wikipedia.org/wiki/malware" class="extiw" title="en:malware">malware</a>.</li> <li>Storage and rendering on the server. This would save time and trouble for uploaders, especially since scaling raster diagrams is a pretty dubious operation. Currently implemented and active. Requires a usable batch-rendering program on the server; no free program seems to do an adequate job of supporting SVG at the moment (although <a href="https://en.wikipedia.org/wiki/Inkscape" class="extiw" title="en:Inkscape">en:Inkscape</a> is promising, since many users will be using it to produce images, and it's free). Malware is a concern — not that Inkscape or <a href="https://en.wikipedia.org/wiki/librsvg" class="extiw" title="en:librsvg">en:librsvg</a> have any known vulnerabilities, since they do not support scripting.</li> <li>Serving SVG code untouched for client-side rendering. This could save bandwidth in many cases (and <a class="external text" href="https://commons.wikimedia.org/w/index.php?title=File:Seal_of_the_United_States_Supreme_Court.png&diff=prev&oldid=25138490">use much more</a> if used blindly) and be convenient for users with the correct plugin or Web browser that supports SVG natively. It would also open the door to animated, interactive, scripted SVG on Wikipedia pages — whether this is a good or a bad thing.</li> <li>Serving SVG code untouched <i>and</i> allowing it to be edited wiki-wise. Might be useful for small fixes (such as colour changes or spelling fixes) to simple files or for translation. There's a <a href="/wiki/Talk:SVG_image_support#Simple_SVG_plugin" title="Talk:SVG image support">simple plugin</a> for this.</li> <li>Compression. A <a class="external text" href="https://bugzilla.wikipedia.org/show_bug.cgi?id=4947">patch to enable SVGZ (GZipped SVG) images</a> is available. Support has not yet been integrated into the official MediaWiki distribution.</li></ol> <div class="mw-heading mw-heading2 ext-discussiontools-init-section"><h2 id="How_it_works" data-mw-thread-id="h-How_it_works-2005-12-05T13:44:00.000Z"><span data-mw-comment-start="" id="h-How_it_works-2005-12-05T13:44:00.000Z"></span>How it works<span data-mw-comment-end="h-How_it_works-2005-12-05T13:44:00.000Z"></span></h2><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=SVG_image_support&action=edit&section=2" title="Edit section: How it works"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span><div class="ext-discussiontools-init-section-bar"><div class="ext-discussiontools-init-section-metadata"></div><div class="ext-discussiontools-init-section-actions"></div></div></div> <p><span data-mw-comment-start="" id="c-Ævar_Arnfjörð_Bjarmason-2005-12-05T13:44:00.000Z-How_it_works"></span>This shouldn't require any new wiki markup variations, just a new interpretation for a special case of image links. </p><p>The <a rel="nofollow" class="external text" href="http://www.w3.org/TR/html401/struct/objects.html#h-13.3">object tag</a> seems to be tailor-made for this kind of situation. We should be able to do something like: </p> <div class="mw-highlight mw-highlight-lang-xml mw-content-ltr" dir="ltr"><pre><span></span><span class="nt"><object</span><span class="w"> </span><span class="na">data=</span><span class="s">"/upload/foo.svg"</span><span class="w"> </span><span class="na">type=</span><span class="s">"image/svg+xml"</span><span class="w"> </span><span class="na">style=</span><span class="s">"width: 2in; height: 2in"</span><span class="nt">></span> <span class="w"> </span><span class="nt"><img</span><span class="w"> </span><span class="na">src=</span><span class="s">"/svgcache/foo.png"</span><span class="w"> </span><span class="na">alt=</span><span class="s">"Alt text"</span><span class="w"> </span><span class="na">width=</span><span class="s">"144"</span><span class="w"> </span><span class="na">height=</span><span class="s">"144"</span><span class="w"> </span><span class="nt">/></span> <span class="nt"></object></span> </pre></div> <p>(Perhaps swapping a low-resolution for a high-resolution PNG in printer-friendly mode.) A compliant user agent should ignore the image if it can render the object (either internally or by a plugin), and show the image if it can't render the object. Preliminary testing indicates that this should work on Microsoft Internet Explorer, Mozilla and Konqueror. It may be problematic with older browsers, such as Konqueror 3.0 (the bane of my existence — it's <i>almost</i> great, but mucks up a few things so badly I find it shocking), which renders a blank, empty object tag and ignores the image tag. </p><p><b>See <del><a href="//upload.wikimedia.org/wikipedia/meta/b/bc/SVG_test_demo.html" class="internal" title="SVG test demo.html">Media:SVG test demo.html</a></del> for an example. (This will crash Mozilla on Linux if you use the Adobe SVG viewer plugin; it's obsolete and broken.) If you're seeing the SVG version, the star will appear red instead of green.</b> </p><p>…(on my Galeon browser, it shows a text area with the XML code in it -- <a href="/w/index.php?title=User:Tim_Hemel&action=edit&redlink=1" class="new" title="User:Tim Hemel (page does not exist)">Tim Hemel</a>) </p> <dl><dd>Turns out the server wasn't set up with the right mime type; this may have confused poor Galeon. Try again and see… --<a href="/wiki/User:Brion_VIBBER" class="mw-redirect" title="User:Brion VIBBER">Brion VIBBER</a> 20:51 25 May 2003 (UTC)</dd></dl> <dl><dd><dl><dd>Galeon still only shows a text area … looks like the HTML source.</dd></dl></dd></dl> <dl><dd><dl><dd><dl><dd>FireFox (with default installation, no SVG extensions or anything) just shows text source, too. When I copy and paste into an html file I get a broken image. Oh, I guess because it is a local link. If I copy, paste, and edit them to complete links, it shows a green flag. - <a href="/wiki/User:Omegatron" title="User:Omegatron">Omegatron</a> 20:49, 16 Mar 2004 (UTC)</dd></dl></dd></dl></dd></dl> <p>Yes. Wrong MIME-type. As mentioned by <a href="/wiki/User:Omegatron" title="User:Omegatron">Omegatron</a> copy'n paste this </p> <div class="mw-highlight mw-highlight-lang-xml mw-content-ltr" dir="ltr"><pre><span></span><span class="cp"><?xml version="1.0" charset="UTF-8" ?></span> <span class="cp"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"</span> <span class="cp"> "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"></span> <span class="nt"><html</span><span class="w"> </span><span class="na">xmlns=</span><span class="s">"http://www.w3.org/1999/xhtml"</span><span class="w"> </span><span class="na">xml:lang=</span><span class="s">"en"</span><span class="w"> </span><span class="na">lang=</span><span class="s">"en"</span><span class="w"> </span><span class="na">dir=</span><span class="s">"ltr"</span><span class="nt">></span> <span class="w"> </span><span class="nt"><head></span> <span class="w"> </span><span class="nt"><title></span>SVG<span class="w"> </span>test<span class="w"> </span>demo<span class="nt"></title></span> <span class="w"> </span><span class="nt"></head></span> <span class="w"> </span><span class="nt"><body></span> <span class="w"> </span><span class="nt"><p></span> <span class="w"> </span>This<span class="w"> </span>should<span class="w"> </span>show<span class="w"> </span>an<span class="w"> </span>SVG<span class="w"> </span>or<span class="w"> </span>PNG<span class="w"> </span>image<span class="w"> </span>of<span class="w"> </span>the <span class="w"> </span><span class="nt"><a</span><span class="w"> </span><span class="na">href=</span><span class="s">"http://www.wikipedia.org/wiki/Esperanto_flag"</span><span class="nt">></span>Esperanto<span class="w"> </span>flag<span class="nt"></a></span>, <span class="w"> </span>depending<span class="w"> </span>on<span class="w"> </span>whether<span class="w"> </span>your<span class="w"> </span>browser<span class="w"> </span>supports<span class="w"> </span>SVG<span class="w"> </span>objects,<span class="w"> </span>or<span class="w"> </span>alternate <span class="w"> </span>thumbnail<span class="w"> </span>images<span class="w"> </span>generated<span class="w"> </span>in<span class="w"> </span>PNG<span class="w"> </span>format<span class="w"> </span>on<span class="w"> </span>the<span class="w"> </span>Wikimedia<span class="w"> </span>Commons<span class="w"> </span>upload<span class="w"> </span>site. <span class="w"> </span><span class="nt"></p></span> <span class="w"> </span><span class="nt"><p></span> <span class="w"> </span><span class="nt"><a</span> <span class="w"> </span><span class="na">href=</span><span class="s">"http://commons.wikimedia.org/wiki/Image:Flag_of_Esperanto.svg"</span> <span class="w"> </span><span class="na">title=</span><span class="s">"Flag of Esperanto"</span> <span class="w"> </span><span class="nt">><object</span> <span class="w"> </span><span class="na">type=</span><span class="s">"image/svg+xml"</span> <span class="w"> </span><span class="na">data=</span><span class="s">"http://upload.wikimedia.org/wikipedia/commons/f/f5/Flag_of_Esperanto.svg"</span> <span class="w"> </span><span class="na">style=</span><span class="s">"width:400px;height:266px;border:0"</span> <span class="w"> </span><span class="nt">><img</span> <span class="w"> </span><span class="na">src=</span><span class="s">"http://upload.wikimedia.org/wikipedia/commons/thumb/f/f5/Flag_of_Esperanto.svg/400px-Flag_of_Esperanto.svg.png"</span> <span class="w"> </span><span class="na">alt=</span><span class="s">"Flag of Esperanto"</span> <span class="w"> </span><span class="na">style=</span><span class="s">"width:400px;height:266px;border:0"</span> <span class="w"> </span><span class="nt">/></object></a></span> <span class="w"> </span><span class="nt"></p></span> <span class="w"> </span><span class="nt"><p></span> <span class="w"> </span>See<span class="w"> </span><span class="nt"><a</span><span class="w"> </span><span class="na">href=</span><span class="s">"http://meta.wikipedia.org/wiki/SVG_image_support"</span><span class="nt">></span>SVG<span class="w"> </span>image <span class="w"> </span>support<span class="nt"></a></span><span class="w"> </span>on<span class="w"> </span>meta<span class="w"> </span>for<span class="w"> </span>work<span class="w"> </span>in<span class="w"> </span>progress... <span class="w"> </span><span class="nt"></p></span> <span class="w"> </span><span class="nt"></body></span> <span class="nt"></html></span> </pre></div> <p>into a new text file and save it as <i>something</i>.htm. This should work, as for local files usually no MIME-type is required. --<a href="/w/index.php?title=User:SteffenB&action=edit&redlink=1" class="new" title="User:SteffenB (page does not exist)">SteffenB</a> 16:46, 23 Mar 2004 (UTC) </p> <dl><dd>you can't fix this on the other end? - <a href="/wiki/User:Omegatron" title="User:Omegatron">Omegatron</a> <dl><dd>Fixed the URL to point to something valid. —<a href="/wiki/User:%C3%86var_Arnfj%C3%B6r%C3%B0_Bjarmason" title="User:Ævar Arnfjörð Bjarmason">Ævar Arnfjörð Bjarmason</a> <a href="https://meta.wikimedia.org/wiki/SVG_image_support#c-Ævar_Arnfjörð_Bjarmason-2005-12-05T13:44:00.000Z-How_it_works" class="ext-discussiontools-init-timestamplink">13:44, 5 December 2005 (UTC)</a><span class="ext-discussiontools-init-replylink-buttons" data-mw-thread-id="c-Ævar_Arnfjörð_Bjarmason-2005-12-05T13:44:00.000Z-How_it_works"><span class="ext-discussiontools-init-replylink-bracket">[</span><a class="ext-discussiontools-init-replylink-reply" role="button" tabindex="0" href="">reply</a><span class="ext-discussiontools-init-replylink-bracket">]</span></span><span data-mw-comment-end="c-Ævar_Arnfjörð_Bjarmason-2005-12-05T13:44:00.000Z-How_it_works"></span> <dl><dd>Fixed for <b>validated</b> conformance to the "XHTML 1.0 strict" content model, and <b>validated</b> conformance to CSS 1.0.</dd> <dd>Also fixed the alternate bitmap image in PNG format (corrected URL), when SVG is not natively supported in the browser. This syntax would save bandwidth and processing time on the Commons upload servers, by enabling effective support of SVG directly in browsers without using the SVG-to-PNG convertor and Commons Upload caches for thumbnails.</dd> <dd>Note how size parameters are provided: although thumbnails (and the Wiki syntax) only require specifying the image width, for compatibility, we must provide also the image height for the object and for the image, using a CSS "height:" property. We also fix the border width to 0 here (otherwise, the link would add a plain 2px border whose color is changing depending on the current status of the link: normal, visited, hovered). <a href="https://fr.wikipedia.org/wiki/Utilisateur:Verdy_p" class="extiw" title="fr:Utilisateur:Verdy p">fr:Verdy p</a> 16:40, 20 October 2006 (UTC)</dd></dl></dd></dl></dd></dl> <div class="mw-heading mw-heading2 ext-discussiontools-init-section"><h2 id="Rasterizing" data-mw-thread-id="h-Rasterizing-2008-10-07T06:47:00.000Z"><span data-mw-comment-start="" id="h-Rasterizing-2008-10-07T06:47:00.000Z"></span>Rasterizing<span data-mw-comment-end="h-Rasterizing-2008-10-07T06:47:00.000Z"></span></h2><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=SVG_image_support&action=edit&section=3" title="Edit section: Rasterizing"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span><div class="ext-discussiontools-init-section-bar"><div class="ext-discussiontools-init-section-metadata"></div><div class="ext-discussiontools-init-section-actions"></div></div></div> <p><span data-mw-comment-start="" id="c-Rursus-2008-10-07T06:47:00.000Z-Rasterizing"></span>There's a <a rel="nofollow" class="external text" href="http://bitflux.ch/developer/misc/xml_svg2image.html">PHP class for SVG-to-PNG conversion</a> using <a rel="nofollow" class="external text" href="https://xml.apache.org/batik/">Batik</a>, but this sounds hackish, fragile, and resource-hungry. Batik also has a command line SVG to PNG client. Batik supports all the static features of SVG and some of the dynamic. </p><p>The only rasterizer that reasonably works is Batik. RSVG, ImageMagick and Sodipodi are broken. <a href="/wiki/User:Taw" title="User:Taw">Taw</a> 11:28, 8 Oct 2003 (UTC) </p><p><a rel="nofollow" class="external text" href="http://www.inkscape.org/">Inkscape</a> has revived the Sodipodi project, and the export to PNG is brilliant. You can invoke it from the command line with inkscape filename.svg --export-png=filename.png -w600 -h400 <a href="/w/index.php?title=User:Glitch010101&action=edit&redlink=1" class="new" title="User:Glitch010101 (page does not exist)">Glitch010101</a> 8:16, 7 Dec 2004 (UTC) </p> <dl><dd>It's silly to wait to implement this until the perfect SVG renderer is written — rasterization is such a simple operation from the wiki's point of view. Inputs: SVG file, resolution; Outputs: Bitmap image. So make it a shell script that runs the best available rasterizer. Easy upgrades…</dd></dl> <dl><dd><dl><dd>Says who? Any programmer knows that before creating the "perfect" s/w, one have to create an imperfect s/w and thereafter improve it. <a href="/wiki/User:Rursus" title="User:Rursus">rursus</a> <a href="https://meta.wikimedia.org/wiki/SVG_image_support#c-Rursus-2008-10-07T06:47:00.000Z-Rasterizing" class="ext-discussiontools-init-timestamplink">06:47, 7 October 2008 (UTC)</a><span class="ext-discussiontools-init-replylink-buttons" data-mw-thread-id="c-Rursus-2008-10-07T06:47:00.000Z-Rasterizing"><span class="ext-discussiontools-init-replylink-bracket">[</span><a class="ext-discussiontools-init-replylink-reply" role="button" tabindex="0" href="">reply</a><span class="ext-discussiontools-init-replylink-bracket">]</span></span><span data-mw-comment-end="c-Rursus-2008-10-07T06:47:00.000Z-Rasterizing"></span></dd></dl></dd></dl> <div class="mw-heading mw-heading2 ext-discussiontools-init-section"><h2 id="Concerns" data-mw-thread-id="h-Concerns"><span data-mw-comment-start="" id="h-Concerns"></span>Concerns<span data-mw-comment-end="h-Concerns"></span></h2><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=SVG_image_support&action=edit&section=4" title="Edit section: Concerns"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <p>SVG files can contain references to external resources. What does this entail? </p><p>At minimum, if the image was converted to a tag, the <b>a</b> tags in SVG would need to be parsed out and added so that someone could still follow the links even if they were viewing the PNG version. See: <a rel="nofollow" class="external free" href="http://www.w3.org/TR/SVG11/linking.html#Links">http://www.w3.org/TR/SVG11/linking.html#Links</a> </p><p>A possibly complete list of external references allowed in SVG is at: <a rel="nofollow" class="external free" href="http://www.w3.org/TR/SVG11/struct.html#Head">http://www.w3.org/TR/SVG11/struct.html#Head</a> </p><p>What about animations, etc.? </p> <div class="mw-heading mw-heading2 ext-discussiontools-init-section"><h2 id="Online_editing" data-mw-thread-id="h-Online_editing"><span data-mw-comment-start="" id="h-Online_editing"></span>Online editing<span data-mw-comment-end="h-Online_editing"></span></h2><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=SVG_image_support&action=edit&section=5" title="Edit section: Online editing"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <p>It's also been suggested that SVG images could be edited in the wiki way (as raw XML text, or with some kind of vector editor applet). That's a bit more complicated, though. See <a href="/wiki/SVG_whiteboard" title="SVG whiteboard">SVG whiteboard</a>. This would allow easy updating of diagrams and maps when data changes, for instance. </p><p>Others consider SVG's baroque and tedious XML syntax of little use for manual processing with text editors and HTML forms. In comparison, a far more powerful, comfortable and better-established vector-graphics file format is <a href="https://en.wikipedia.org/wiki/MetaPost" class="extiw" title="en:MetaPost">MetaPost</a>. In contrast to SVG, MetaPost was specifically designed to be edited directly with a text editor and is therefore far better suited for a Wiki environment. MetaPost is a high-level programming language and therefore far better suited to represent geometric constructs at the appropriate level of abstraction. It is widely used today in scientific typesetting and freely available. </p><p>Although SVG images may not be appropriate for human online editing, enabling online editing would permit templates that produce SVG images as output. For example, the collection of <a href="https://commons.wikimedia.org/wiki/Commons:Railway_line_template" class="extiw" title="commons:Commons:Railway line template">Railway line template</a> (also see <a href="https://en.wikipedia.org/wiki/WP:TRAIL" class="extiw" title="w:WP:TRAIL">w:WP:TRAIL</a>) icons are currently growing exponentially - they could be replaced with a handful of template programs. </p> <div class="mw-heading mw-heading2 ext-discussiontools-init-section"><h2 id="Browser_notes" data-mw-thread-id="h-Browser_notes"><span data-mw-comment-start="" id="h-Browser_notes"></span>Browser notes<span data-mw-comment-end="h-Browser_notes"></span></h2><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=SVG_image_support&action=edit&section=6" title="Edit section: Browser notes"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <ul><li>Mozilla Firefox 1.5 includes native <a rel="nofollow" class="external text" href="http://developer.mozilla.org/en/docs/SVG_in_Firefox_1.5">SVG support</a> for a subset of <a rel="nofollow" class="external text" href="http://www.w3.org/TR/SVG11/">SVG 1.1</a>.</li> <li>Mozilla Firefox 2.0 includes native <a rel="nofollow" class="external text" href="http://developer.mozilla.org/en/docs/SVG_in_Firefox_2.0">SVG support</a> for a subset of <a rel="nofollow" class="external text" href="http://www.w3.org/TR/SVG11/">SVG 1.1</a></li> <li>Mozilla Firefox 3.0 includes native <a rel="nofollow" class="external text" href="http://developer.mozilla.org/en/docs/SVG_improvements_in_Firefox_3">SVG support</a> for a subset of <a rel="nofollow" class="external text" href="http://www.w3.org/TR/SVG11/">SVG 1.1</a>, and now supports all SVG 1.1 filters, among other improvements.</li></ul> <p>(the above links are broken, explore <a rel="nofollow" class="external free" href="http://www.mozilla.org/projects/svg/">http://www.mozilla.org/projects/svg/</a>) </p> <ul><li>Opera 8 includes native <a rel="nofollow" class="external text" href="http://www.opera.com/features/svg/">SVG support</a> for the <a rel="nofollow" class="external text" href="http://www.w3.org/TR/SVGMobile/">SVG Tiny mobile profile</a> of SVG 1.1 plus extensions for opacity, font handling, and animation.</li> <li>Safari 3, and other recent Webkit based browsers, include <a rel="nofollow" class="external text" href="http://webkit.org/projects/svg/index.html">native SVG support</a>, for a subset of <a rel="nofollow" class="external text" href="http://www.w3.org/TR/SVG11/">SVG 1.1</a></li> <li>Microsoft Internet Explorer 9.0 Testdrive includes native <a rel="nofollow" class="external text" href="http://ie.microsoft.com/testdrive/info/ReleaseNotes/Default.html">SVG support</a> for a subset of <a rel="nofollow" class="external text" href="http://www.w3.org/TR/SVG11/">SVG 1.1</a>.</li></ul> <div class="mw-heading mw-heading3"><h3 id="Support_via_plugins" data-mw-thread-id="h-Support_via_plugins-Browser_notes"><span data-mw-comment-start="" id="h-Support_via_plugins-Browser_notes"></span>Support via plugins<span data-mw-comment-end="h-Support_via_plugins-Browser_notes"></span></h3><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=SVG_image_support&action=edit&section=7" title="Edit section: Support via plugins"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <ul><li>I'm having trouble getting the Adobe SVG plugin running with Mozilla on Red Hat 8; as a full-page viewer it works, but as in inline plugin it crashes Mozilla. <ul><li>Having better luck with Windows version in both Internet Explorer and Mozilla. As an inline, it seems to require specifying a size for the plugin or it defaults to some ridiculous square. It also defaults to displaying at 100% zoom at the Windows logical display resolution; specifying width and height in inches per stylesheet instead of pixels (i.e., to match the pre-rendered PNG's resolution, probably 72) seems to give the right results <ul><li>Corollary to that is that SVG images should be logically sized to something that will be comfortable on screen <i>and</i> on print.</li></ul></li></ul></li> <li>There's a Corel SVG viewer plugin, but for Microsoft Windows only.</li> <li><a rel="nofollow" class="external text" href="http://www.w3.org/Amaya/">Amaya</a> supposedly has SVG support; I can't get it to compile, I'll have to look for a binary. <ul><li>Happened to have an old old version 5 that came with Debian 3.0; it doesn't like the particular demo image, so doesn't seem to work right. I'll try a newer version. … Amaya 8.0 does show the SVG, but the star is placed too far to the right. I don't know if it's a bug in the file or in Amaya's rendering. --<a href="/wiki/User:Brion_VIBBER" class="mw-redirect" title="User:Brion VIBBER">Brion VIBBER</a> 04:38 26 May 2003 (UTC)</li></ul></li> <li>There is some sort of <a rel="nofollow" class="external text" href="http://svg.kde.org/">Konqueror plugin</a>. Haven't tested yet. <ul><li>According to <a rel="nofollow" class="external text" href="http://gemal.dk/browserspy/images.html">browserspy</a> SVG embeded and as an object are supported (Mandrake Linux with KSVG 3.3.2) --<a href="/wiki/User:Hhielscher" title="User:Hhielscher">Hhielscher</a> 20:12, 3 Mar 2005 (UTC)</li></ul></li> <li><a rel="nofollow" class="external text" href="http://www.adobe.com/svg/viewer/install/">Adobe SVG Viewer</a> one of the best SVG rendering plugin for Windows 98-XP, MacOS 8-9, Mac OS X, RedHat Linux and Solaris, available in 20 languages (also offers an optional extension for handling ICC color profiles). Unfortunately, Adobe now announces that it will discontinue its support on 1 January 2009. The current version of this viewer is 3.0 (with update 3 on Windows). -- <a href="https://fr.wikipedia.org/wiki/Utilisateur:Verdy_p" class="extiw" title="fr:Utilisateur:Verdy p">fr:Verdy p</a> 17:13, 20 October 2006 (UTC)</li> <li>Adobe SVG plugin will accept some SVG pages that aren't supported by the native engine in some of the recent web browsers. This is often down to a missing anonymous namespace reference in the SVG element. In such cases the SVG document should be reworked to ensure maximum compatibility.</li></ul> <div class="mw-heading mw-heading3"><h3 id="Unsupported" data-mw-thread-id="h-Unsupported-Browser_notes"><span data-mw-comment-start="" id="h-Unsupported-Browser_notes"></span>Unsupported<span data-mw-comment-end="h-Unsupported-Browser_notes"></span></h3><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=SVG_image_support&action=edit&section=8" title="Edit section: Unsupported"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <ul><li><a href="https://en.wikipedia.org/wiki/Netscape_Navigator" class="extiw" title="w:Netscape Navigator">Netscape Navigator</a> <small>see below</small></li></ul> <p>The trick to "hide" inline SVG in an <tt><object></tt> tag with a fallback to a plain inline <tt><img src="<b>some</b>.png" /></tt> is elegant, but please note that some legacy browsers also don't support inline PNG. For very important icons that's unacceptable, e.g. on <i>MoinMoin</i> all external links are screwed up by ugly "internal-icon-baddata" artifacts. On the other hand, <tt><object></tt> can be nested, and using inline PNG only within <tt><object></tt> could avoid harmful side-effects on old browsers. </p> <div class="mw-heading mw-heading2 ext-discussiontools-init-section"><h2 id="Implementation" data-mw-thread-id="h-Implementation"><span data-mw-comment-start="" id="h-Implementation"></span>Implementation<span data-mw-comment-end="h-Implementation"></span></h2><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=SVG_image_support&action=edit&section=9" title="Edit section: Implementation"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <p>One possible way of implementing would be to create a special namespace called <tt>SVG:</tt>. Editings in this name space would be interpreted as a svg image. The preview and the final display would first of all check to make sure that the SVG had the correct syntax, and then it would display a PNG and the SVG of the image. When the editing was done a PNG would be generated from the svg and placed in a generated images directory. The SVG would be edited as text, or could be copy and pasted into the editing box. </p> <dl><dd>I like this! You could also have a user option to display the SVG directly, which you might pick if you know that your browser handles SVGs well. -- <a href="/wiki/User:Toby_Bartels" title="User:Toby Bartels">Toby Bartels</a> 18:09 1 Jul 2003 (UTC)</dd></dl> <dl><dd><dl><dd>Yeah. People should be able to choose if they are getting PNG when they know their browser supports SVG. This is happening to me a lot and I hope that this will be implemented soon.</dd></dl></dd></dl> <p>A second way would be to check when a new file is uploaded. If the file is a SVG, then a generated image would be created from it. Then when a SVG image is linked, it would generate the appropriate object tag and the secondary link to the generated image. </p> <dl><dd>This, in contrast, isn't really any better than any other image format, since it's unclear to people that they can edit the image in the wiki way. -- <a href="/wiki/User:Toby_Bartels" title="User:Toby Bartels">Toby Bartels</a> 18:09 1 Jul 2003 (UTC)</dd></dl> <div class="mw-heading mw-heading2 ext-discussiontools-init-section"><h2 id="Current_implementation" data-mw-thread-id="h-Current_implementation"><span data-mw-comment-start="" id="h-Current_implementation"></span>Current implementation<span data-mw-comment-end="h-Current_implementation"></span></h2><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=SVG_image_support&action=edit&section=10" title="Edit section: Current implementation"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <p>MediaWiki 1.5 allows use of an external program to rasterize SVG images to PNG for inline use. (SVG still needs to be manually added to the upload whitelist to allow uploads.) </p><p>The Wikimedia sites are currently using a slightly hacked <a rel="nofollow" class="external text" href="http://librsvg.sourceforge.net/">rsvg</a> (to disable loading of sub-images or other resources from the filesystem) as the renderer. The version used is 2.14.0 (<a href="https://en.wikipedia.org/wiki/Cairo_(graphics)" class="extiw" title="w:Cairo (graphics)">cairo</a>-based). </p><p><a rel="nofollow" class="external text" href="https://xml.apache.org/batik/">Batik</a> provides better rendering but is <i>very</i> slow (a large Java-based library) so we're not using it at the moment. Making it a callable daemon may allow using it effectively. </p><p>All Wikia-hosted projects are currently using ImageMagick's convert (the default). This application has some severe limitations in its SVG->PNG conversion abilities, including complete loss of all <a rel="nofollow" class="external text" href="http://grin-optics.org/">gradient</a>-fills and text. All uncyclomedia.org-hosted projects (for example) therefore use Inkscape. The options to select each of the various renderers are listed in includes/DefaultSettings.php - copy to LocalSettings.php and edit as required. Note that, when first invoking Inkscape, the web server (user: apache on RH/Fedora-style installations) must have write access to its own home directory so that it may create a pair of hidden subdirectories to store Inkscape's settings. Once these directories have been created, no further changes are required. </p><p>A same-image comparison (<a href="/w/index.php?title=As_of_2006&action=edit&redlink=1" class="new" title="As of 2006 (page does not exist)">as of August 2006</a>, based on various MediaWiki 1.7alpha, MediaWiki 1.8alpha installations): </p> <dl><dd>RSVG: <del><a class="external free" href="https://fr.wikipedia.org/wiki/Image:Lapinrose_ratp.svg">http://fr.wikipedia.org/wiki/Image:Lapinrose_ratp.svg</a></del> (transfered from fr.Wikipedia to Commons, then deleted from both wikis due to copyright violation)</dd> <dd>ImageMagick: <a rel="nofollow" class="external free" href="http://desencyclopedie.com/wiki/Image:Lapinrose_ratp.svg">http://desencyclopedie.com/wiki/Image:Lapinrose_ratp.svg</a></dd> <dd>Inkscape: <a rel="nofollow" class="external free" href="http://desencyclopedie.org/wiki/Image:Lapinrose_ratp.svg">http://desencyclopedie.org/wiki/Image:Lapinrose_ratp.svg</a> ( <a href="/w/index.php?title=Inkscape_on_Win32_Server&action=edit&redlink=1" class="new" title="Inkscape on Win32 Server (page does not exist)">Inkscape on Win32 Server</a> Setup Notes )</dd></dl> <p>The image should display as a pink bunny with one hand caught in a subway train door (from <a href="https://fr.wikipedia.org/wiki/Lapin_du_m%C3%A9tro_parisien" class="extiw" title="fr:Lapin du métro parisien">a warning sticker on the Paris métro system</a>). Wikipédia displays this correctly, as does the server running Inkscape. The windows are gradient fills and, on the ImageMagick version (default as used on Wikia), they simply disappear into the blackness behind them. </p> <div class="mw-heading mw-heading2 ext-discussiontools-init-section"><h2 id="Sources_of_SVG_images_and_icons" data-mw-thread-id="h-Sources_of_SVG_images_and_icons"><span data-mw-comment-start="" id="h-Sources_of_SVG_images_and_icons"></span>Sources of SVG images and icons<span data-mw-comment-end="h-Sources_of_SVG_images_and_icons"></span></h2><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=SVG_image_support&action=edit&section=11" title="Edit section: Sources of SVG images and icons"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <p>The entire <a href="https://en.wikipedia.org/wiki/Openclipart" class="extiw" title="w:Openclipart">Openclipart</a> archive is SVG, a few thousand freely-reusable public-domain images. A commons-style setup does allow reuse of this handy material across many projects. </p> <div class="mw-heading mw-heading2 ext-discussiontools-init-section"><h2 id="See_also" data-mw-thread-id="h-See_also"><span data-mw-comment-start="" id="h-See_also"></span>See also<span data-mw-comment-end="h-See_also"></span></h2><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=SVG_image_support&action=edit&section=12" title="Edit section: See also"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <ul><li><a href="https://phabricator.wikimedia.org/T5593" class="extiw" title="phab:T5593"><i>[Epic] SVG client side rendering</i></a> (T5593)</li> <li><a class="external text" href="https://bugzilla.wikipedia.org/show_bug.cgi?id=1683">Ticket <i>Allow SVG uploads on Commons</i></a></li> <li><a href="/wiki/SVG" title="SVG">SVG</a></li> <li><a href="/wiki/SVG_fonts" title="SVG fonts">SVG fonts</a></li> <li><a href="/wiki/SVG_whiteboard" title="SVG whiteboard">SVG whiteboard</a> (historical)</li> <li><a class="external text" href="https://www.mediawiki.org/wiki/Extension:Inline_SVG_extension">Inline SVG extension</a></li> <li><a href="https://commons.wikimedia.org/wiki/Help:SVG" class="extiw" title="commons:Help:SVG">commons:Help:SVG</a></li> <li><a href="https://en.wikipedia.org/wiki/Wikipedia:Graphics_Lab/Resources/SVG" class="extiw" title="w:Wikipedia:Graphics Lab/Resources/SVG">Wikipedia:Graphics Lab/Resources/SVG</a></li> <li><a href="https://commons.wikimedia.org/wiki/Librsvg_bugs" class="extiw" title="commons:Librsvg bugs">commons:Librsvg bugs</a></li> <li><a href="https://strategy.wikimedia.org/wiki/Proposal:Librsvg_development_funding" class="extiw" title="strategy:Proposal:Librsvg development funding">Proposal:Librsvg development funding</a> (from 2009, now read-only)</li></ul> <div class="mw-heading mw-heading3"><h3 id="Discussion" data-mw-thread-id="h-Discussion-See_also"><span data-mw-comment-start="" id="h-Discussion-See_also"></span>Discussion<span data-mw-comment-end="h-Discussion-See_also"></span></h3><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=SVG_image_support&action=edit&section=13" title="Edit section: Discussion"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <ul><li><a class="external text" href="https://en.wikipedia.org/w/index.php?title=Wikipedia:Village_pump_%28policy%29&oldid=11613266#raster_vs_vector_graphics"><i>raster vs vector graphics</i></a> (2005)</li></ul> <div class="mw-heading mw-heading4"><h4 id="Ability_to_upload" data-mw-thread-id="h-Ability_to_upload-Discussion"><span data-mw-comment-start="" id="h-Ability_to_upload-Discussion"></span>Ability to upload<span data-mw-comment-end="h-Ability_to_upload-Discussion"></span></h4><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=SVG_image_support&action=edit&section=14" title="Edit section: Ability to upload"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <ul><li><a class="external text" href="https://lists.wikimedia.org/hyperkitty/list/wikitech-l@lists.wikimedia.org/message/3CFKSUPHU5IDQL2LOUVCWTO3IJXONKZI/"><i>Upload limitations</i></a> (2004)</li> <li><a class="external text" href="https://lists.wikimedia.org/pipermail/commons-l/2005-January/000020.html"><i>SVG Upload?</i></a> (2005)</li> <li><a class="external text" href="https://lists.wikimedia.org/hyperkitty/list/wikitech-l@lists.wikimedia.org/thread/DWAQD76CKVDWSNCT57IPXPLOW3NVZAOC/#DWAQD76CKVDWSNCT57IPXPLOW3NVZAOC"><i>SVG Uploading</i></a> (2005)</li> <li><a href="https://commons.wikimedia.org/wiki/Commons_talk:File_types/Archive_1#Why_can't_we_upload_SVGs_again?" class="extiw" title="commons:Commons talk:File types/Archive 1"><i>Why can't we upload SVGs again?</i></a> (July to November 2005)</li></ul> <div class="mw-heading mw-heading4"><h4 id="Sanitization" data-mw-thread-id="h-Sanitization-Discussion"><span data-mw-comment-start="" id="h-Sanitization-Discussion"></span>Sanitization<span data-mw-comment-end="h-Sanitization-Discussion"></span></h4><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=SVG_image_support&action=edit&section=15" title="Edit section: Sanitization"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <ul><li><a href="https://en.wikipedia.org/wiki/User:Aarchiba/SVG_sanitizer" class="extiw" title="en:User:Aarchiba/SVG sanitizer">en:User:Aarchiba/SVG sanitizer</a></li> <li><a class="external text" href="https://en.wikipedia.org/w/index.php?title=User_talk:Brion_VIBBER&oldid=15817143#SVG_sanitizer">B. Vibber's vague comment on SVG sanitizer</a></li></ul>    </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://meta.wikimedia.org/w/index.php?title=SVG_image_support&oldid=27806740">https://meta.wikimedia.org/w/index.php?title=SVG_image_support&oldid=27806740</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:MediaWiki_archives" title="Category:MediaWiki archives">MediaWiki archives</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 18 November 2024, at 09:55.</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. See <a class="external text" href="https://foundation.wikimedia.org/wiki/Special:MyLanguage/Policy:Terms_of_Use">Terms of Use</a> for details.</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/Meta:About">About Meta</a></li> <li id="footer-places-disclaimers"><a href="https://foundation.wikimedia.org/wiki/Special:MyLanguage/Policy:General_disclaimer">Disclaimers</a></li> <li id="footer-places-wm-codeofconduct"><a href="https://foundation.wikimedia.org/wiki/Special:MyLanguage/Policy:Universal_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/#/meta.wikimedia.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="//meta.m.wikimedia.org/w/index.php?title=SVG_image_support&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-jgsst","wgBackendResponseTime":136,"wgDiscussionToolsPageThreads":[{"headingLevel":2,"name":"h-","type":"heading","level":0,"id":"h-Possible_kinds_of_SVG_support","replies":[]},{"headingLevel":2,"name":"h-Ævar_Arnfjörð_Bjarmason-2005-12-05T13:44:00.000Z","type":"heading","level":0,"id":"h-How_it_works-2005-12-05T13:44:00.000Z","replies":[{"timestamp":"2005-12-05T13:44:00.000Z","author":"Ævar Arnfjörð Bjarmason","type":"comment","level":1,"id":"c-Ævar_Arnfjörð_Bjarmason-2005-12-05T13:44:00.000Z-How_it_works","replies":[]}]},{"headingLevel":2,"name":"h-Rursus-2008-10-07T06:47:00.000Z","type":"heading","level":0,"id":"h-Rasterizing-2008-10-07T06:47:00.000Z","replies":[{"timestamp":"2008-10-07T06:47:00.000Z","author":"Rursus","type":"comment","level":1,"id":"c-Rursus-2008-10-07T06:47:00.000Z-Rasterizing","replies":[]}]},{"headingLevel":2,"name":"h-","type":"heading","level":0,"id":"h-Concerns","replies":[]},{"headingLevel":2,"name":"h-","type":"heading","level":0,"id":"h-Online_editing","replies":[]},{"headingLevel":2,"name":"h-","type":"heading","level":0,"id":"h-Browser_notes","replies":[{"headingLevel":3,"name":"h-","type":"heading","level":0,"id":"h-Support_via_plugins-Browser_notes","replies":[]},{"headingLevel":3,"name":"h-","type":"heading","level":0,"id":"h-Unsupported-Browser_notes","replies":[]}]},{"headingLevel":2,"name":"h-","type":"heading","level":0,"id":"h-Implementation","replies":[]},{"headingLevel":2,"name":"h-","type":"heading","level":0,"id":"h-Current_implementation","replies":[]},{"headingLevel":2,"name":"h-","type":"heading","level":0,"id":"h-Sources_of_SVG_images_and_icons","replies":[]},{"headingLevel":2,"name":"h-","type":"heading","level":0,"id":"h-See_also","replies":[{"headingLevel":3,"name":"h-","type":"heading","level":0,"id":"h-Discussion-See_also","replies":[{"headingLevel":4,"name":"h-","type":"heading","level":0,"id":"h-Ability_to_upload-Discussion","replies":[]},{"headingLevel":4,"name":"h-","type":"heading","level":0,"id":"h-Sanitization-Discussion","replies":[]}]}]}],"wgPageParseReport":{"discussiontools":{"limitreport-timeusage":"0.028"},"limitreport":{"cputime":"0.115","walltime":"0.140","ppvisitednodes":{"value":128,"limit":1000000},"postexpandincludesize":{"value":1378,"limit":2097152},"templateargumentsize":{"value":0,"limit":2097152},"expansiondepth":{"value":6,"limit":100},"expensivefunctioncount":{"value":2,"limit":500},"unstrip-depth":{"value":0,"limit":20},"unstrip-size":{"value":7477,"limit":5000000},"entityaccesscount":{"value":0,"limit":400},"timingprofile":["100.00% 63.275 1 -total"," 89.80% 56.820 1 Template:HistoricalMediaWiki"," 80.50% 50.935 1 Template:Ombox"," 7.25% 4.586 1 User:Ævar_Arnfjörð_Bjarmason/Sig"]},"scribunto":{"limitreport-timeusage":{"value":"0.028","limit":"10.000"},"limitreport-memusage":{"value":654117,"limit":52428800}},"cachereport":{"origin":"mw-api-ext.codfw.main-7798dcf946-9gp2z","timestamp":"20241118095545","ttl":2592000,"transientcontent":false}}});});</script> </body> </html>