本页使用了标题或全文手工转换

帮助:SVG

From Wikimedia Commons, the free media repository
Jump to navigation Jump to search
This page is a translated version of a page Help:SVG and the translation is 53% complete. Changes to the translation template, respectively the source language can be submitted through Help:SVG and have to be approved by a translation administrator.
Outdated translations are marked like this.
Other languages:

Shortcut: COM:SVG

SVG文件格式的官方标志

SVG（可缩放矢量图形）是维基共享资源所接受的一种文件格式。其适合用于图表、地图，以及其他的非照片类图像。SVG在共享资源受到高度评价，因为其使用源代码来描述图形对象，因此目前其提供了修改与提升内容的最佳方法。

SVG文件在维基共享资源上已得到广泛使用。这里有一些入门指南（如果您已经知道要使用什么程序来生成此类文件，除以下内容外，还可考虑浏览Help:Illustrator/zh或Help:Inkscape圖形編輯器）。

什麼是 SVG？

一副SVG图像样例——请注意，无论您以何种比例查看图像，其线条始终显得平滑，不会出现“锯齿”

可缩放矢量图形（SVG）是一个XML规范以及文件格式，用于描述静态或动态二维矢量图形（与位图或栅格图相对）。它以纯文本或压缩（二进制）格式存储，这比其他多数图像格式（如JPEG或GIF）具有更高的尺寸效率。SVG还允许嵌入栅格图形与可编辑文本。

librsvg

librsvg（或者“RSVG”）是MediaWiki使用的一个将SVG文件栅格化，成为维基共享资源网页所用的PNG位图格式的渲染库。共享资源页面显示的图像并非SVG，因此也不具有动画或交互效果。做出这一选择的原因之一是，实时渲染SVG会降低老旧计算机或操作系统的速度。可由SVG高效转换出来的栅格化版本有助于克服这一技术问题。另一个原因是一些SVG文件非常大（例如1 MB），一副在显示屏上显示为160×320像素的图像，如果不经压缩可达51200像素（24位色彩下可达153600字节）。

As of May 2023, Commons is running librsvg 2.44.10 (phab:T193352), already four years old by the time of its adoption. This is an early version of the librsvg rewrite in Rust programming language. Although it manages to fix longstanding problems such as the mask bug (phab:T55899) and provides initial support for SVG 2.0, some fixes on the upstream remain unavailable to us due to our old Debian release. See (phab:T265549) for the latest updates.

librsvg一些漏洞和缺少的功能会影响共享资源上的SVG图像。因此，SVG文件力求解决或避免这些问题。例如，librsvg不支持路径文字的功能，并且对于从上到下的竖列文本方面也存在着问题。即使librsvg可以完美运行，也可能存在兼容性问题。SVG文件还可能会使用共享资源中没有支持的字体。

怪癖

樣式

Tracked in Phabricator
Task T68672
RESOLVED

在SVG規範中，style元素MUST默認其type屬性為"text/css"。[1] 使用style元素的SVG圖像應在其‎<style>標籤中明確設置type="text/css"。（換句話說，‎<style type="text/css">應該優先於‎<style>。）(phab:T68672)

文本未能显示 / 浮动元素

参见§ 文本未能显示（浮动文字BUG）

systemLanguage 处理

私人使用langtag qcs来选择zh-Hans。
私人使用langtag qct来选择zh-Hant。

RSVG 无法正确比较 systemLanguage 属性，SVG 指定的是逗号分隔的 IETF 语言标签 (langtag) 列表。 RSVG 仅匹配 langtag 中的第一个子标签（第一个连字符之前的字符组），因此 RSVG 会忽略后面的任何国家代码或脚本子标签。 例如RSVG不会区分zh-Hans（简体中文）和zh-Hant（繁体中文）。 要解决该问题，可以使用专用 langtag（qaa-qtz 范围内的一个）来指定语言。

IETF 语言标签 SVG 标记
sr-Cyrl systemLanguage="sr-Cyrl,qsc"
sr-Latn systemLanguage="sr-Latn,qsl"
zh-Hans systemLanguage="zh-Hans,qcs"
zh-Hant systemLanguage="zh-Hant,qct"

systemLanguage 属性应该是 IETF 语言标签列表。 关于正确的语言标签存在一些混淆。 对于塞尔维亚语，MediaWiki 一直在使用 sr-EC 和 sr-EL，但在 BCP 47 下，这些标签表示 EC（厄瓜多尔）地区所说的塞尔维亚语和所说的塞尔维亚语 在 EL（未分配区域）中。 正确的语言标签是 sr-Cyrl 和 sr-Latn。 如果用户声明了包括 sr 的语言首选项，西里尔语 langtag 应该在拉丁语 langtag 之前，以使 SVG 1.1 switch 处理选择西里尔文脚本。 （MediaWiki 开始使用适当的语言标签；参见 Phab:T117845。）

中文比较复杂。 zh 是引用所有中国方言（例如，普通话或粤语）的宏语言子标签。 可以使用 zh-cmn 指定普通话，但 IETF 注册表[2] 更喜欢使用 cmn。 同样，IETF 更喜欢使用 yue 作为粤语，而不是 zh-yue。 可以指定中文文字：Hans为简体，Hant为繁体。 中文使用哪些语言标签尚不清楚。 一个简单的方法就是使用 zh-Hans 或 zh-Hant 来指定脚本（IETF 注册表将两者标记为“冗余”但不提供首选替代方案）。 另一种方法是指定方言和脚本，例如 cmn-Hans 或 cmn-Hant。 可以附加区域语言标签：cmn-Hans-CN（中国使用的简体普通话）。

对于 MediaWiki，塞尔维亚语页面有一个共同的来源，可以用西里尔文字或拉丁文字呈现。 同样，中文页面有一个共同的来源，可以用 Hans 或 Hant 呈现。 理想情况下，中国读者可以选择汉字，文章中的所有图像也将以汉字呈现。 期望的效果类似于

  • [[File:xyz.svg|lang=zh-hant|...]] 用于 zh-Hant 阅读器和
  • [[File:xyz.svg|lang=zh-hans|...]] 用于 zh-Hans 阅读器。

目前尚不清楚这是否可以或如何在 MediaWiki 中完成。

Large attributes

The maximum size of an attribute or text node of an SVG in MediaWiki is 10 MB. This means an embedded raster image cannot exceed 6.9 MiB in size. Using embedded raster images is discouraged.

为维基共享资源创建SVG图像

你可以用来创建SVG图像的程序列在了后边的§ 编辑器章节。你也可以选择直接使用任何文本编辑器或IDE编写SVG代码。

以下各节解释SVG的特定功能。

上传之前：验证并检查图像外观

验证

尽管维基共享资源并未有硬性要求，不过最好是上传前用万维网联盟（W3C）的XML验证器（https://validator.w3.org）运行一下你的程序。验证器可以找到SVG文件中存在的于不同平台渲染出错的问题。例如，其会对flowText元素的使用报错，前者并非标准，也很少受到支持。不过验证文件通常不能证明重新上传是合理的，[3]对于例外情况，请见优化已上传的SVG。

如果SVG文件有文档类型声明，验证器会使用它的文件类型描述（DTD）检查语法。如果没有文档类型声明（既不要求也不推荐），[4][5]验证程序可能会检查文件是否为格式正确的XML，但是它也可能意识到该文件是SVG，并通过将文件传递给nu验证器来执行非DTD验证。 在W3C验证器网页中，我们选择以SVG 1.1来验证文件。（在即将发布的SVG 2草案中将会移除对SVG DTD的引用）[6]

如果SVG文档中存在其他命名空间，验证器会报错。许多工具如Adobe Illustrator和Inkscape，都将节点插入到其他命名空间中。

通用前缀 命名空間 目的
cc http://creativecommons.org/ns# 权限和许可
cdml http://www.freesoftware.fsf.org/bkchem/cdml 化学图表
dc http://purl.org/dc/elements/1.1/ 元数据
i http://ns.adobe.com/AdobeIllustrator/10.0/ Adobe Illustrator
inkscape http://www.inkscape.org/namespaces/inkscape Inkscape
its http://www.w3.org/2005/11/its Internationalization Tag Set（ITS）
rdf http://www.w3.org/1999/02/22-rdf-syntax-ns# 资源描述格式
serif http://www.serif.com/ Serif Affinity (used for object names that couldn't be stored in the standard id attribute because of unsuitable characters like space)
sodipodi http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd 图形
svg http://www.w3.org/2000/svg SVG
xlink http://www.w3.org/1999/xlink XML链接语言

如果为 W3C 验证器提供了一个文件，该文件使用适当的 Content-Type HTTP header，那么该文件将被验证为 SVG 1.1+XHTML+MathML 3.0（UI 下拉框中不可用的选项）。 该验证由第二个更现代的验证器 nu Validator (https://validator.w3.org/nu) 完成。 此外，验证不会为 rdf 命名空间元素树发出错误，并将使用模式检查 inkscape 和 sodipodi 命名空间。 SVG 1.1+XHTML+MathML 3.0验证由 {{ValidSVG}} 使用。

其他名称空间仍会导致验证错误。 可以使用 nsfilter 参数告诉 W3C nu 验证器抑制有关其他命名空间的错误。[7]

此外，非 SVG 1.1 属性将产生验证错误。 SVG 2.0 草案允许用户像 HTML 5.0 一样包含任意 data-* 属性，但 W3C 验证器会抱怨它们。

参见§ 标记SVG文件一节了解如何标记有动画效果的SVG文件。

图片外观

不同的软件程序和不同的浏览器平台可能会以略有不同的方式呈现完全相同的 SVG 文件。 您在矢量图像编辑器中查看最终图像的方式可能不会反映该图像上传到 Commons 并被其他人查看后的外观。 此外，在维基百科文章中使用时，所有 SVG 图像都会自动转换为 PNG 文件，这也可能会影响最终图像的外观。 作为前者的示例，在包含一系列非常精细的笔画的图像中，这些笔画在编辑器中看起来可能比将图像转换为 SVG 并在 Web 浏览器中查看时更粗、更粗。 那些创建 SVG 文件的人应该考虑将他们的作品保存为 SVG 格式，然后使用两个或三个不同的浏览器打开同一图像以验证它是否按预期呈现。 也可以通过在其他图像编辑程序中打开文件来进行类似的检查。

要预览 SVG 如何在 Commons 上呈现为 PNG，请转到 Commons SVG Checker。

同一文件根据上下文呈现不同的原因是这些上下文（浏览器或程序）如何解释文件的 SVG 代码并使用该代码生成图像的结果。 目标是创建一个“最小公分母”的 SVG，无论使用什么浏览器打开它都能正确呈现，并且永远不要假设您自己的图像编辑程序向您展示图像对其他观众的真实外观。 在 Web 浏览器（而不是矢量图形编辑器）中预览 SVG 可以揭示一些问题。 它有时有助于调整和调整 SVG 代码，尤其是与 DOM Inspector 工具结合使用时。

此外，某些程序允许您将基于光栅的组件插入到您的文件中，而不会警告您如果文件被转换为 SVG，这些组件将不会同时转换为矢量，这意味着您可能需要非常小心过滤器的种类 和效果包含在图像中，并且在将 SVG 上传到 Commons 之前应该检查图像中是否有任何无关的嵌入“链接”。 如何做到这一点因程序而异。

但是，如果您使用的是 Adobe Illustrator，以下示例会导致插画师将路径转换为光栅组件：

  • 应用于任何填充的任何图案，包括自动包含在 Illustrator 中的图案。 有时，您可以通过自己将使用过的任何图案转换为光栅，然后使用图像--> 跟踪功能将它们转换回矢量来解决此问题。
  • 包含不止一个 Illustrator 的“效果”的任何路径——例如，鱼眼扭曲和徒手扭曲。插画师无法在任何单个路径的“外观”菜单中处理其中两个，并且会将它们栅格化。
  • 任何已被包络失真改变的路径。 有时您可以像解决上述模式问题一样解决这些问题，但结果通常令人失望。
  • 在“效果”菜单下已指定光栅效果的任何路径。 要将它们保留为矢量，您可能只需要撤消此效果。
  • Illustrator 允许用户以三种方式将渐变应用到笔画：在笔画内渐变、沿笔画渐变和跨笔画渐变。 然而，只有第一个，即笔画内的渐变，由等效的 SVG 代码支持； 当图像以 SVG 格式保存时，任何包含沿着或跨越它们的渐变的笔划都将转换为光栅。

这些只是导致插画师在需要矢量时生成光栅的一些示例。 这些路径越简单，插画师就越有可能将它们保留为矢量。

：有关如何检查 MediaWiki 的 SVG 文件的更多信息，请参阅 § SVG 文件在 MediaWiki 中的工作原理。

文档声明

<?xml version="1.0" encoding="UTF-8"?>
<svg
 xmlns="http://www.w3.org/2000/svg"
 xmlns:xlink="http://www.w3.org/1999/xlink"
 version="1.1"
 viewBox="0 0 400 300"
>

每个 SVG 文件的源代码应该?以 XML 处理指令开头。[8] XML处理指令指定XML的版本和字符集。[9] W3C坚持字符编码声明应该?使用,[10]（万维网联盟的验证器 只对不存在这种情况提出警告）。 创建或编辑 SVG 文件的软件应提供选择字符编码的选项。 UTF-8 是国际化的推荐?，而不是 UTF-8 以外的 ANSI 或 Unicode 编码。 当在浏览器中打开维基媒体服务器上的 SVG 源文件时，缺少 XML 声明将导致轻微的混淆：将显示原始 XML 代码而不是渲染成图像。 如果您将源 SVG 文件下载到您的设备并在本地打开它，这不是问题。

不需要带有 DTD 的 DOCTYPE 声明，官方不建议使用 DTD，[5] 但也不建议不要使用 DTD。 SVG 1.0 和 SVG 1.1 有 DTD 规范，但 SVG 2.0 没有。 SVG DTD 将验证 SVG，但 DTD 不知道任何扩展。 因此，DTD 验证器会将 RDF 元数据以及 Inkscape 包含在其 SVG 输出中的附加元素和属性列为错误。 维基媒体服务器还限制 DTD 的内部子集中可以包含的内容，因此不再可能扩展 SVG DTD 以包含其他元素和属性。

svg 根元素应该跟在后面。 它必须?为 SVG 指定 XML 命名空间，xmlns="http://www.w3.org/2000/svg";[11] 如果没有 SVG 命名空间，SVG 图像将不会呈现。 （默认名称空间由 xmlns 指定。）其他名称空间可能包含在 svg 元素中。 例如，如果文件使用链接，[12] 那么应该声明xlink 命名空间xmlns:xlink="http://www.w3.org/1999/xlink"。 包含 SVG version 编号应该?（通常为 1.1）。 软件通常提供这些名称空间声明，并且可能包括其他名称空间。

width 和 height 属性的默认值是 "100%"，这些默认值将允许自动缩放。 指定 width="400px" 的图像声明它希望以 400 像素的大小显示，而不是整齐地填充其容器。 不幸的是，许多软件工具为这些属性指定了固定大小。 svg 元素应该指定一个 viewBox[13] 属性。 视图框指定图像的显示部分； 视图框被平移和缩放以适合容器的宽度和高度。

位图

SVG文件中的位图图像会有一些有价值的用途，比如注解照片（例如，在解剖图照片中标注部位）。然而，SVG文件中多数位图都没有必要使用，可以重画或转为矢量图将其换掉。如果出于某种原因，位图是最好的解决方案，那就应当将其包含在SVG文件中；但是，如果生成的矢量图总体上更好或更有意义，则应将其重新绘制为矢量图。而且，其他浏览到这张图像的共享资源编者可能会决定给包含不受欢迎的基于栅格元素的SVG图像添上{{BadSVG}}标记。

在SVG文件中使用位图时还需三思，可以考虑将它们转换或者重画为矢量图再将它们合并到图像中，而非直接将位图包含其中。可在讨论页进一步讨论这个话题。如果你决定使用位图图像，请确保使用“嵌入”而非“链接”图像，否则其将无法渲染。

动画

SVG图像也可以动，但由于维基媒体项目中，SVG被转化为PNG栅格格式使用，因此只有浏览器加载了SVG文件之后才会有动画效果。在条目页面中，需要单击图像到达File:页面，再点开图片以加载SVG。

在过去，让SVG具有动画效果的方法是使用SMIL。最近，CS也支持了动画效果。

各浏览器对SMIL的支持正在不断减少。Internet Explorer不支持SMIL；2015年，谷歌不再推荐使用，并有可能在未来将其从Google Chrome浏览器中完全删除。[14]截至2018年7月，除了Internet Explorer、Edge和Opera，多数浏览器均支持SVG SMIL动画。[15]

参见§ 标记SVG文件一节了解如何标记有动画效果的SVG文件。

标题

The title element right under the SVG element serves as the title name of the SVG image itself, but it can be also applied further inside of the descendant elements within the SVG image. Most modern desktop browsers render these titles into popup tooltips which help readers to identify the meaning of the object on mouse-hover even if there is text label by the object.

Similarly, title can also be applied on text too for collapsing message but it may be a good idea to give some hint of the existence of the title element by using text decoration like underline. XML comment is more suitable for technical information which should not be displayed to the reader normally but other users who may edit the SVG source code.

Currently most mobile browsers can not display any title content innately except for the one right under the SVG element because there is no equivalent of hovering the pointer on mobile devices. 

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 50 50">
	<title><span lang="en" dir="ltr" class="mw-content-ltr">Title of the whole SVG image</span></title>
	<g id="shapes">
		<title><span lang="en" dir="ltr" class="mw-content-ltr">Title of the "shapes" group</span></title>
		<rect x="0" y="0" width="10" height="20" fill="#f00">
			<title><span lang="en" dir="ltr" class="mw-content-ltr">Title of the rectangle</span></title><!--XML comment-->
		</rect>
		<circle cx="5" cy="5" r="3" fill="#0f0"/>
		<text x="2" y="30" text-decoration="underline"><span lang="en" dir="ltr" class="mw-content-ltr">Text</span>
			<title><span lang="en" dir="ltr" class="mw-content-ltr">Title of the text</span></title>
		</text>
	</g>
</svg>

被禁用的元素与脚本

出于安全原因，MediaWiki并不接受SVG文件内嵌以下的模式： 

<!-- not whitelisted namespaces -->
xmlns:d="http://www.w3.org/2000/02/svg/testsuite/description/"
xmlns="http://www.w3.org/1999/xhtml"
xmlns="http://www.example.org/notsvg"
xmlns="http://example.org/notsvg"
xmlns:bd="http://example.org/ExampleBusinessData"
<!--no external content-->
xlink:href="../resources/SVGFreeSans.svg#ascii"
xlink:href="animate-elem-09-t.svg"
xlink:href="url(#testPattern)"
<image xlink:href="http://example.org/image.jpg"/>
<d:testDescription href="http://www.w3.org/TR/SVG11/styling.html#StylingWithCSS">
<image xlink:href="data:image/svg+xml;base64,"/>
<!-- attributeName -->
<set attributeName="xlink:href"/>
<animate attributeName="xlink:href"/>
<set xlink:href='#s'/>
<set attributeName='xlink:href'/>
<!-- css -->
@import
url("../images/selector-types-visibility-hidden.css")
url(woffs/embeded-text-text-05.woff)
<!-- scripts -->
<script></script>
<!-- interactive -->
onactivate=""
onbegin=""
onclick=""
onend=""
onfocusin=""
onfocusout=""
onload=""
onmousedown=""
onmousemove=""
onmouseout=""
onmouseover=""
onmouseup=""

To sanitize problematic svg files, you can use https://svgworkaroundbot.toolforge.org/ (enable sanitize potentially dangerous commands), more details can be found at User:JoKalliauer/IllegalSVGPattern.

Due to limited abilities, the XML-Parser does not recognize and block the following patterns: 

<!--ATTLIST-->
<!DOCTYPE svg [
<!ATTLIST bar id ID #REQUIRED>
]>
<!--ENTITY with more than one element-->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1 Basic//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-basic.dtd" [
  <!ENTITY Smile "
    <rect x='.5' y='.5' width='29' height='39' fill='black' stroke='orange' stroke-width='2'/>
    <g transform='translate(0, 5)'>
      <circle cx='15' cy='15' r='10' fill='yellow'/>
      <circle cx='12' cy='12' r='1.5' fill='black'/>
      <circle cx='17' cy='12' r='1.5' fill='black'/>
      <path d='M 10 19 L 15 23 20 19' stroke='black' stroke-width='2'/>
    </g>
  ">
  <!ENTITY Viewport1 "<rect x='.5' y='.5' width='49' height='29' fill='none' stroke='blue'/>">
  <!ENTITY Viewport2 "<rect x='.5' y='.5' width='29' height='59' fill='none' stroke='blue'/>">
]>

外部文件

在保存SVG图片的最终版本之前，你应当移除对用于制作SVG的其他文件的所有引用（这就是“链接”的含义）；如果这些引用遗留在SVG文本中，渲染时会因为找不到外部文件而失败。维基媒体屏蔽了此类上传，因此无法再上传它们。

清理

删除或“清空”所有未使用的定义（def）也是不错的想法，因为它们会无谓地增加文件体积（除非进一步的编辑还将用到它们，例如作为底板）。

有三个通用的优化程序：scour、svgcleaner和svgo，但请注意，这三个优化程序都有许多打开的错误，并且不再积极开发，它们的使用方法请见《使用优化程序》

但请注意清理工作是具有争议的，且通常是所不希望的，参见《什么时候优化/验证文件是所不希望的？》获得更多细节与原因。清理或验证并不能证明重新上传是合理的[16]。不合规范的元素和属性通常是正确渲染的必要条件，因此不应删除[17]。

纯SVG、压缩的SVG，通用规范

Inkscape和其他程序也允许用户将文件保存为SVGZ格式（压缩的二进制SVG）。该格式不受共享资源支持，任何上传至此的图像都不应当采用。这类图像无法被上传。

请注意在Adobe Illustrator和Inkscape中保存文件的选项不同，参见Help:Inkscape#Inkscape_SVG_vs._Plain_SVG和Help:Illustrator#How_to_save_as_an_Illustrator_SVG。 在Inkscape中有三种可选的SVG格式：“Inkscape SVG”、“纯 SVG”和“优化的 SVG”。若要在Inkscape中再次编辑文件，Inkscape SVG是的最佳文件格式，否则诸如图层或网格之类的信息将被移除，这类图像应当以{{Created with Inkscape|IMPORTANT=yes}}标记表面它们不应当再优化。纯SVG的渲染效果与Inkscape SVG相同，但文件体积要小一些。优化的SVG使用了名为scour的优化程序，它可以进一步压缩文件体积，并为librsvg的漏洞（如phab:T217990[18]）提供了一些解决方法。

字体、文字

Shortcut

维基媒体服务器上安装的诸多自由字体可以使用<text>标签来呈现。你可以在元维基上的渲染样例或原始列表中找到它们。但是Web字体完全不受支持。一些字体的常规字形不可用，而只支持黑体或其他（如斜体）；可以考虑使用替代字体如Liberation（注：不适用于中文）。请考虑使用这些字体而非将文字转化为路径，原因如下：

  • 保存为字体而非路径文字可以显著降低文件总体大小，尤其在图像中包含大量文本的情况下。
  • 其他编者可以无需重绘全部文本，即可修正图像中的文字或语法错误。
  • 文本可以轻松地被翻译成其他语言，省去贡献者本地化的时候再次放置所有的文本标签的麻烦，这是很重要的品质，因为维基共享资源是一个多语言项目。路径文字需要更多的翻译工作。另见Template:Translate。
  • 文本易于被搜索引擎找到，而路径轮廓文字可能无法被后者识别。

此外，如果字体被转化为路径文字，若没有可接受的自由授权，则可能会出现版权问题（例如矢量图像为字体的衍生作品）。另见：WP:公有領域#字体。

那些不应当将文字转化为路径图形的图像可能会使用{{Path text SVG}}标记，如要链接一个SVG文件的文本可修改（我们一直说的“文本”或“字体”）与文本不可修改（例如基于路径）的版本，可使用{{Vector text versions|…}}。

Demonstration of the basic steps of preserving the text before converting to path in Inkscape so the text can remain selectable (when opened in real-time in browser) and searchable (by search engine like Google).

If you still insist converting text to path for reasons like the lack of support of textPath function or rare glyph which is not present in most typefaces, you should duplicate the raw text group to overlap the converted text and add the attribute fill-opacity="0" stroke-opacity="0" to this group in order to hide the raw text. This way the text in the original SVG file can still be searched, clicked and highlighted by readers manually. opacity="0" may lead to some misunderstanding because it will make the highlight invisible while still selectable. display="none" prevents readers from searching the text without accessing the source code.

Converting text to outline (path) before exporting SVG is particularly popular among Adobe Illustrator users because the vector graphic software does not convert text-align attribute to text-anchor and the fallback fonts on Wikimedia have different font metrics than the chosen font by the image contributor. This leads to incorrect text positioning and encourages users to ignore the benefits of maintaining raw text in the vector file.

<span id="Not_displayed_text_(Flowed_Text_bug)_">

文本未能显示（浮动文字BUG）

See also: § Line wrap。

Inkscape supports a feature known as "Flowed Text" which automatically wraps text to fit into the bounds of a given text box. Unfortunately this feature is part of SVG Tiny 1.2, which nobody supports. Its usage will almost certainly result in compatibility problems.[19] On Wikipedia, a flowed text box does not render at all (phab:T43424 - depending on font size and color).

[20]

为避免Inkscape中的这一问题：

  • 最简单的解决方法是只用单击而非拖动来以Inkscape的文字工具创建文本。（相较而言，按住并拖动鼠标来绘制文本框时，你这是特意告诉Inkscape使用“浮动文本”。）

不过也有一些简单的方式来解决这个问题：

  • 如果已经创建了浮动文本框，你可以使用文字→转换为文字来将其转化为一般的文本[21]。（但之后请检查文本对齐，在约15%的案例中[22]，其转换了文本但是改变了文字对齐[23]。）
  • 对于只由一行文字组成的浮动文本（超过九成的案列），你可以使用任何文本编辑器将浮动区域替换为<text x=".." y="..">标签（矩形的x、y坐标），从而将其转化为简单的文本（可生成与Inkscape完全相同的效果）。在User:JoKalliauer/RepairFlowRoot#replace_the_flow-text_by_<text>_using_(Text-Editor)你也可以找到自动字符串编辑脚本[24]帮你完成这一工作。

如果你意外创建了空的浮动文本框（例如未包含文本的），其在Inkscape中无法看到或选中，但在维基百科中仍会显示为一个黑色矩形。如要删除它，有一些可能的方式：

  • 使用Inkscape内建的XML编辑器（编辑 → XML 编辑器）删除所有的浮动文本框（树形视图中所有名为<svg:flowRoot id="flowRootXXXX">的节点）。
  • 使用简单的文本编辑器（如Notepad）搜索文字"flowRoot"。通过移除XML开始标签（<flowRoot ...>）、结束标签（</flowRoot>）以及对应两个标签间的所有文本，来删除浮动文本框。[25]
  • 如果只是隐藏不可见的矩形，你可以添加 fill-opacity="0"[26][27]到<rect … fill-opacity="0"/>标签（或<path d="…" fill-opacity="0">标签）中。

文本转换限制

SVG原始文本渲染与转换为路径文本的比较

Font scaling currently does not work as expected if horizontal and vertical scales (according to the effective transform matrix) are not equal (the horizontal stretch will be ignored: only the font height, computed from the matrix is currently honored); this can prevent the correct rendering in narrow/condensed or width-extended styles from another font, with text taking unexpected width and flowing out of the expected box (the alternative is to select an alternate free font family which is already narrowed/condensed).

Text is guaranteed to be misplaced (and in some case, ugly kerning) if the resolution of the PNG render is not the same as the native dimension defined by the SVG file itself regardless of how "regular" the scaling multiplier is (e.g. 0.5, 2 or 4) (phab:T36947).[28] In any case, do not use extremely small (>10px) or large font-size and then scale the text or the whole image to your desirable size. Always begin with a reasonable font-size (unfortunately a size around 80px is preferable).[29]

Beware also with font metrics differences: an SVG file may look good when rendered directly in a SVG-capable (all modern) browser under Windows or Mac OS (which can use common, but non free fonts such as Courier or Courier New), but will look other when restricted to the list of free fonts currently supported by the MediaWiki’s SVG-to-PNG renderer (or when viewed under OSes like free distributions of Linux), see also section "Font substitution and fallback fonts".

The attribute textLength isn't fully supported and could not rendered correctly. See phab:T15387.[30]

书写模式限制

中文图表可能适合从上到下的书写模式，但事实上使用特定字体时这样会出现异常……

RSVG认可书写模式（writing-mode）属性，但无法正确显示。对属性给定任何非默认值（除了从左向右之外任何书写模式），当使用某些字体渲染时，所有字符都会堆到一块（phab:T65236）。例如，生成垂直文本的常用方法就不起作用： 

<text x="50" y="50" writing-mode="tb-lr" font-size="15px">東涌綫</text>

如果确实需要替代的书写模式（例如亚洲语言的从上到下模式），请单独对齐所有字符，而不要依赖使用这个属性：


字体替换和备用字体

How the fallback-fonts are rendered.

SVG font specifications may use a specific font family such as Arial or Times New Roman. Such a font specification usually means the user agent must have access to the font file with that name. Unfortunately, many fonts are proprietary and are not available on all operating systems. For example, not all operating systems have the proprietary Arial font. If the specific font family is not available, then some default font will be used; the default font may have a much different appearance. For the user agent librsvg, the default font is Liberation Serif.

Many user agents have a font substitution table that allows the user agent to substitute a font family that is close. To improve the font matching, SVG allows the font-family to be a list of font family names; the user agent will use the first font family that it recognizes. The graphic artist might list similar Microsoft, Apple, and Unix fonts to improve the chance of the user agent having the desired font. Additionally, SVG supports the CSS generic font family specification.[31][32] That means most SVG user agents should support the generic font families of serif, sans-serif, cursive, fantasy, and monospace. It is good practice to use a generic font family as the last entry in the font family list. For the librsvg on Commons:

  • sans-serif maps to DejaVu Sans
  • serif maps to DejaVu Serif
  • cursive maps to the uninteresting DejaVu Sans
  • fantasy maps to the uninteresting DejaVu Sans
  • monospace maps to DejaVu Sans Mono

On Commons, librsvg has the fonts listed in m:SVG fonts#Latin (basic) fonts comparison. Using just those fonts will get good results in Wikipedia articles that display their images using librsvg, but graphic artists should also be aware that SVG files may be displayed by other user agents. Consequently, it is best to use common font families (such as Arial) or a list of font families that ends with a generic font family (such as Trebuchet, sans-serif).

The font metrics for generic font families such as sans-serif will likely vary widely on different user agents. In graphic illustrations metric exact text elements are often important and Arial can be seen as de-facto standard for such a feature. Adding both Arial and sans-serif as fallback fonts will help the SVG to be displayed with best effort on machines that do not have or substitute Arial. To make the SVG file independent of Arial, change all occurrences of font-family: Arial to font-family: 'Liberation Sans', Arial, sans-serif.

If you are using non-Western characters, you should define those typefaces preceding Liberation Sans. For example, if your text contains Chinese characters, font-family definition should be: ‘ Liberation Sans, Arial, WenQuanYi Zen Hei, SimHei, sans-serif’. In this case, western fonts are put in the front because the quality of Western characters in Chinese fonts is often low, and we want to use the higher-quality ones first.

  • Inkscape begins supporting fallback fonts from version 0.91.
  • Adobe Illustrator version 18.1.1 or earlier (probably in later versions as well) does not support fallback fonts, so the SVG file has to be manually updated in a text editor after it is saved.
desired font Wiki-fallback possible fallback definition that will look similar
(works on Wikimedia/Windows/Linux/Mac)
[-no definition-] Liberation Serif
serif DejaVu Serif[33] font-family="serif"
Times New Roman Liberation Serif font-family="Liberation Serif,Times New Roman,Times,Times-Roman,serif"
sans-serif DejaVu Sans[33] font-family="sans-serif"
Arial Liberation Sans font-family="Liberation Sans,Arial,Nimbus Sans L,Helvetica,sans-serif"
Helvetica Nimbus Sans L font-family="Nimbus Sans L,Ubuntu,Liberation Sans,Helvetica,Arial,sans-serif"
Calibri font-family="Liberation Sans,Carlito,Calibri,Segoe UI,Myriad,UnDotum,Optima,Tahoma,Arial,sans-serif"
monospace DejaVu Sans Mono font-family="monospace"
Courier New Liberation Mono font-family="Liberation Mono,Courier New,Courier,monospace"
[-everything unknown-] DejaVu Sans


Layout with text and tspan elements

Although you can use only the text element to render simple text in the image, the tspan element can be useful to handle text which the position of the word is dependent to the other.[34] A tspan element must be nested within the text element, and then more tspan can be nested within this tspan, all styling defined in the parent text element will be inherited by its child tspan elements. For example: 

<g font-size="12px">
  <text font-weight="bold" x="10" y="10"><span lang="en" dir="ltr" class="mw-content-ltr">Wikipedia hosts knowledge</span>
    <tspan fill="blue"> <div lang="en" dir="ltr" class="mw-content-ltr">
contributed
      <tspan text-anchor="end" dy="12"> by volunteers</tspan>
</div>
    </tspan>
  </text>
  <text font-style="italic" x="15" y="30"><span lang="en" dir="ltr" class="mw-content-ltr">Wikimedia Commons hosts free media files for all sister projects.</span></text>
</g>

The primarily difference with the "g nesting text" structure is that few important text layout behaviors are exclusive to tspan: When multiple text elements are lined up consecutively, they still position themselves independently; if multiple tspan elements are lined up consecutively but the second and subsequent tspan elements are not given absolute x coordinate, text of these tspan elements will line up horizontally right next to the end of the character of prior tspan in the same text element.

However, tspan should be used sparingly even if you define the absolute x coordinate for every single tspan element in the text element. This is because under the default xml:space definition, any line break (within text or tspan) with an extra trailing white-space is converted to a blank space character automatically.[35] If there happens to be multiple consecutive line breaks, they are treated as one space still. This would not be a problem if the line break is followed by a tspan element with absolute x coordinate and is align to left (text-anchor=start, the default value). If xml:space is given the 'preserve' value, librsvg will translate the indent to a long white tab character equal to 8 space characters. Because the auto-formatting or re-indentation (indent style) of most XML editors creates indent for every new descendant XML tag automatically, use re-indentation carefully if your SVG file contains such usage of tspan.

The behaviors in different SVG renderers to this issue varies much and is usually inconsistent to the W3C specification (also the 'preserve' value of xml:space will be deprecated in SVG 2.[36]). The only problem with librsvg is that it never converts the line break alone into space no matter which value of xml:space is given if there is no trailing space or indent before the tspan tag. Except for librsvg, nearly all modern browsers always add the converted space character right after the preceding text, this is the reason why the end or middle values of text-anchor property always align the text 1 space leftward because the new line and/or the trailing tab or space after the closing tspan tag is converted to an unexpected space character.[37]

Re-indentation XML Code Result
Before 
<text>
  <tspan>O</tspan><tspan>n</tspan><tspan>e</tspan>
</text>
One
After 
<text>
  <tspan>O</tspan>
  <tspan>n</tspan>
  <tspan>e</tspan>
</text>
O n e

Inkscape is buggy to render tspan, for example, inheriting text-anchor property from the first tspan element incorrectly for the subsequent tspan elements even if the property is specifically given a value in all tspan elements.[38] In such case, simply revert the "text nestling tspan" structure to just "g nestling text". Inkscape also defaults to xml:space="preserve" to deal with space between tspan. If you are completely concern with how your SVG appears in Inkscape but prefer the default xml:space handling, use &#160; to replace each general space so it will not be hidden in Inkscape.

If you are generating an SVG using Adobe Illustrator, you will be given options to "Output fewer <tspan> elements" and "Use <textPath> element for Text on Path" during the save dialog. To maximize the consistency of the appearance of your font across browser platforms, you should place a check mark next to the former and make sure there is no check mark next to the latter. If you do not do this, the kerning of some of your letters may cause them to overlap (depending on your browser).

自动换行

SVG 1.1 未提供任何形式的自动换行（无论软回车还是硬回车）。所有的自动换行都需要手动重新放置text或tspan元素，x绝对坐标不变，更换新的y坐标。对于tspan元素，可以用dy属性设置下一行的y坐标。虽然textPath也可以处理相同的状况，[39]但其未被librsvg/维基媒体支持（phab:T11420）。

SVG 1.2 的一份草案确实解决了自动换行问题，但此方案很少受到支持。

SVG 2.0 草案也解决了自动换行的问题，但是截至2018年5月，Chrome、Firefox、Edge浏览器和librsvg都尚未支持。

Font styling class

Usually it is simply gratuitous use of the ‘style attribute’. To ease the process of updating font-family for every text or tspan elements, you can define the font CSS class(es) within ‘style element’ and apply the class property in elements like this: 

<style type="text/css">
text {font-size:12px; font-family:Liberation Sans, Arial, sans-serif} <!-- <span lang="en" dir="ltr" class="mw-content-ltr">General font styling</span> -->
.small {font-size:9px}
.special {fill:#f93500; font-weight:bold}
.title {font-size:14px; font-weight:bold; font-family:Liberation Serif, Times New Roman, serif}
.italic {font-style:italic}
</style>
<text class="title" x="10" y="20">Qridfs</text>
<text x="10" y="30">Rfnkl fgkj qljf fgk gskla</text>
<text class="small">
  <tspan x="15" y="40">Dfj fdmnkl</tspan>
  <tspan x="15" dy="12" class="italic">Akgfld fkdngf mna</tspan>
</text>
<text class="special" x="10" y="60">Tcjgh xlij qpfj</text>

CSS class defined in ‘style element’ can also be used for other SVG elements (e.g. g and path) despite the misleading type="text/css" attribute. Even if one particular style is defined once in the SVG, it is still advised to replace the style with class for a tidier layout of XML codes.

Contrary to popular belief the style attribute does not separate content from presentation, and unless you need to override properties set by a CSS selector, it is best to use the SVG formatting attributes instead (e.g. <path fill="#fff" stroke="none"/> instead of <path style="fill:#fff;stroke:none"/>).[40] However, if you need to override the element style defined in style element, you do need to employ style attribute. If you need to override the style for text element without style attribute, you can use a tspan element container to nest the text you need to override the style, presuming there is nothing predefined in style element for tspan element.

Note
  • phab:T68672 – CSS style element get ignored if the default value type="text/css" is omitted.
  • phab:T43423 – CSS child selectors are not supported by librsvg.
  • phab:T68551 – CSS classes on text elements get not inherited on child tspan elements. If you want this, you need to add a separate class for tspan as well, or use simply groups (but not in the text element as it Scour unfortunately does).

Text with background edge

Sometimes the text might be unreadable because the background color has low contrast with the font color or the pattern is too complicated that confuses the reader. This can be solved by duplicating the text in exactly the same position, but the back text rendered with stroke and the fore text without it like this: 

<text style="font-size:12px">
  <tspan x="10" y="20" style="stroke:white; stroke-width:3px; stroke-linejoin:round;"><span lang="en" dir="ltr" class="mw-content-ltr">Placeholder</span></tspan>
  <tspan x="10" y="20"><span lang="en" dir="ltr" class="mw-content-ltr">Placeholder</span></tspan>
</text>
  • "stroke-linejoin:round" is defined to avoid sharp corner of the text stroke.

The problem with applying stroke and fill to the same text element is that the stroke will be rendered over the main body of text, making it otherwise unreadable if the font is too small but requires a larger stroke to be distinguishable from the background.

SVG filters can be used to draw the text over a dilated version of the text. The filter first expands the text, sets the color of the expanded text, and then draws the original text over the dilated version. One filter can be defined, and that filter can be used by several text blocks: 

<filter id="textBack">
  <feMorphology in="SourceAlpha" operator="dilate" radius="1" result="bloom" />
  <feFlood flood-color="white" flood-opacity="1" result="flback"/>
  <feComposite in="flback" in2="bloom" operator="in" result="surround" />
  <feMerge>
    <feMergeNode in="surround" />
    <feMergeNode in="SourceGraphic" />
  </feMerge>
</filter>
<text x="10" y="50" filter="url(#textBack)">gibberish</text>
<text x="10" y="70" filter="url(#textBack)">more gibberish</text>

SVG filters can also be used to size an opaque rectangular background that surrounds the text. Using a filter is more robust than painting a rectangle and then painting the text on top of that rectangle. A fixed-size rectangle may not fit the font used for the text; the size of the rectangle would also need adjustment if the text changes. If the text is translated, for example, the rectangle may need to be changed. Using a filter automatically adjusts the size. 

<filter id="rectBack" x="-2%" y="0%" width="104%" height="100%">
  <feFlood flood-color="white" flood-opacity="1" result="rect"/>
  <feMerge>
    <feMergeNode in="rect" />
    <feMergeNode in="SourceGraphic" />
  </feMerge>
</filter>
<text x="10" y="50" filter="url(#rectBack)">gibberish</text>
<text x="10" y="70" filter="url(#rectBack)">more gibberish</text>

Outlining text can be done without filters by explicitly rendering the text twice. The first time, the text is rendered with a white stroke to set the outline. The white outline erodes the text. The text is rendered a second time, but this time the text is not stroked. Consequently, the characters are rendered full size (without erosion).

If you have lot of text that needs to be rendered with a stroke background, you can manually include the text within <g>, <text> and <tspan> elements. The <g> element which will be rendered underneath, apply the stroke, then <use> the text group of <text> element without a stroke and fill the font with contrasting color: 

<g style="stroke:white; stroke-width:3px; stroke-linejoin:round">
  <text id="text_group" style="font-size:12px">
    <tspan x="10" y="80"><span lang="en" dir="ltr" class="mw-content-ltr">Placeholder 1</span></tspan>
    <tspan x="10" y="95"><span lang="en" dir="ltr" class="mw-content-ltr">Placeholder 2</span></tspan>
  </text>
</g>
<use xlink:href="#text_group" style="fill:black; stroke:none"/>

W3C includes paint-order property in SVG 2.0 which allows the order to render the attributes of "fill", "stroke" and "markers" within one element arranged by the user manually, instead of following the default mandatory order.[41]

Mozilla Firefox also includes this attribute experimentally but it defaults to disable in the stable release until SVG 2.0 matures. This feature can be enabled in the about:config entries of Firefox.[42]

渐变色

火狐浏览器未能正确渲染的一个样例

Users of Inkscape version 0.46 may notice that images with "Fill gradients" display perfectly on Inkscape, but display "messed up" in Opera or Firefox browsers. One possible cause is that the last "stop" on a gradient has opacity set to 0. Inkscape appears to ignore this last stop, but both Firefox 3.0.6 and Opera 9.36 will render it as a white border in the filled object. Solutions are either remove the last stop (because it was probably created in error) or change the opacity (and colour) so that the image renders correctly in browsers.

Note that Inkscape adds a JavaScript polyfill to SVG images containing mesh gradients. Scripted SVG images cannot be uploaded to Wikimedia Commons, but removing the JavaScript code will break the gradients.

Users of Adobe Illustrator CS5, CS6, or CC and who also use Firefox may notice that an Illustrator "symbol" containing a gradient will render normally as a Commons PNG file but if the SVG file itself is opened in Firefox these symbols will appear vacant. Other browsers will have no difficulty— Google Chrome, even Internet Explorer will render Illustrator’s SVG symbol gradients correctly, but because of a known bug that the designers of Firefox have been aware of since 2005 (Mozilla’s Bugzilla bug 376027 and other reports that lead to it such as bug 353575) but have so far failed to adequately fix, Firefox will display such symbols as empty shapes (symbol strokes and symbol paths without gradients are unaffected).

Adobe Illustrator users should also note that any Illustrator "symbols" containing paths with both a gradient and a filter will be rendered as a PNG in Commons only within the first instance of the use of that symbol. Subsequent use of a symbol containing these paths will render the paths (though not the entire symbol) as blank (neither gradient nor filter nor fill nor stroke will be applied).

Blurring

Comparison of gaussian blur filter effect between Google Chrome and Wikimedia. (Source SVG file)

Wikimedia’s SVG renderer currently supports various filter effects, but some effects such as gaussian blur (feGaussianBlur) behave differently when the blurred object exceeds the edge of the actual image. The current version of RSVG will treat the cropped edge as the actual edge of the object to apply the effect (as if the object has applied clipPath before applying filter effect), creating an undesirable filter effect against the image edge.

文件尺寸

减小文件体积

如果文件太大，请通过以下方式来压缩、优化：

  • 使用特殊程序
    • [$url Scour——一个SVG清理工具]
    • Inkscape，另存为优化的svg格式
  • 手动编辑文件
  • 编写程序（脚本）创建文件并且：
    • 曲线使用更少的点
    • 绘制更少曲线


翻译

SVG文件可以直接翻译，也可以是多语言嵌入式翻译。更多信息请参见 Commons:Translation possible/了解更多.

转换为SVG

See also: Commons:Media for cleanup。

给出一个图像文件但格式不是SVG，有多种方法将其转换为SVG，见§ 转换器章节的程序。

注：对于由第三方进行矢量化的矢量图像，存在一个问题，即哪怕所描述的图像本身没有版权或是低于原创性门槛，矢量化代码自己也可能拥有版权。更多信息请参见§ 版权一节。

Generally, there are 3 ways to produce an SVG file, given an existing image:

  1. Regenerate it
  2. Convert it
  3. Create a new one

If you are unable to convert an image yourself, please add the tag {{Convert to SVG}} to flag that the image should be converted. Some images are not well-suited to SVG, notably continuous-tone images such as photographs. These generally should instead be stored as JPG.

Regenerate it

If the image was generated by a program (rather than drawn by hand) — for example, a chart from a spreadsheet — it may be possible to set the output format to SVG, rather than PNG or other format, and thus produce an SVG image from the same source. If possible, this is generally easiest.

Convert it

Many vector file formats can be easily converted to SVG simply by changing the format (repackaging the existing data), by using a converter program. This may be as simple as opening the file in a vector image editor and then saving it in SVG.

For raster (bitmap) graphics, this cannot be done because the image is a set of individual pixel values, not a set of strokes (vectors). For these images (notably PNG images), one can convert to SVG via "vectorization" or "tracing" — automatically generating a vector graphic from a raster image.

Many SVG editors have tracing functions, and dedicated converters exist. In Inkscape, this is done by the potrace program.[46][47] Concretely: open the bitmap (File → Open… (Ctrl-O)), then select Path → Trace Bitmap… (Shift-Alt-B). There are various options; after using, please delete the underlying bitmap, and consider simplifying the path to reduce the number of nodes (Ctrl-L).

Adobe Illustrator also allows for the conversion of bitmap images into vectors via its Image Trace function. Care must be taken when doing so that the resulting vector image is neither ponderously large (often the result of too much conversion fidelity with regard to color and shape) nor so simple that it loses faithfulness to the original image. Converted images almost always require some manual correction after conversion. As in Inkscape, the underlying bitmap should be removed after conversion is complete.

It should also be noted that when Illustrator converts one of its files into an SVG file, it tends to convert a number of shading effects such as "inner glow", "outer glow", and gradients applied along or across a path into undesirable raster images which it then embeds in the SVG image using links. Such embedded images can often be immediately detected by viewing the image in a web browser under high zoom where they will appear cloudy or have visibly jagged edges (neither of which is ever true of a correctly rendered vector image). As these effects were originally created without regard to the W3C consortium, Adobe does not offer and is never likely to have a solution to the problem.

In order to remove raster components from an Adobe Illustrator-generated SVG prior to uploading the image to Commons, the artist must first be able to identify where Illustrator has put them. This can be done in the following way:

First finish editing an image file and save in Illustrator’s AI format (*.AI), then save it again in SVG format. During the second Save dialogue, choose to "embed" the links (for now). Then close out the image (File=>Close or Ctrl+w). Next, open the SVG version back up again, click on "Window" from the right side of the top menu bar, and scroll down to "Links". This will open up a small window containing information about each of the links (if any) which currently exist in the SVG image (whether or not Illustrator produced them). You can click any of the entries in the top half of the window and then select the "Go to link" button located in about the middle of it-- this will take you to that particular raster so that you can identify it and either remove it or replace it with a non-raster based alternative.

Note that this SVG version of your image, when viewed in Illustrator, may look very different from the same SVG file you thought you had saved just a few minutes prior: this is because Illustrator has made a set of codes during the creation of that file which it then has difficulty reading (SVG is not an Illustrator-proprietary format, AI is, and so while Illustrator will never have difficulty correctly viewing an AI (Adobe Illustrator) file, it will sometimes struggle to correctly render an SVG, even one that it itself produced). Fortunately, even an SVG that looks confusing in Illustrator will usually at least appear to render correctly in most browsers (with the occasional and already noted exception of Firefox) and in Inkscape.

Create a new one

If an image cannot be regenerated or converted, the remaining option is to recreate it — draw a new SVG image, using the existing image as a model. This is manual and the most time-consuming option, but may ultimately yield the highest quality.

In all cases, it may prove useful to touch up the resulting image in an SVG editor — perhaps adding details which are hard or impossible to produce in the originating program, or simplifying or refining a complex conversion (such as simplifying a path described by 100 points to one described by 5 points, if extra points add unnecessary detail).

Once you have created an SVG image, upload it (under a new name), and tag the original raster image with {{Vector version available}}, but please do not delete the raster image or list it for deletion, as it still serves some purposes — see Commons:Superseded images policy for details.

上传与分类

上传至共享资源的每个SVG文件都应展明它是如何制作的：使用{{Inkscape}}、{{Adobe}}、{{HandSVG}}等模板进行标记。
在上传文件之前你应当检查其外观和有效性；使用共享资源SVG检查工具查验
如果您不确定或是想先了解librsvg如何渲染文件，请将其上传至Test.svg

图像描述

Uploading is described at Commons:初步教程/上传档案.

Make sure to fill out the {{Information}} box as fully as you can. Often, it’s a help when an image has a complete information box as this makes categorization by others easier and allows others to make translations.

See the § SVG software tags section for detailed information on a SVG media.

将SVG文件归类

SVG files
SVG by country
SVG by creator
SVG by language
SVG by source
SVG by subject
SVG by technical feature
Featured pictures on Wikimedia Commons - vector
Quality images - vector
Categories which should only contain SVG files
SVG cartoons
SVG coat of arms elements
SVG color gradient
SVG diagrams
SVG example images
SVG files generated by ChatGPT
SVG files with errors
SVG frames
SVG icons
SVG image placeholders
SVG line art
SVG military map symbols by contents
SVG OpenData RATP Indices
Perspective SVG
SVG pixel art
SVG posters
SVG printing art
Tux Paint SVG
SVG related to Wikipedia
Wikipedia 20 derivatives/svg

All SVG graphics should be sorted into the appropriate subcategory or subcategories of Category:SVG files. Please do not place images directly in the parent category as it will become overcrowded and useless (we have thousands and thousands of more than 100,000 SVG files).

Sort subcategories which rely not on subject but on technical aspects ("created with…", "animated", "valid", and so on) by '*' to keep them outside the alphabet listing.

The SVG categories tree

The main tree is Category:SVG, as a part of Category:Images → Category:Media types.

Concerning the creation of topical subcategories, it is unnecessary to rebuild the complete hierarchy tree of Category:Topics. Normally, it is enough to gather some topics into one. For instance, Category:SVG colors could contain all color-related SVG files of Category:Colors, so it’s pointless to create Category:SVG red, Category:SVG blue and so on. Maybe some subcategories will become useful later, but stay close to the existing topics tree, and do not put any SVG files only into a SVG category: Categories are primarily for finding media, not for hiding them. Do not over-categorize.

See 共享資源:分類 for general information.

Category naming conventions

Category names start with "SVG" followed by the topic in lowercase (unless it’s a proper noun). For example, a category containing SVG files related to chemistry would be called Category:SVG chemistry. There was no naming convention for a long time, thus you may see titles that do not match this format. These will be converted over time.

标记SVG文件

参见Category:SVG marker templates了解所有可用的SVG标记。
Other languages:
Transcluded from Commons:SVG marker templates

SVG software tags

You will find the complete up-to-date list at SVG created with ... templates
For the software used (Category:SVG graphics by software used):

 
This vector image was created with Adobe Illustrator.
 
This table was created with bin2svg.
 
This structural formula was created with ChemDraw.
 
This vector image was created with CorelDRAW.
 
This diagram was created with Dia.
 
This circuit diagram was created with the Electrical Symbols Library.
V
 
This vector image was created with Xfig and a Fig-to-SVG conversion tool.
 
This plot was created with Gnuplot.
 
The SVG code is valid.
 
This vector image was created with a text editor.
 
This vector image was created with Inkscape.
 
The SVG code is valid.
 
This vector image was created with Inkscape, and then manually edited
.
 
This vector image was created with MetaPost.
 
This vector image was created with Sodipodi.
 
This vector image was created with Scribus.
 
The SVG code is valid.
 
This vector image was created with a text editor.
 
This vector image was created with another SVG tool.
 
This vector image was created with an unknown SVG tool.
 
This vector image was created with Vim.
 
This vector image was extracted with Inkscape.


See #Software section for a list of programs.

SVG file tags

 
This image includes elements that have been taken or adapted from this file:
 Example.svg.
Translate this file This SVG file contains embedded text that can be translated into your language, using any capable SVG editor, text editor or the SVG Translate tool. For more information see: About translating SVG files.
This file is translated using SVG <switch> elements. All translations are stored in the same file! Learn more.

For most Wikipedia projects, you can embed the file normally (without a lang parameter). The Wikipedia will use its language if the SVG file supports that language. For example, the German Wikipedia will use German if the SVG file has German. To embed this file in a particular language use the lang parameter with the appropriate language code, e.g. [[Help:SVG/zh|lang=en]] for the English version. Do not specify a lang parameter if it is not needed. The parameter may prevent the use of a subsequent translation.

To translate the text into your language, you can use the SVG Translate tool. Alternatively, you can download the file to your computer, add your translations using whatever software you're familiar with, and re-upload it with the same name. You will find help in Graphics Lab if you're not sure how to do this.

This image is an animated SVG file. The .png preview above created by RSVG for use in Wikimedia is not animated and may be incomplete or incorrect. To see the animation, open the original file. It should run in any modern browser or viewer. Recent versions of Chrome, Firefox, Microsoft Edge, Safari, and Opera all support SVG animated with SMIL. Other SVG animations can be found at Category:Animated SVG files.
Templates:Animated SVG/I18n
العربية ∙ Boarisch ∙ বাংলা ∙ català ∙ čeština ∙ Deutsch ∙ Deutsch (Sie-Form) ∙ English ∙ español ∙ فارسی ∙ suomi ∙ français ∙ galego ∙ עברית ∙ हिन्दी ∙ magyar ∙ հայերեն ∙ íslenska ∙ italiano ∙ 日本語 ∙ 한국어 ∙ lietuvių ∙ македонски ∙ മലയാളം ∙ Plattdüütsch ∙ Nederlands ∙ occitan ∙ português ∙ português do Brasil ∙ русский ∙ sicilianu ∙ slovenščina ∙ svenska ∙ தமிழ் ∙ ไทย ∙ українська ∙ 中文 ∙ 中文（简体） ∙ 中文（繁體） ∙ +/−

.

  • SVG files containing JavaScript cannot be uploaded at present, but this template anticipates that possibility {{Scripted SVG}}.




SVG conversion tags

All Ba images in this gallery could be re-created using vector graphics as SVG files. This has several advantages; see Commons:Media for cleanup for more information. If an SVG form of this image is available, please upload it and afterwards replace this template with {{vector version available|new image name}}.

All images in this gallery could be re-created using vector graphics as SVG animation files. This has several advantages; see Commons:Media for cleanup for more information. If an SVG form of this image is available, please upload it and afterwards replace this template with {{vector version available|new image name}}.
  • To indicate that you are currently working on a vector version of a raster image you can tag it with {{Vector wip|1=~~~|time=~~~~~}}.
  • For SVG files using embedded bitmaps causing bad quality, use {{BadSVG}} and for rasters that have been superseded by a SVG file, use {{vector version available|File name.svg}}
This file has been superseded by Example.svg. It is recommended to use the other file. Please note that deleting superseded images requires consent.
 new file
Sorry, this SVG file is solely a source for re-utilization, editing or printing purposes. Please do not use this graphic within Wikipedia articles! MediaWiki isn't able to render this image correctly. Some details may be missing or look wrong. When you include the image in a Wikipedia or any other Wikimedia project site's page, you may want to use the other file, until the support increases.
Help:SVG/zh File:SMW Logo.SVG

Deutsch ∙ English ∙ español ∙ italiano ∙ 日本語 ∙ 한국어 ∙ македонски ∙ português do Brasil ∙ русский ∙ sicilianu ∙ slovenščina ∙ 简体中文 ∙ 繁體中文 ∙ +/−

{{{svgImageLabel}}}

{{{image alt}}} This SVG file is a generic template for creating new images. It contains embedded placeholder text using specific fonts that may not be available on Wikimedia Commons. This file is not intended to be embedded in a wiki page. Do not reupload this file with text converted to paths, even if the text appears unsightly in an image preview.
How to derive an image from this template
To create an image using this template:
  1. Download this SVG.
  2. Open the SVG in an SVG editor and change the wording and numbering.
  3. Convert all text to a path and save as a basic or plain SVG.
  4. Upload the new SVG to Wikimedia Commons.

SVG files in MediaWiki

How SVG files work in MediaWiki

When you upload your SVG to Commons (or any other MediaWiki wiki), the software automatically produces PNG thumbnails, embedded in the articles and the description page. If you download the image (usually by right mouse clicking on the image), you will get the PNG image. If you want the SVG file you must save the link to the image instead of the image itself. This works (by right mouse clicking on the link under the image) only on the description page of the image, not on the thumbnail in the category page.

MediaWiki uses librsvg to convert SVG files to PNG files for display (SVG rendering), it has some long and well-known bugs that should be fixed, so you might want to check your file with that program before uploading. You can test the SVG with SVG Check for accurate PNG render preview and W3 XML validator for possible code errors or incompatibility of SVG elements or attributes.

Further information: MediaWiki SVG limitations.

Scaling SVG files via MediaWiki

What this means: Say you want to produce a large version of your SVG for detailed maps, or using in-bitmap software like gimp, or calligraphy printed out one character per page, or something like that. You need to force MediaWiki to produce a huge PNG thumbnail, by using https://commons.wikimedia.org/w/thumb.php?f=Foo.svg&w=1000 or by doing something like [[File:Foo.svg|1000px]] in the sandbox or your talk page or somewhere else unimportant. Printing this giant PNG will look much better than if you try to scale up one of the default thumbnails! Of course, you can also use for-printing SVG software like Inkscape but sometimes that shows something other than what’s shown on-screen (black background, other fonts, etc.).

常见问题

我的SVG图像选择什么尺寸更为合理？
The absolute size of the document does not matter much, since that only affects how it is displayed when viewed by itself. The file size does not depend on the document dimensions. The image can be stretched or compressed as much as a user wants, without changing quality, or file size. With that in mind, the recommended image height is around 400–600 pixels. When a user views the full size image, a width of 600–800 pixels gives them a good close-up view, while still allowing them to fit the entire image on their screen without having to zoom in or out: while 9 × 9 pixels are too tiny, 3000 × 2000 are too large. The length of the shorter side of the PNG rendered by librsvg on Wikimedia is capped at 4096 px (i.e. if width is shorter than height, the length cap of 4096 px will be applied on the width and the height will be scaled accordingly, or vice versa), so there is no point to upload SVG image which requires that much of resolution to be readable when some of the text will be too tiny after scaling down to preview size. Smallest font in SVG image should be readable in 2000-px width at least, the largest recommended rendering resolution in the image description page. Otherwise, a raster version should be provided alongside the SVG source.
如何在我的电脑上将SVG文件转换为光栅格式？
For SVG file which behaves incorrectly in graphic software such as Inkscape, you can simply upload the SVG to Wikimedia then save the link which provides PNG render in other widths in the file description page. You can adjust the number-px in the link to generate the desirable width of the PNG render. For image with any side larger than 4096 px, you may use any conversion tools such as RSVG-Convert with the only difference being the lack of anti-aliasing. If you want the raster image looks smoother, you may convert the SVG to PDF in RSVG-Convert then convert the PDF to raster version in Photoshop (Inkscape still presents some font problem when opening PDF). Another option without uploading SVG source to Wikimedia (due to non-free license) is to use the SVG preview on Wikimedia Toolforge which does not have the maximum side cap, although certain rendering results such as font may differ slightly.
为什么我的图像未能渲染？
This might be due to a number of reasons. Most often it is due to a reference to an external file, a leftover from tracing a bitmap, perhaps. (The rendering stops as the website tries to find this other file) To solve this problem, in your editor, make sure to remove any references to other files before saving the final version. If it is necessary to use bitmaps you can use in Inkscape the function to embedding all images (Effects menu → Images → Embed All Images). It’s also possible that you use special effects like blurring. Unfortunately it’s currently not well supported by librsvg. See also § Plain SVG, compressed SVG, generic specifications hereinbefore.
我可以在哪里得到关于SVG图像的更多帮助？
Try Commons:Graphic Lab if you have a problem with an individual image. Commons:Graphics village pump can be useful for SVG discussion (as well as graphics in general). Often SVG enthusiasts will be around on those pages, and are more than willing to help.
你是怎么在Inkscape中修改图像尺寸的？
The document size starts out with an A4 page. To make this larger or smaller, create a rectangle with the dimensions you desire the document to be, and select it with the arrow tool. Then select File → Document Properties, and under Custom Size, choose Fit page to selection, and click OK. You can now delete the "sizing" rectangle, and move or resize the other elements to fit the space you have created.
在上传到维基共享资源后，我的文本显示为一些小黑块，或者根本不显示！
If you use "Flowed Text" in Inkscape, it will not render at all. Flowed text boxes are created when you click and drag to make you text box. To avoid this, just click once to position your cursor and then type your text. To convert a flowed text box to a normal text box, go to the "Text" menu and choose "Convert to Text".
If this still doesn't work, some text features of Inkscape are not supported by MediaWiki’s renderer, such as text-on-path. If you are not using flowed text and still have problem, convert the text to paths. Do this by selecting the command Path → Object to Path. This will convert the text to paths. Save as plain SVG, and reupload your file.
My arrowheads/dashed lines are appearing as little blocks, or aren't showing up at all after uploading to Commons!
Check that attribute style="overflow:visible" is in tag marker and not in tag path. Some stroke features of Inkscape are not supported by MediaWiki’s renderer. Select the offending objects, and select the command Path → Stroke to Path. This will convert the strokes to paths. Save as plain SVG, and reupload your file.
遇到透明背景怎么修复？
Do you really need to? Usually not! MediaWiki’s renderer will convert the SVG file to PNG with a transparent white background for display (displays white if your browser doesn't support PNG transparencies). Browsers that natively support SVG transparency will show the background color through the image, white! (or grey if the image is displayed as a thumbnail). Leaving your image transparent behind helps future editors, and allows the image to be displayed over other background colors without a big white square. However, if your image really needs a specific colored background, create a rectangle the size of the image, fill it with the background color of your choice, and choose the command Object → Lower to Bottom. Save your image, and enjoy the solid background color![48]
我的字体不能正常渲染。本站点都支持渲染什么字体？
见元维基SVG字体列表。
我使用了维基共享资源所安装的同款字体，但在我SVG图像中的文本定位，本地渲染的和共享资源渲染的看起来仍然不一样。
It depends on which rendering library and version your local renderer is using. Text positioning and other SVG aspects (such as "transform") are known to behave differently in different rendering libraries. For closest result to Wikimedia render, you should use whatever renderer which uses librsvg. Opera, Chrome and Safari gives accurate results. Firefox and Internet Explorer 10 are slightly inaccurate. Safari looks neater when certain font smoothing is enabled.
I'm drawing a flag (or some other insignia) and it asks for PANTONE or CMYK colors. What do I do?
First, if you see the words*PANTONE or CMYK, try to see if they have something called RGB. Wikimedia Commons images are used a lot on Wikimedia projects such as Wikipedia, etc, and are designed for use on computer screens. If you can find RGB colors, use them in favour of others. If you can't, you can convert the colors using your program’s own color picker, or, in the case of PANTONE, Color Finder,[2][needs update] from which you can extract RGB values for a color code. Make sure to indicate (perhaps on the talk page or image summary) which method of conversion you used, like "[Some Program] was used to convert CMYK values […] to RGB […]".


软件

许多程序都可以处理SVG文件。您或许会想尝试下边给出的程序，不过可用的并非只有这些程序。其中一些可以免费下载，另一些则是商业软件。

因为SVG只是一个XML规范，所以可以使用文本编辑器，或者你自己的程序/脚本手动编写SVG文件。[49]事实上，许多SVG图像都是用文本编辑器写成的。一个可以高亮显示语法的编辑器将会对你很有帮助。使用W3C SVG 验证器来检查你的作品。

阅览器

如今所有的Web浏览器都可以在本机渲染SVG。

  • librsvg，一个MediaWiki使用的渲染库，以及下列阅览器：
  • Svg-explorer-extension，一款LGPL自由许可下的Windows文件资源管理器拓展，用于生成SVG文件的缩略图。
  • iShell, a free MIT licensed extension for Windows Explorer that generates thumnails for SVG files
  • SvgShellExtensions.dll, a free Boost licensed extension for Windows Explorer that generates thumnails for SVG files, based on Image32 graphics library by the same author
  • SVG Shell Extensions, a free Apache licensed extension for Windows Explorer that generates thumnails for SVG files, based on the same library above, and includes a basic SVG editor used to preview SVG from its source code
  • resvg, is one of the fastest and most correct SVG-render[50], also provides additional packages for viewer, optimizer (limited support) and extension for Windows Explorer
  • Inkview, part of Inkscape vector graphics editor, supports also Inkscape-specific features, which are not in the SVG-1.1-DTD-Standard
  • IrfanView, an image viewer provides a plug-in for svg-rendering
  • Imagine, another image viewer provides a plug-in for svg-rendering
  • batik, a java-based toolkit for svg-rendering
  • svgexport, a Node.js module
  • cairosvg, a Python library
  • ImageMagick, image-converter
  • chrome-svgrender, renders SVG files using Headless Chrome
  • SVG.NET, a basic renderer
  • QtSVG, a basic renderer
  • wxsvg, a basic renderer

转换器

大多数SVG编辑器都包含有栅格至矢量转换器（图像描摹）

  • toollabs:convert，一个PDF转SVG与SVG转PNG转换器
  • Autotrace（警告：其中至少一个链接遭到钓鱼网站篡改），2004年Martin Weber使用以下工具开发的一个库：
  • Scribus (with GhostScript), an EPS-to-SVG converter
  • PDFTron PDF2SVG, commercial PDF-to-SVG converter for Windows
  • Barton PDF2SVG, a PDF-to-SVG converter for Linux, which uses two free libraries called "Poppler" and "Cairo"
  • librsvg, a rendering library used by MediaWiki and the following converters:
    • RSVG-Convert, and open-source tool that converts SVG to PNG, PDF or PS
  • Bitmap to SVG converter - useful for converting pixel art
  • Vectorizer.AI, an artificial intelligence-based online tracer to convert raster image
  • PDF24 Tools, including an online PDF-to-SVG converter


编辑器


专用应用

  • Ipe, a free and open-source editor with an SVG converter, with good LaTeX integration for mathematical and technical diagrams
  • Scour. For tidying up/create a smaller file size (in Python, also included in Inkscape).
  • Graphviz. An open source application for automatic diagram layout.
  • BKchem. A free software to draw chemical structures in SVG. Runs on Windows, Mac OS X, and Unix systems.
  • Freemind is a free and open source mind mapping application written in Java. FreeMind.
  • GeoGebra is a free and open source multi-platform mathematics software with ability to export SVG. Geogebra.
  • LibreOffice Calc (libreoffice.org), for creating bar charts, pie charts, etc.
  • Gnumeric spreadsheet, saves/exports charts in SVG format, cf. gnumeric.
  • Nano by Vecta.io - 压缩文件大小
  • SVGO - reduces file sizes
    • SVGOMG - a web-based front-end for SVGO
    • SVGOMFG - a web-based front-end for SVGO
  • SvgPathEditor. An online editor useful for analyzing and improving SVG path data.
  • SVG Path Visualizer. For analyzing SVG path data.

版权

有人担忧SVG图像的源代码会被认为是“计算机程序”从而拥有版权，哪怕输出的图像可能因低于原创门槛而处于公有领域，或因版权到期而无法与公有领域的作品区分开来。这或许意味着，尽管一幅SVG输出的图像处于公有领域，但其代码可能版权受限，因此不适合收录到维基共享资源。

Elements that weigh in favor of SVG source code containing sufficient creative expression to be copyrightable might include hand-written code, complex embedded CSS, embedded comments longer than short phrases, or a large carefully selected set of control points. Elements that weigh in favor of SVG source code lacking creativity include programmatically generated code or slavish copying of a public domain source. See the following for additional context:

參見

维护：

参考资料

  1. ↑ 如果一個style元素沒有指定它的type屬性，那麼類型是從svg元素的contentStyleType獲取的屬性（SVG DTD默認為“text/css”）。http://www.w3.org/TR/SVG11/styling.html#StyleElement
  2. ↑ http://www.iana.org/assignments/language-subtag-registry/language-subtag-registry
  3. ↑ User:JoKalliauer/Optimization#SVG_sourcecode_edits_without_visual_change
  4. ↑ W3C – valid DTD list – Optional doctype declarations
  5. ↑ a b Don't include a DOCTYPE declaration, W3C – It is not recommended that a DOCTYPE declaration be included in SVG documents.
  6. ↑ W3C – There is no (normative external) DTD for SVG 2.0
  7. ↑ 验证器 API，https://validator.w3.org/docs/api.html
  8. ↑ W3C：XML声明
  9. ↑ W3C：SVG–Prolog和文档类型声明
  10. ↑ W3C：XML字符编码
  11. ↑ http://www.w3.org/TR/SVG/struct.html#NewDocumentOverview
  12. ↑ W3C: SVG linking
  13. ↑ W3C: SVG viewBox
  14. ↑ Philip Rogers (2015-04-30). Intent to deprecate: SMIL. Google Groups. Retrieved on 2015-06-27.
  15. ↑ https://caniuse.com/#feat=svg-smil
  16. ↑ User:JoKalliauer/Optimization#SVG sourcecode edits without visual change
  17. ↑ User:JoKalliauer/Optimization#Useless elements that should be kept
  18. ↑ https://github.com/scour-project/scour/wiki/Documentation#--renderer-workaround-and---no-renderer-workaround
  19. ↑ Inkscape FAQ: What about flowed text?
  20. ↑ You can change the colour, of the invisible path, which is used as the boundary of the flowRoot, similar to File:FlowRoot and flowRegion.svg, or you could also use the more general path-tag and create other shapes.
  21. ↑ User:JoKalliauer/RepairFlowRoot#replace notempty flow-text using (Inkscape)
  22. ↑ 一些案例使用了translate=".."属性，一些则使用了text-align=".."属性
  23. ↑ 例如该例子：File:Petit_Monde_de_Gondry,_Jonze_&_Kaufman.svg
  24. ↑ 也可以在Github下载
  25. ↑ User:JoKalliauer/RepairFlowRoot#delete empty flow-text using (Text-Editor)
  26. ↑ Category:Images with SVG 1.2 features
  27. ↑ User:JoKalliauer/RepairFlowRoot#That the black square won't get rendered (Text-Editor)
  28. ↑ Attribute viewBox in SVG element takes precedence in defining the native resolution if it differs from width and height attributes.
  29. ↑ Font-kerning: Help with file at Graphics village pump, compare also File:Fonttest-Kerning.svg.
  30. ↑ textLenght attribute in w3.org
  31. ↑ http://www.w3.org/TR/SVG/fonts.html#FontFaceElementFontFamilyAttribute
  32. ↑ www.w3.org/TR/2008/REC-CSS2-20080411/fonts.html#generic-font-families
  33. ↑ a b User:AntiCompositeNumber on phab:T180923#6557063
  34. ↑ W3C: SVG – The ‘tspan’ element
  35. ↑ W3C: SVG – White space handling
  36. ↑ W3C: SVG 2 - The ‘xml:lang’ and ‘xml:space’ attributes
  37. ↑ librsvg still preserves this extra space character but during the middle or end text alignments, this space character is ignored.
  38. ↑ https://bugs.launchpad.net/inkscape/+bug/168023
  39. ↑ W3C: SVG – The ‘textPath’ element
  40. ↑ Avoid the ‚style‘ attribute where possible
  41. ↑ Chapter 11: Painting: Filling, Stroking and Marker Symbols. W3C (2012-08-12). Retrieved on 2012-11-28.
  42. ↑ paint-order. Mozilla Developer Network (2013-01-12). Retrieved on 2013-10-21.
  43. ↑ 优化SVG文件的一个小技巧，由WebpageFX提供
  44. ↑ 35-optimizing-svg-tools by CSS-Tricks（35个svg优化工具，由CSS-Tricks提供）
  45. ↑ css-tricks : understanding-and-manually-improving-svg-optimization（css-tricks：理解及手动优化svg）
  46. ↑ Inkscape tutorial: Tracing
  47. ↑ Inkscape wiki: Tools: Vectorize/trace
  48. ↑ A feature bug report for this exists since January 2005 on Inkscape launchpad.)
  49. ↑ Claudio Rocchini使用C++代码制作的图像
  50. ↑ User:JoKalliauer/SVG test suites

外部链接

Retrieved from "https://commons.wikimedia.org/w/index.php?title=Help:SVG/zh&oldid=951824117"