帮助:SVG
SVG（
SVG
什麼 是 SVG？
librsvg
librsvg（
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图像。
怪 癖
樣式
styletype"text/css"。[1]
style<style>type="text/css"。（<style type="text/css"><style>。）(phab:T68672)
文 本 未 能 显示 / 浮动元素
systemLanguage 处理
.svg&lang=qcs)
qcszh-Hans。.svg&lang=qct)
qctzh-Hant。RSVG 无法systemLanguage zh-Hans（简体zh-Hant（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 sr-EC sr-EL，sr-Cyrl sr-Latn。 如果sr switch 处理选择
zh zh-cmn cmn。 yue zh-yue。 Hans为简Hant为繁zh-Hans zh-Hant cmn-Hans cmn-Hant。 cmn-Hans-CN（
对于 MediaWiki，
[[File:xyz.svg|lang=zh-hant|...]]用 于zh-Hant阅读器 和 [[File:xyz.svg|lang=zh-hans|...]]用 于zh-Hans阅读器 。
为维基 共 享 资源创建SVG图像
你可以用
上 传之前 ：验证并检查图像 外 观
验证
flowText
如果SVG
如果SVG
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 rdf inkscape sodipodi SVG 1.1+XHTML+MathML 3.0验证
其他nsfilter
此外，data-*
图片外 观
此外，
- 应用于任
何 填 充 的 任 何 图案，包括 自 动包含 在 Illustrator中 的 图案。有 时，您可以通过自己 将 使用 过的任 何 图案转换为光栅，然 后 使用 图像--> 跟踪功 能 将 它们转换回 矢 量 来 解 决此问题。 包含 不 止 一 个 Illustrator的 “效果 ”的 任 何 路 径 ——例 如，鱼眼扭曲和 徒手 扭曲。插画 师无法 在任 何 单个路 径 的 “外 观”菜 单中处理其中两个，并且会 将 它们栅格化 。任 何 已 被 包 络失真改 变的路 径 。有 时您可 以像解 决上述 模 式 问题一样解决这些问题，但 结果通常 令 人 失望 。在 “效果 ”菜 单下已 指定 光 栅效果 的 任 何 路 径 。要 将 它们保留 为矢量 ，您可能 只 需要 撤消此效果 。- Illustrator
允 许用户以三种方式将渐变应用到笔画：在 笔画内 渐变、沿笔画渐变和 跨 笔画渐变。然 而，只 有 第 一 个，即 笔画内 的 渐变，由 等 效 的 SVG代 码支持 ；当 图像以 SVG格式 保存 时，任 何 包含 沿着或 跨 越 它们的 渐变的 笔划都 将 转换为光栅。
这些
：
文 档声明
<?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 xmlns="http://www.w3.org/2000/svg";[11] 如果xmlns svg xlink xmlns:xlink="http://www.w3.org/1999/xlink"。
version 编号应该?（
width height "100%"，这些默认值width="400px" svg viewBox[13]
位 图
SVG
动画
SVG图像也可以动，File:页面，
标题
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>
被 禁 用 的 元素 与 脚本
<!--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)
<!-- scipts -->
<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，通用 规范
Inkscape
请{{Created with Inkscape|IMPORTANT=yes}}标记
字体 、文字
维基<text>标签
保存 为字体 而非路 径 文字 可 以显著降 低 文 件 总体大小 ，尤 其在图像中 包含 大量 文 本 的 情 况下。- 其他编者
可 以无需重绘全部 文 本 ，即 可 修正 图像中 的 文字 或 语法错误。 文 本 可 以轻松地 被 翻 译成 其他语言，省 去 贡献者 本地 化 的 时候再 次 放置 所有 的 文 本 标签的 麻 烦，这是很重要 的 品 质，因 为维基 共 享 资源是 一个多语言项目。路 径 文字 需要 更 多 的 翻 译工作 。另见Template:Translate。文 本 易 于被搜索 引擎找到，而路径 轮廓文字 可能 无法被 后 者 识别。
此外，如果
{{Path text SVG}}标记，如要链接{{Vector text versions|…}}。
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).
为避
最 简单的 解 决方法 是 只 用 单击而非拖动来 以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内 建 的 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">标签）中 。
文 本 转换限 制
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）
<text x="50" y="50" writing-mode="tb-lr" font-size="15px">東 涌綫</text>
如果确实
字体 替 换和备用字体
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-serifmaps to DejaVu Sansserifmaps to DejaVu Serifcursivemaps to the uninteresting DejaVu Sansfantasymaps to the uninteresting DejaVu Sansmonospacemaps 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   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 texttspantspandytextPath也可以处
SVG 1.2
SVG 2.0 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
textelements get not inherited on childtspanelements. If you want this, you need to add a separate class fortspanas 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
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.
文 件 尺寸
在 共 享 资源中 ，用 户使用 文 件 上 传精灵允许上传的最大 文 件 大小 是 4 GB（4,294,967,296字 节）其他工具 支持 更 大 文 件 的 上 传。尽 管 大 文 件 可 以上 传，但 是 它们会 使 得 用 户在打 开文件 时遇到 问题。- SVG
文 件 的 缩略图最大 尺寸 是 10 MB。 - 图像
建 议高度 大 约为400至 600像 素 。
减小文 件 体 积
如果
使用 特殊 程 序 - Scour——
一 个SVG清 理工 具 - Inkscape，另存为优
化 的 svg格式
- Scour——
手 动编辑文件 手 动清理代 码[43]使用 编辑器 并采用 正 则表达式，样例建立 组降 低 数 值精度 [44][45]移 除 无用的 代 码，例 如：移 除 所有 无用的 定 义（def），因 为它们会无谓地 增加 文 件 体 积注 释、代 码格式 、空 格 ，但 这样会 使 代 码更加 凌 乱 （降 低 了 可 读性），且通常 对文件 体 积和渲染时间的 影 响可忽 略 不 计。）
- 编写
程 序 （脚本 ）创建文 件 并且：曲 线使用 更 少 的 点 - 绘制
更 少 曲 线
翻 译
SVG
转换为SVG
See also: Commons:Media for cleanup。给出一个图像文件但格式不是SVG，
Generally, there are 3 ways to produce an SVG file, given an existing image:
- Regenerate it
- Convert it
- 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文 件 归类
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标记。
- Transcluded from Commons:SVG marker templates
SVG software tags
 | Use always at least the W3C-validity/invalidity flag! To get easily the best results use Image generation |
You will find the complete up-to-date list at SVG created with ... templates
For the software used (Category:SVG graphics by software used):
- {{Adobe|v}}, sorts into Valid SVG created with Adobe Illustrator
- {{Bin2svg|v}}, sorts into Valid SVG created with bin2svg
- {{Chemdraw|v}}, sorts into Valid SVG created with ChemDraw
- {{CorelDraw|v}}, sorts into Valid SVG created with CorelDRAW
- {{created with Dia|v}}, sorts into Valid SVG created with Dia
- {{ElCompLib|v}}, sorts into Valid SVG created with electrical symbols library
.svg){kind=small}
- {{Fig2SVG|v}}, sorts into Valid SVG created with Fig2SVG
- {{Gnuplot|v}}, sorts into Valid SVG created with Gnuplot
- {{HandSVG|v}}, sorts into Valid SVG created with Text Editor
- {{Inkscape|v}}, sorts into Valid SVG created with Inkscape
- {{Inkscape-hand|v}}, sorts into Created with Inkscape-hand
.- {{Metapost|v}}, sorts into Valid SVG created with MetaPost
- {{Sodipodi|v}}, sorts into Valid SVG created with Sodipodi
- {{Scribus|v}}, sorts into Valid SVG created with Scribus, also for typesetting
- {{Created with Text Editor|3=v}}, sorts into Valid SVG created with Text Editor
- {{Image generation|O|v}} or {{Image generation|U|v}}, sorts into Valid SVG created with Other tools
- {{Created with Vim|2=v}}, sorts into Valid SVG created with Vim
- {{Extracted with Inkscape|2=v}}, sorts into Valid SVG extracted with Inkscape
- For other software, by now categorize as usual, see SVG created with ... templates and Created with ... templates for an summary of software-related templates
See #Software section for a list of programs.
SVG file tags
- For making use of elements from other SVG images available on Commons, please use {{Attrib}} — see Category:Vector images using elements from other vector images.
![[20]](https://trans.hiragana.jp/ruby/https://commons.wikimedia.org/wiki/Help:SVG/zh#cite_note-File:FlowRoot_and_flowRegion.svg-20){kind=link}
_%3D_z*z%2B0.25.svg){kind=link}
- {{Translate}}
|
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. |
- {{Translate|switch=yes}}
|
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 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. |
- For animations you can use {{Animated SVG|B|C}}
|
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.
|
.
- SVG files containing JavaScript cannot be uploaded at present, but this template anticipates that possibility {{Scripted SVG}}.
|
This is a scripted SVG file (it contains JavaScript). The preview above may be incomplete or incorrect. To use the interactive possibilities, open it in your browser.
|
SVG conversion tags
- If you find raster images that should be vector graphics — especially diagrams, charts, graphs and some drawings —, tag them {{convert to SVG|A|B}}. Special: For Nuvola {{N2+SVG}}.
|
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}}. |
- If you find raster animations (usually GIFs) that should be animated vector graphics, tag them {{convert to SVG animation}}.
|
|
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=~~~~~}}.
 |
SVG work in progress
|  |
- 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}}
 | All the SVG images in this gallery contain embedded raster graphics.[1] Such images are liable to produce inferior results when scaled to different sizes (as well as possibly being very inefficient in file size). If appropriate to do so, they should be replaced with images created using vector graphics. Note: This template is only supposed to be used if the SVG file mixes vector and raster graphics. If the SVG file only contains raster graphics {{FakeSVG}} is supposed to be used. See also {{TopoSVG}}. |  |
| This image is not a real SVG file and is just a wrapper containing one or more raster graphics without vector coding. Using SVG as just a wrapper is undesirable. Note: This template should be used if the SVG file contains only raster graphics. If the SVG file contains both vector and raster graphics, then use {{BadSVG}}. |  |
 | All the SVG (Scalable Vector Graphics) in this page appear to have been inadequately vectorized, for example, by auto-tracing, and may require revectorization to meet quality standards.
Automatic tracing of complex images can produce overly-large files, inaccurate outlines, and often miss out smaller details completely. Please consider editing this image by hand in a vector editor to improve it. For further information please see our picture tutorial and SVG help. For assistance, refer to the Graphics Lab. |  |
- {{Path text SVG}}
 | The file size of this SVG image may be abnormally large because most or all of its text has been converted to paths rather than using the more conventional
<text> element. Unless rendering the text of the SVG file produces an image with text that is incurably unreadable due to technical limitations, it is highly recommended to change the paths back to text. Doing so will ease the process of localizing this image to other languages and is likely to reduce the file size in a significant scale. Other SVGs containing path-based text can be found at Category:Path text SVG. For more information, see SVG: Fonts and Preparing images for upload: Text. |  |
- {{Superseded|Example.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.
|
|
- {{Technically replaced|SMW Logo.SVG}}
 |
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
|
 |
- {{Template image}}
|
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.
|
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] 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 […]".
软件
许多
阅览器
如今
- librsvg，
一 个MediaWiki使用 的 渲染库，以及下 列 阅览器 ：- RSVG-view for UNIX，一个小而简单的阅览器，
可 以预览MediaWiki渲染的 SVG文 件 外 观 - RSVG-view for Windows（
同上 ） - Commons:Commons SVG Checker，另一款基于基于librsvg
的 渲染程 序 ，旨 在 查找与报告SVG文 件 中 存在 的 问题
- RSVG-view for UNIX，一个小而简单的阅览器，
- Svg-explorer-extension，
一 款LGPL自由 许可下 的 Windows文 件 资源管理 器 拓 展 ，用 于生成 SVG文 件 的 缩略图。 - iShell, a free MIT licensed extension for Windows Explorer that generates thumnails for SVG files
- 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
- Inkscape, supports also Inkscape-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
转换器
- toollabs:convert，
一 个PDF转SVG与 SVG转PNG转换器 - Autotrace（
警告 ：其中至 少 一个链接遭到钓鱼网站篡改），2004年 Martin Weber使用 以下 工具 开发的 一 个库：- ImageMagick
- autotracer.org，一个在线图像描摹工具，
可 接受 JPEG、GIF和 PNG文 件 并输出 为SVG、PDF、EPS、AI和 DXF - Delineate，
一 个基于Java的 免 费Autotrace和 Potrace（网站链接）端 口 。Potrace也集成 到 了 Inkspace的 路 径 >临摹位 图轮廓 菜 单中。
- 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
编辑器
- Inkscape，
免 费且开源的 SVG编辑器 ，适用于Windows、macOS和 Linux。参 见Help:Inkscape圖形 編輯 器 获取更 多 细节。 - Sodipodi，一款已停止维护的免费开源SVG编辑
器 ，适用于Windows和 Linux。 - OpenOffice.org Draw，一款免费开源的绘图程序，
可 本地 导出SVG，安 装 SVG插件后 可 读取SVG。 - LibreOffice Draw，
是 OpenOffice Draw的 衍生品 ，可 导入和 导出SVG。在 一些特殊情况下比Inkscape更 为合适，例 如流程 图。 - Dia，一款免费开源的图表应用，适用于Windows、macOS，以及Unix类平
台 （目前 在 SVG导出上 有 一 些漏洞 ）。 - Adobe Illustrator，一款商业矢量图编辑软件（且
十 分 昂 贵），有 着 丰富的 图形功 能 ，但 SVG特定 的 功 能 有限 。参 见Help:Illustrator/zh获取更 多 细节。 - Affinity Designer
- CorelDraw
- SVG-edit（Github
上 的 SVG-edit），一款免费开源的网络应用程 序 。- toolforge:svgedit，Wikimedia Toolforge
上 SVG-edit的 古老 副本 。参 见User talk:Rillke/SVGedit.js § Is there a WYSIWYG editor（是 否 有 所 见即所得 的 编辑器 ）来 获取更 多 细节。
- toolforge:svgedit，Wikimedia Toolforge
- SVGedit.js，一款试验性的维基共享资源本地小工具。
- Vector Paint - 一款简单的线上编辑器，
可用 于剪裁 。注意 ：对于某 些特定 文 档，剪裁无法正常 工作 。
专用应用
- 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
版 权
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:
- 删除请求
案 例 参 见Commons:Deletion requests/File:Bethlehem Steel logo.svg和 Commons:Deletion requests/File:W3C Semantic Web Logo.svg. 相 关讨论位于Commons:Village pump/Copyright/Archive/2014/03#SVG's are computer software?案件 ： Adobe Systems, Inc. v. Southern Software, Inc.、Alfred Bell & Co. v. Catalda Fine Arts, Inc.. (judgment, commentary)，和 Meshworks v. Toyota (judgment, commentary)
參 見
共 享 資源 :檔案類型 #SVG- Commons:Graphics village pump
- Commons:Graphic Lab
- Commons:Commons SVG Checker
- Commons:Translation possible/Learn more——
如何 翻 译一个SVG文 件 - Commons:Transition to SVG
- meta:SVG image support
- meta:SVG fonts —
支持 字体 列 表 - Wikipedia:Comparison of raster-to-vector conversion software
- 维基
百科 :SVG帮助 - 维基
百科 :图像实验室 /资源/SVG - 维基
百科 :图像实验室 /资源/PDF转SVG - b:XML – Managing Data Exchange/SVG
- mw:Extension:TranslateSvg
和 toollabs:svgtranslate - User:Rillke/SVGedit.js
维护：
- Category:SVG
- Category:SVG maps —
地 图项目 SVG分 支 - Category:Images that should use vector graphics
- Category:Pictures showing a librsvg bug
- Commons:Transition to SVG
参考 资料
- ↑ 如果
一 個 style元素 沒 有 指定 它的type屬性 ，那 麼類型 是 從 svg元素 的 contentStyleType獲 取的 屬性 （SVG DTD默認 為 “text/css”）。http://www.w3.org/TR/SVG11/styling.html#StyleElement - ↑ http://www.iana.org/assignments/language-subtag-registry/language-subtag-registry
- ↑ User:JoKalliauer/Optimization#SVG_sourcecode_edits_without_visual_change
- ↑ W3C – valid DTD list – Optional doctype declarations
- ↑ a b Don't include a DOCTYPE declaration, W3C – It is not recommended that a DOCTYPE declaration be included in SVG documents.
- ↑ W3C – There is no (normative external) DTD for SVG 2.0
- ↑ 验证
器 API，https://validator.w3.org/docs/api.html - ↑ W3C：XML
声明 - ↑ W3C：SVG–Prolog
和文 档类型 声明 - ↑ W3C：XML
字 符 编码 - ↑ http://www.w3.org/TR/SVG/struct.html#NewDocumentOverview
- ↑ W3C: SVG linking
- ↑ W3C: SVG viewBox
- ↑ Philip Rogers (2015-04-30). Intent to deprecate: SMIL. Google Groups. Retrieved on 2015-06-27.
- ↑ https://caniuse.com/#feat=svg-smil
- ↑ User:JoKalliauer/Optimization#SVG sourcecode edits without visual change
- ↑ User:JoKalliauer/Optimization#Useless elements that should be kept
- ↑ https://github.com/scour-project/scour/wiki/Documentation#--renderer-workaround-and---no-renderer-workaround
- ↑ Inkscape FAQ: What about flowed text?
- ↑ 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. - ↑ User:JoKalliauer/RepairFlowRoot#replace notempty flow-text using (Inkscape)
- ↑
一 些案例 使用 了 translate=".."属性 ，一 些则使用 了 text-align=".."属性 - ↑
例 如该例 子 ：File:Petit_Monde_de_Gondry,_Jonze_&_Kaufman.svg - ↑ 也可以在Github
下 载 - ↑ User:JoKalliauer/RepairFlowRoot#delete empty flow-text using (Text-Editor)
- ↑ Category:Images with SVG 1.2 features
- ↑ User:JoKalliauer/RepairFlowRoot#That the black square won't get rendered (Text-Editor)
- ↑ Attribute
viewBoxinSVGelement takes precedence in defining the native resolution if it differs fromwidthandheightattributes. - ↑ Font-kerning: Help with file at Graphics village pump, compare also File:Fonttest-Kerning.svg.
- ↑ textLenght attribute in w3.org
- ↑ http://www.w3.org/TR/SVG/fonts.html#FontFaceElementFontFamilyAttribute
- ↑ www.w3.org/TR/2008/REC-CSS2-20080411/fonts.html#generic-font-families
- ↑ a b User:AntiCompositeNumber on phab:T180923#6557063
- ↑ W3C: SVG – The ‘tspan’ element
- ↑ W3C: SVG – White space handling
- ↑ W3C: SVG 2 - The ‘xml:lang’ and ‘xml:space’ attributes
- ↑ librsvg still preserves this extra space character but during the middle or end text alignments, this space character is ignored.
- ↑ https://bugs.launchpad.net/inkscape/+bug/168023
- ↑ W3C: SVG – The ‘textPath’ element
- ↑ Avoid the ‚style‘ attribute where possible
- ↑ Chapter 11: Painting: Filling, Stroking and Marker Symbols. W3C (2012-08-12). Retrieved on 2012-11-28.
- ↑ paint-order. Mozilla Developer Network (2013-01-12). Retrieved on 2013-10-21.
- ↑ 优化SVG
文 件 的 一 个小技巧 ，由 WebpageFX提供 - ↑ 35-optimizing-svg-tools by CSS-Tricks（35个svg优化
工具 ，由 CSS-Tricks提供 ） - ↑ css-tricks : understanding-and-manually-improving-svg-optimization（css-tricks：
理解 及手动优化 svg） - ↑ Inkscape tutorial: Tracing
- ↑ Inkscape wiki: Tools: Vectorize/trace
- ↑ A feature bug report for this exists since January 2005 on Inkscape launchpad.)
- ↑ Claudio Rocchini
使用 C++代 码制作 的 图像 - ↑ User:JoKalliauer/SVG test suites
外部 链接
- SVG Primer
- openclipart.org
提供 了 超 过10000幅 SVG图像（公有 领域） - CanIUse.com
火 狐 浏览器 支持 SVG 2.0- Edge
状 态（一 些SVG相 关的话题）