View source for Help:SVG/ja

You do not have permission to edit this page, for the following reasons:
This page cannot be updated manually. This page is a translation of the page Help:SVG and the translation can be updated using the translation tool.
Your IP address is in a range that has been blocked on all Wikimedia Foundation wikis. The block was made by ‪Jon Kolbert‬. The reason given is Open proxy/Webhost: See the help page if you are affected .
- Start of block: 05:38, 21 February 2024
- Expiry of block: 05:38, 21 February 2029
Your current IP address is 35.172.199.135. The blocked range is 35.172.0.0/16. Please include all above details in any queries you make. If you believe you were blocked by mistake, you can find additional information and instructions in the No open proxies global policy. Otherwise, to discuss the block please post a request for review on Meta-Wiki. You could also send an email to the stewards VRT queue at stewards@wikimedia.org including all above details.
You can view and copy the source of this page.
<languages/>
{{shortcut|COM:SVG}}
[[File:SVG Logo.svg|thumb|SVGファイル形式の公式ロゴ]]

'''SVG''' ([[:w:ja:Scalable Vector Graphics|Scalable Vector Graphics]])はウィキメディア・コモンズで受け入れられるファイル形式です ([[Commons:File types/ja|Commons:File types]]参照) 。これは図表、地図などの写実的でない画像に適しています。SVGは描画を[[:w:ja:ソースコード|ソースコード]]で記述するために修正・改良に最も適しているので、コモンズでは高く評価されています。

SVGファイルはコモンズで広く用いられています。ここでは、そのうえでのヒントを紹介します (SVGファイルを生成する手筈が既に分かっている場合、以下の他に [[Help:Illustrator|Help:Illustrator (英語版)]] や [[Help:Inkscape/ja|Help:Inkscape]] を確認することを検討してみてください) 。

<span id="What_is_SVG?"></span>
== SVGとは何か ==
[[File:Letters SVG.svg|thumb|<span lang="en" dir="ltr" class="mw-content-ltr">An example of an SVG image — note that at whatever scale you view the image, its curves always appear smooth, never "jagged"</span>]]
<div lang="en" dir="ltr" class="mw-content-ltr">
{{W|Scalable Vector Graphics}} (SVG) is an {{W|XML}} specification and file format for describing two-dimensional {{W|vector graphics}} (as opposed to a "bitmap" or [[:en:raster graphics|raster graphic]]) in both static and animated forms. It is stored in either {{W|plain text}} or compressed (binary) format which is much more size efficient than most other image formats such as {{pg|Help:JPEG|JPEGs}} or {{W|GIF}}s. SVGs also allow embedding of raster graphics and editable text.
</div>

== librsvg ==

<div lang="en" dir="ltr" class="mw-content-ltr">
{{W|librsvg}} (alternatively "RSVG") is the rendering library used by MediaWiki to rasterize the SVG files into the PNG bitmap format that is served to Wikimedia pages. The displayed image is not SVG and is therefore not animated or interactive. One reason for this choice is that rendering an SVG in real-time slows down older computers or operating systems. A raster version which can be efficiently converted from the SVG source helps overcome this technical problem. Another reason is that some SVG files are large (e.g., 1&nbsp;MB), but the image when displayed on a monitor might be 160&times;320 pixels, which would be an uncompressed {{#expr:160*320}} pixels ({{#expr:160*320*3}} bytes for 24-bit color).
</div>

<div lang="en" dir="ltr" class="mw-content-ltr">
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 [[w:Rust (programming language)|Rust programming language]]. Although it manages to fix longstanding problems such as the <code>mask</code> 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.
</div>

<div lang="en" dir="ltr" class="mw-content-ltr">
Several of librsvg's missing features and bugs impact SVG images on Commons. Consequently, SVG files need to avoid or workaround those problems. For example, librsvg does not support the text on a path feature, and librsvg has problems with top-to-bottom text. Even where librsvg works flawlessly, there can be compatibility issues if an SVG file uses a font that Commons does not have, for example.
</div>

<span id="Quirks"></span>
=== 癖 ===

<span id="Stylesheet"></span>
==== スタイルシート ====
{{tracked|T68672|Resolved}}
<span lang="en" dir="ltr" class="mw-content-ltr">In the SVG specification, the <code>style</code> element {{Best current practice|must}} default its <code>type</code> attribute to <code>"text/css"</code>.<ref>If a <code>style</code> element does not specify its <code>type</code> attribute, then the type is obtained from the <code>svg</code> element's <code>contentStyleType</code> attribute (which the SVG DTD defaults to "text/css"). http://www.w3.org/TR/SVG11/styling.html#StyleElement</ref></span>
<span lang="en" dir="ltr" class="mw-content-ltr">SVG images that use <code>style</code> elements should explicitly set <code>type="text/css"</code> in their {{tag|style|open}} tag. (In other words, {{tag|style|open|params=type="text/css"}} should be prefered of {{tag|style|open}}.) ([[phab:T68672]])</span>

<span id="not_displayed_text_/_Flow_elements"></span>
==== テキストやフロー要素が表示されない ====

<div lang="en" dir="ltr" class="mw-content-ltr">
''See {{section link||Not displayed text (Flowed Text bug)}}''
</div>

<div lang="en" dir="ltr" class="mw-content-ltr">
==== <code>systemLanguage</code> processing ====
</div>
[[File:History of the Universe lang.svg|lang=qcs|thumb|upright=1.5|私用の langtag <code>qcs</code>を使って <code>zh-Hans</code> を選択。]]
[[File:History of the Universe lang.svg|lang=qct|thumb|upright=1.5|<span lang="en" dir="ltr" class="mw-content-ltr">Private-use langtag <code>qct</code> to select <code>zh-Hant</code>.</span>]]
RSVG は <code>systemLanguage</code> 属性を正しく比較しません。この属性は SVG では IETF 言語タグ（langtag）のカンマ区切りの一覧と指定されています。RSVG は、langtag の最初のサブタグ（1番目のハイフンの直前の文字グループ）のみと一致し、その後に続く国コードやスクリプトのサブタグは無視されます。
例えば RSVG だと<code>zh-Hans</code>（簡体中国語）と<code>zh-Hant</code>（繁体中国語）の区別ができません。この問題を回避するには、言語を指定する私用の langtag を使います（範���は<code>qaa</code>-<code>qtz</code>）

{| class="wikitable"
|-
! <span lang="en" dir="ltr" class="mw-content-ltr">IETF langtag</span>
! <span lang="en" dir="ltr" class="mw-content-ltr">SVG markup</span>
|-
| <code>sr-Cyrl</code>
| <code>systemLanguage="sr-Cyrl,qsc"</code>
|-
| <code>sr-Latn</code>
| <code>systemLanguage="sr-Latn,qsl"</code>
|-
| <code>zh-Hans</code>
| <code>systemLanguage="zh-Hans,qcs"</code>
|-
| <code>zh-Hant</code>
| <code>systemLanguage="zh-Hant,qct"</code>
|}

<code>systemLanguage</code> 属性は、IETF langtag の一覧である必要があります。何が適切な言語タグか、若干の混乱があります。MediaWiki はセルビア語の場合、<code>sr-EC</code> と <code>sr-EL</code> を採用し、これらのタグは BCP 47 ではセルビア語のうち EC地域（エクアドル）で話すものと EL （未割り当て領域）内で使われるものを意味します。
<span lang="en" dir="ltr" class="mw-content-ltr">The proper langtags are <code>sr-Cyrl</code> and <code>sr-Latn</code>. The Cyrillic langtag should be before the Latin langtag to make SVG 1.1 <code>switch</code> processing choose the Cyrillic script if the user has stated a language preference that includes <code>sr</code>. (MediaWiki is starting to use proper langtags; see [[Phab:T117845]].)</span>

中国語はもっと複雑です。文字コードの<code>zh</code>はマクロ言語用のサブタグであり、中国語の地方語全てを参照します（例：ペキン官話、広東語）。前者のペキン官話の指定は<code>zh-cmn</code>ですが、IETF レジストリ<ref>http://www.iana.org/assignments/language-subtag-registry/language-subtag-registry</ref> では <code>cmn</code> が適します。同様に、後者の<code>zh-yue</code> も、IETF だと広東語は<code>yue</code>が適します。また中国語の記法も指定できます。簡体字なら<code>Hans</code>、繁体字なら<code>Hant</code>で指定します。
<span class="mw-translate-fuzzy">中国語の記法を区別する langtags の使い分けは明白ではありません。簡便な方法として、スクリプトに<code>zh-Hans</code> または <code>zh-Hant</code> を採用して区別します（IETF レジストリ・マークはどちらも「冗長」と位置づけますが、代替手段は推奨してません。）代替案として地方語と文字を指定します。たとえば、<code>cmn-Hans</code> または <code>cmn-Hant</code> を指定。（中国で使用されている簡体字を含む中国語）<code>cmn-Hans-CN</code> など地域用の langtag を追加できます。</span>

<div lang="en" dir="ltr" class="mw-content-ltr">
For MediaWiki, the Serbian pages have a common source than can be rendered in either Cyrillic or Latin script. Similarly, the Chinese pages have a common source that can be rendered in either Hans or Hant. Ideally, a Chinese reader could select the Hans script, and all the images in the article would also be rendered in Hans. The desired effect would be something like
</div>
* <span lang="en" dir="ltr" class="mw-content-ltr"><code><nowiki>[[File:xyz.svg|lang=zh-hant|...]]</nowiki></code> for the <code>zh-Hant</code> reader and</span>
* <span lang="en" dir="ltr" class="mw-content-ltr"><code><nowiki>[[File:xyz.svg|lang=zh-hans|...]]</nowiki></code> for the <code>zh-Hans</code> reader.</span>
<div lang="en" dir="ltr" class="mw-content-ltr">
It is not clear whether or how this can be done in MediaWiki.
</div>

<div lang="en" dir="ltr" class="mw-content-ltr">
==== Large attributes ====
</div>

<div lang="en" dir="ltr" class="mw-content-ltr">
The maximum size of an attribute or text node of an SVG in MediaWiki is 10&nbsp;MB. This means an embedded raster image cannot exceed 6.9&nbsp;MiB in size. Using embedded raster images is discouraged.
</div>

<span id="Creating_SVG_images_for_Wikimedia_Commons"></span>
== ウィキメディアコモンズのSVG画像の作成 ==

SVG画像を作成するのに利用できるプログラムは、以下の{{section link||Editors}}に挙げられています。それ以外にも、SVGコードをテキストエディタや[[:en:Integrated development environment|IDE]]で直接編集することもできます。

以下のセクションでは、SVGの特定の機能について説明します。

<span id="Before_you_upload:_validation_and_checking_image_appearance"></span>
=== アップロードする前に: 画像の外観の検証と確認 ===

<span id="Validation"></span>
==== 検証 ====

<div lang="en" dir="ltr" class="mw-content-ltr">
Although not a requirement on Commons, it is a good idea to run your file through the World Wide Web Consortium (W3C) ''XML validator'' (https://validator.w3.org) '''before''' you upload. The validator can find problems with an SVG file that may cause the file to render incorrectly in different platforms. For example, validation will complain about the use of <code>flowText</code> elements, which are nonstandard and poorly supported. However validating a file generally does not justify a reupload,<ref>[[User:JoKalliauer/Optimization#SVG sourcecode edits without visual change]]</ref> for exceptions see [[User:JoKalliauer/Optimization#Optimizing SVGs that have already been uploaded|Optimizing SVGs that have already been uploaded]].
</div>

<div lang="en" dir="ltr" class="mw-content-ltr">
If the SVG file has a [[:en:Document type declaration|DOCTYPE declaration]], then the validator will use that DTD to check the syntax. If there is no DOCTYPE (which is not required nor is it recommended),<ref>[https://www.w3.org/QA/2002/04/valid-dtd-list.html#Optional W3C – valid DTD list – Optional doctype declarations]</ref><ref name="noDTD">[https://jwatt.org/svg/authoring/#doctype-declaration Don't include a DOCTYPE declaration], [https://www.w3.org/TR/SVG11/intro.html#NamespaceAndDTDIdentifiers W3C – It is ''not'' recommended that a DOCTYPE declaration be included in SVG documents.]</ref> then the validator may check that the file is well-formed XML, but it may realize the file is SVG and perform non-DTD validation by passing the file to its nu Validator.
</div>
SVG 1.1 としてファイルを検証するなら、W3C バリデータ Web ページを使うという選択肢があります。（今後の SVG 2 草案では SVG DTD への参照は削除されます。<ref>[https://dev.w3.org/SVG/profiles/2.0/publish/intro.html#defining W3C – SVG 2.0 には（''規範的な外部'' ）DTD なし]</ref>。

<div lang="en" dir="ltr" class="mw-content-ltr">
If additional namespaces are present in the SVG document, the validator will complain about them. Many tools, such as Adobe Illustrator and Inkscape, insert nodes in additional namespaces.
</div>

{| class="wikitable"
|-
! <span lang="en" dir="ltr" class="mw-content-ltr">common prefix</span>
! 名前空間
! 目的
|-
| <code>cc</code>
| <code>http://creativecommons.org/ns#</code>
| 許可とライセンス
|-
| <code>cdml</code>
| <code>http://www.freesoftware.fsf.org/bkchem/cdml</code>
| <span lang="en" dir="ltr" class="mw-content-ltr">Chemical diagrams</span>
|-
| <code>dc</code>
| <code>http://purl.org/dc/elements/1.1/</code>
| メタデータ
|-
| <code>i</code>
| <code>http://ns.adobe.com/AdobeIllustrator/10.0/</code>
| Adobe Illustrator
|-
| <code>inkscape</code>
| <code>http://www.inkscape.org/namespaces/inkscape</code>
| Inkscape
|-
| <code>its</code>
| <code>http://www.w3.org/2005/11/its</code>
| <span lang="en" dir="ltr" class="mw-content-ltr">Internationalization Tag Set</span>
|-
| <code>rdf</code>
| <code>http://www.w3.org/1999/02/22-rdf-syntax-ns#</code>
| <span lang="en" dir="ltr" class="mw-content-ltr">Resource Description Format</span>
|-
| <code>serif</code>
| <code>http://www.serif.com/</code>
| <span lang="en" dir="ltr" class="mw-content-ltr">Serif Affinity (used for object names that couldn't be stored in the standard <code>id</code> attribute because of unsuitable characters like space)</span>
|-
| <code>sodipodi</code>
| <code>http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd</code>
| <span lang="en" dir="ltr" class="mw-content-ltr">Graphics</span>
|-
| <code>svg</code>
| <code>http://www.w3.org/2000/svg</code>
| SVG
|-
| <code>xlink</code>
| <code>http://www.w3.org/1999/xlink</code>
| <span lang="en" dir="ltr" class="mw-content-ltr">XML Linking Language</span>
|}

<span lang="en" dir="ltr" class="mw-content-ltr">If the W3C validator is given a file that is served with an appropriate <code>Content-Type</code> {{w|List of HTTP header fields#Standard request fields|HTTP header}}, then the file will be validated as <code>SVG 1.1+XHTML+MathML 3.0</code> (an option not available from the UI dropdown box). That validation is done by a second, more modern, validator, the nu Validator (https://validator.w3.org/nu).</span>
<span lang="en" dir="ltr" class="mw-content-ltr">Additionally, the validation will not issue errors for the <code>rdf</code> namespace element trees and will use schemas to check the <code>inkscape</code> and <code>sodipodi</code> namespaces. The <code>SVG 1.1+XHTML+MathML 3.0</code> validation is used by {{tl|ValidSVG}}.</span>

<div lang="en" dir="ltr" class="mw-content-ltr">
Other namespaces will still cause validation errors. The W3C nu Validator can be told to suppress errors about other namespaces with the <code>nsfilter</code> parameter.<ref>Validator API, https://validator.w3.org/docs/api.html</ref>
</div>
*<span lang="en" dir="ltr" class="mw-content-ltr">[https://validator.w3.org/nu/?useragent=Validator.nu%2FLV+http%3A%2F%2Fvalidator.w3.org%2Fservices&acceptlanguage=&doc=https%3A%2F%2Fupload.wikimedia.org%2Fwikipedia%2Fcommons%2Farchive%2F6%2F6f%2F20140502090151%2521Condensation_4-Bromoresorcinol.svg&nsfilter=http://www.freesoftware.fsf.org/bkchem/cdml SVG check that hides cdml ns]</span>

<div lang="en" dir="ltr" class="mw-content-ltr">
In addition, non-SVG 1.1 attributes will produce validation errors. The SVG 2.0 draft allows users to include arbitrary <code>data-*</code> attributes just as HTML 5.0 does, but the W3C validator will complain about them.
</div>

: ''ファイルに認証された方法でタグ付けするには、{{section link||SVG ファイルにタグ付けする}}をご参照ください。''

<span id="Image_appearance"></span>
==== 画像の外観 ====

<div lang="en" dir="ltr" class="mw-content-ltr">
Different software programs and different browser platforms may render the exact same SVG file in slightly different ways. The way you see your final image in a vector image editor may ''not'' reflect how that image will look once it is uploaded to Commons and is viewed by others. Also, all SVG images are automatically converted to PNG files when used in a Wikipedia article, and this may affect how the final image looks as well. As an example of the former, in an image containing a series of very fine strokes, those strokes will probably look much more bold and thick in the editor than they will once the image has been converted to SVG and viewed in a web browser.
</div>
<div lang="en" dir="ltr" class="mw-content-ltr">
Those who create SVG files should consider saving their work in SVG format and then opening that same image using two or three different browsers to verify that it is rendering as intended. A similar check can be done by opening the file in other image editing programs as well.
</div>

<div lang="en" dir="ltr" class="mw-content-ltr">
To preview how an SVG will be rendered to PNG on Commons, go to {{pg|Commons:Commons SVG Checker|Commons SVG Checker}}.
</div>

<div lang="en" dir="ltr" class="mw-content-ltr">
The reasons why the same file becomes rendered differently depending on context is a result of how these contexts (browsers or programs) interpret the file’s SVG code and use that code to generate the image. Aim to create a "least common denominator" SVG that renders correctly no matter what browser is used to open it, and never assume that your own image editing program is showing you what the image will really look like to other viewers. Previewing SVGs in a Web browser (rather than vector graphics editor) can reveal some problems. It is sometimes helpful in tuning and tweaking the SVG code, especially in conjunction with {{C|DOM Inspector}} tools.
</div>

<div lang="en" dir="ltr" class="mw-content-ltr">
Also, some programs will allow you to insert raster-based components into your file without warning you that if the file is converted into SVG these components will not simultaneously convert to vectors, meaning that you may need to be very careful about the sorts of filters and effects you include in an image and should check for any extraneous embedded "links" within an image before you upload the SVG to Commons. How to do this will vary from program to program.
</div>

<div lang="en" dir="ltr" class="mw-content-ltr">
However, if you are using Adobe Illustrator, here are examples of things which will cause Illustrator to convert a path into a raster component:
</div>
* <span lang="en" dir="ltr" class="mw-content-ltr">Any pattern applied to any fill, including patterns that are automatically included in Illustrator. You can sometimes work around this by converting any patterns you have used into rasters yourself, and then using the Image&rarr;Trace function to convert these back into vectors.</span>
* <span lang="en" dir="ltr" class="mw-content-ltr">Any path which contains more than one of Illustrator’s "Effects"&nbsp;— e.g., a fisheye warp and a freehand distort. Illustrator cannot handle two of these in the Appearance menu of any single path and will rasterize them.</span>
* <span lang="en" dir="ltr" class="mw-content-ltr">Any path which has been altered with an Envelope-distortion. You can sometimes work around these in the same way you can work around the pattern problem mentioned above, but the results are usually disappointing.</span>
* <span lang="en" dir="ltr" class="mw-content-ltr">Any path which has been assigned the Raster effect under the Effects menu. To retain these as vectors, you may only need to undo this effect.</span>
* <span lang="en" dir="ltr" class="mw-content-ltr">Illustrator allows users to apply gradients to strokes in three ways: gradients ''within'' strokes, gradients ''along'' strokes, and gradients ''across'' strokes. However, only the first of these, gradients ''within'' strokes, is supported by an equivalent SVG code; any strokes containing gradients along or across them will be converted into rasters when the image is saved in SVG format.</span>

<div lang="en" dir="ltr" class="mw-content-ltr">
These are just a few examples of things which will cause Illustrator to produce a raster when a vector was intended. The simpler these paths can be, the more likely Illustrator will be able to retain them as vectors.
</div>

<div lang="en" dir="ltr" class="mw-content-ltr">
: For more information on how to check SVG files for MediaWiki, ''see {{section link||How SVG files work in MediaWiki}}''.
</div>

<span id="Document_declaration"></span>
=== 文書宣言 ===
<syntaxhighlight lang="xml" class="floatright" style="border:1px solid #999; font-size:85%; clear:right;">
<?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"
>
</syntaxhighlight>

<div lang="en" dir="ltr" class="mw-content-ltr">
The source code of every SVG file {{best current practice|should}} begin with the XML processing instruction.<ref>W3C: [https://www.w3.org/TR/REC-xml/#dt-xmldecl XML declaration]</ref> The XML processing instruction specifies the version of XML and the character set.<ref>W3C: [https://www.w3.org/TR/REC-xml/#sec-prolog-dtd SVG – Prolog and Document Type Declaration]</ref> The [[:en:World Wide Web Consortium|W3C]] insists that [[:en:Character encodings in HTML#Specifying the document's character encoding|character encoding declaration]] {{best current practice|should}} be used,<ref>W3C: [https://www.w3.org/TR/REC-xml/#charencoding XML charencoding]</ref> (the [https://validator.w3.org/ W3C's validator] warns only for its absence).
</div>
<div lang="en" dir="ltr" class="mw-content-ltr">
The software with which you create or edit the SVG file should provide the option of choosing character encoding. {{W|UTF-8}} is {{best current practice|recommended}} for internationalization as opposed to {{W|ANSI}} or {{W|Unicode}} encodings other than UTF-8. The absence of the XML declaration will lead to a mild confusion when the SVG source file on a Wikimedia server is opened in a browser: the raw XML code will be displayed instead of being rendered into an image. This is not an issue if you download the source SVG file to your device and open it locally.
</div>

<div lang="en" dir="ltr" class="mw-content-ltr">
A DOCTYPE declaration with its [[w:en:Document type declaration|DTD]] is not needed and it is official not recommend to use a DTD,<ref name="noDTD" /> but neither it is recommended to not use a DTD. SVG 1.0 and SVG 1.1 have DTD specifications, but SVG 2.0 will not have one. The SVG DTD will validate the SVG, but the DTD is not aware of any extensions. Consequently, a DTD validator will list as errors [[w:Resource Description Framework|RDF]] metadata and the additional elements and attributes that Inkscape includes with its SVG output. Wikimedia servers also restrict what can be included in a DTD's internal subset, so it is no longer possible to extend the SVG DTD to include additional elements and attributes.
</div>

<div lang="en" dir="ltr" class="mw-content-ltr">
The <code>svg</code> root element should follow. It {{best current practice|must}} specify the {{W|XML namespace}} for SVG, <code><nowiki>xmlns="http://www.w3.org/2000/svg"</nowiki></code>;<ref>http://www.w3.org/TR/SVG/struct.html#NewDocumentOverview</ref> without the SVG namespace, an SVG image will not render. (The default namespace is specified with <code>xmlns</code>.) Other namespaces may be included in the <code>svg</code> element. For example, if the file uses linking,<ref>W3C: [https://www.w3.org/TR/SVG/linking.html SVG linking]</ref> then the <code>xlink</code> namespace <code><nowiki>xmlns:xlink="http://www.w3.org/1999/xlink"</nowiki></code> should be declared.
</div>
<div lang="en" dir="ltr" class="mw-content-ltr">
The SVG <code>version</code> number {{best current practice|should}} be included (typically 1.1). Software normally supplies these namespace declarations and may include other namespaces.
</div>

属性の<code>width</code>、<code>height</code>の既定値は<code>"100%"</code>であり、これにより縮尺を自動で調整できます。画像の指定が<code>width="400px"</code> である場合、画像コンテナいっぱいではなく幅 400 ピクセルで表示したいと伝えています。

残念なことに、大半のソフトウェアのツールでは、これら属性を固有の値に制限しています。<code>svg</code> 要素には <code>viewBox</code><ref>W3C: [https://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute SVG viewBox]</ref> 属性を指定してください。表示ボックスは画像のどの部分を表示させるか決定します。このボックスは画像コンテナの面積に合わせて、幅と高さが転換されます。

<span id="Bitmaps"></span>
=== ビットマップ ===

<div lang="en" dir="ltr" class="mw-content-ltr">
There are some valuable uses of bitmap images within SVG files, such as annotating a photograph (e.g., labeling the parts in an anatomical photograph; the labels can be easily translated), which takes the best from the two worlds: vectorizing a photograph or ray-traced image would produce large files that scale unnaturally and poorly, while rendering any added fonts and hard edges into a pure bitmap would lead to a loss of detail when scaled, and ringing around the edges. However, most uses of bitmaps in SVG files are not necessary and bitmaps are often better converted or redrawn as vectors. Bitmaps should be included within an SVG file if for some reason this is the best solution, but should be redrawn as vectors if this yields an overall better or more informative image. Further, other editors who come across the image on Commons may decide to apply the tag {{tl|BadSVG}} to an SVG image containing undesirable raster-based elements.
</div>

<div lang="en" dir="ltr" class="mw-content-ltr">
Please think carefully about using bitmaps in SVG files, and consider ''[[#Converting to SVG|converting]]'' them or redrawing them as vectors when incorporating them into an image rather than including a bitmap directly. See the ''[[Help talk:SVG#Undesirable Restrictions|talk page]]'' for further discussion of this issue. If you do decide to use a bitmap image, please be sure to embed and not link to the image; otherwise it won't render.
</div>

<span id="Animation"></span>
=== アニメーション ===

<div class="mw-translate-fuzzy">
[[:en:SVG animation|SVG画像はアニメーション化できます]]が、SVGは[[Wikimedia]]プロジェクトで使用されるときにラスターのPNGフォーマットに変換されるため、アニメーションはSVGファイルがブラウザーに読み込まれた場合にのみ表示されます。SVGを読み込むには、記事ページから画像をクリックして<code>File:</code>ページに行き、さらに画像をクリックする必要があります。
</div>

SVGのアニメーション化する方法はもともとSMILを使用していました。最近では、CSSアニメーションが利用できるようになりました。

SMIL はブラウザー全般でサポートが減少しています。Internet Explorer はサポートしていない、Google では SMIL は2015年に非推奨、将来 Google Chrome から SMIL を完全に削除する可能性があります<ref>{{cite web|url=https://groups.google.com/a/chromium.org/forum/#!msg/blink-dev/5o0yiO440LM/59rZqirUQNwJ|title=非推奨にする意図: SMIL|publisher=Google Groups|author=Philip Rogers|date=2015-04-30|accessdate=2015-06-27}}</ref>。2018年7月時点で SVG SMIL アニメーションはほとんどのブラウザで利用でき、Internet Explorer、Edge、Opera を除外します<ref>https://caniuse.com/#feat=svg-smil</ref>。

SVG ファイルに動画と同じタグを付けるには''{{section link||SVG ファイルにタグ付けする}}'' の節をご参照ください。

<span id="Title"></span>
=== 題名 ===

 SVG 要素の真下にある[https://www.w3.org/TR/SVG/struct.html#TitleElement <code>title</code> 要素]の用途として SVG 画像そのものの題名を記しますが、ただし SVG 画像内の子要素のさらに下位にも適用できます。最新版のデスクトップ・ブラウザのほとんどは、これらの題名を [[:en:tooltip|tooltips]] にポップアップ表示して読者がマウスカーソルを当てたときにオブジェクトの意味を識別でき、それはオブジェクトの横に文字ラベルがある場合にも有効です。
同様にファイル名の文字列にメッセージを織りこむこともできるものの、むしろタイトル要素のヒントになるように下線など文字装飾をするようお勧めします。 通常、[[:en:XML#Comments|XML コメント]]は読者に示さない技術情報に適していて、SVG ソースコードの編集をするであろう他の利用者にのみ表示させます。

現在、ほとんどのモバイル・ブラウザーは、SVG 要素の直下にあるタイトル文字列を除くと、本質的にタイトル文字列を表示できません。これはモバイル機器上でポインタを当てる要素に相当するものが存在しないからです。

<syntaxhighlight lang="xml">
<?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>SVG 画像全体のファイル名</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>矩形の題名</title><!--XML comment-->
		</rect>
		<circle cx="5" cy="5" r="3" fill="#0f0"/>
		<text x="2" y="30" text-decoration="underline">テキスト
			<title>テキストのタイトル</title>
		</text>
	</g>
</svg>
</syntaxhighlight>

<span id="Blocked_Elements_and_Scripting"></span>
=== 禁止された要素とスクリプティング ===

セキュリティ上の理由から、[[MediaWiki]]は以下のパターンを含むSVGファイルを受け付けません。
<syntaxhighlight lang="xml">
<!-- 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=""
</syntaxhighlight>
問題のあるSVGファイルをサニタイズするには、https://svgworkaroundbot.toolforge.org/ が利用できます（<code>santicize potenitally dangerous commands</code>を有効化してください）。詳細は[[User:JoKalliauer/IllegalSVGPattern]]を参照してください。

機能上の制限により、XML-Parserは以下のパターンを認識できないか、ブロックします。
<syntaxhighlight lang="xml">
<!--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'/>">
]>
</syntaxhighlight>

<span id="External_files"></span>
=== 外部ファイル ===

SVG 画像の最終版を保存する前に、そのファイル作成中に他のファイルへのリファレンス（「リンク付け」の役割）を作ったので、それらを全部、消去します。もし除去しないものが SVG 文中に残ると、レンダラは外部ファイルを探せなくて表示に失敗します。ウィキメディアではそのようなアップロードを防止しており、そのファイルを保存できません。

<span id="Tidying_up"></span>
=== 片付け ===

<div lang="en" dir="ltr" class="mw-content-ltr">
It’s also a good idea to remove or "vacuum" any unused definitions (defs), as these can needlessly bloat the size of the file (except when you need them for further edits, such as default templates).
</div>

<div lang="en" dir="ltr" class="mw-content-ltr">
There are three common SVG optimizers: [https://github.com/scour-project/scour scour], [https://github.com/RazrFalcon/svgcleaner svgcleaner] and [https://github.com/svg/svgo svgo], but be aware that all three optimizers have dozens of open bugs and are not actively developed any more,<ref>https://github.com/svg/svgo/issues/1055</ref><ref>https://github.com/RazrFalcon/svgcleaner/issues/213#issuecomment-589801095</ref><ref>https://github.com/scour-project/scour/commits/master</ref> for more optimization options and how to use them see [[Help:SVG guidelines#Using Optimizers|using Optimizers]].
</div>

<div lang="en" dir="ltr" class="mw-content-ltr">
But be aware that tidying up is controversial and often undesired, see [[User:JoKalliauer/Optimization#When is optimizing/validating files undesired?|When is optimizing/validating files undesired?]] for details and reasons. Tidying up or validating does not justify a reupload<ref>[[User:JoKalliauer/Optimization#SVG sourcecode edits without visual change]]</ref>. Invalid elements and attributes are often necessary for correct rendering, and should not be removed<ref>[[User:JoKalliauer/Optimization#Useless elements that should be kept]]</ref>.
</div>

<div lang="en" dir="ltr" class="mw-content-ltr">
=== Plain SVG, compressed SVG, generic specifications ===
</div>

<div lang="en" dir="ltr" class="mw-content-ltr">
Inkscape and other programs also allow users to save files in SVGZ (compressed binary SVG) format. This format is '''not''' supported on Commons and should not be applied to any images uploaded here. Such images cannot be uploaded.
</div>

<div lang="en" dir="ltr" class="mw-content-ltr">
Be aware in {{W|Adobe Illustrator}} and {{W|Inkscape}} are different options to save, see {{pg|Help:Inkscape#Inkscape_SVG_vs._Plain_SVG}} and {{pg|Help:Illustrator#How_to_save_as_an_Illustrator_SVG}}.
</div>
<div lang="en" dir="ltr" class="mw-content-ltr">
In Inkscape there are three possible svg-options: "Inkscape SVG", "plain SVG" and "optimized SVG". Inkscape SVGs is the best fileformat to reedit the file in Inkscape, otherwise informations such as layer or grids will be removed, such images should be taged with {{tl2|Created with Inkscape|2=IMPORTANT=yes}} to show they should not be [[#Tidying up|optimized]]. Plain SVG will be rendered identical as Inkscape SVGs and are a bit smaller. Optimized SVG uses a optimizer called scour, which can reduce the file-size even more and offers some workarounds for librsvg-bugs, such as [[phab:T217990]]<ref>https://github.com/scour-project/scour/wiki/Documentation#--renderer-workaround-and---no-renderer-workaround</ref>.
</div>

{{anchor|Fonts}}
<span id="Fonts,_text"></span>
=== テキスト・フォント ===
{{shortcut2|COM:FONTS}}

ウィキメディア上ではウィキメディアのサーバーにインストールされているフリーフォントで<code><text></code>要素を使ったテキストをレンダリングします。インストールされているフォントの一覧は[[meta:SVG fonts]]や[//noc.wikimedia.org/conf/fc-list the raw list]で見ることが出来ます。font-familyによってインストールされているfont-styleも様々です。以下の理由から、なるべく文字をアウトライン化せずにテキストとして保存してください。

* ファイルサイズが小さく済む。
* 情報の更新や誤字脱字の修��など文字を書き換える必要がある場合、他のユーザーでも修正しやすい。
* {{pg|Help:Translation tutorial|容易に翻訳すること}}ができる。パスに変換されていた場合、非常に煩雑な作業となる。[[Template:Translate]]も参照。
* 検索エンジンはパスのアウトラインを認識できない可能性がありますが、テキストは簡単に検索できます。

また、フォントの{{pg|Commons:Licensing|ライセンス}}がウィキメディアで受け入れ可能ではない場合、著作権の問題が生じます。文字をパスに変換した場合、その文字は使用しているフォントの{{pg|Commons:Derivative works|二次的著作物}}になるからです。

<div lang="en" dir="ltr" class="mw-content-ltr">
SVG files which should not convert text to path shape may be tagged with {{tl2|Path text SVG}}. For linking text ''modifiable'' (what we have been calling "text" or "font") and text ''non-modifiable'' (i.e., path-based) versions of an SVG file use {{tl2|Vector text versions|…}}.
</div>
[[File:Preserve text before converting to path.webm|thumb|<span lang="en" dir="ltr" class="mw-content-ltr">Demonstration of the basic steps of preserving the text before converting to path in {{W|Inkscape}} so the text can remain selectable (when opened in real-time in browser) and searchable (by search engine like Google).</span>]]
<div lang="en" dir="ltr" class="mw-content-ltr">
If you still insist converting text to path for reasons like the lack of support of <code>textPath</code> 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 <code>fill-opacity="0" stroke-opacity="0"</code> 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. <code>opacity="0"</code> may lead to some misunderstanding because it will make the highlight invisible while still selectable. <code>display="none"</code> prevents readers from searching the text without accessing the source code.
</div>

<div lang="en" dir="ltr" class="mw-content-ltr">
Converting text to outline (path) before exporting SVG is particularly popular among {{pg|Help:Illustrator#Text anchor|Adobe Illustrator}} users because the vector graphic software does not convert <code>text-align</code> attribute to <code>text-anchor</code> 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.
</div>

<div lang="en" dir="ltr" class="mw-content-ltr">
==== Not displayed text (Flowed Text bug) {{Anchor|flowed text|flowed text bug}} ====
</div>
{{See also|#Line wrap|§ Line wrap}}
<div lang="en" dir="ltr" class="mw-content-ltr">
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.<ref>Inkscape FAQ: [http://wiki.inkscape.org/wiki/index.php/Frequently_asked_questions#What_about_flowed_text.3F What about flowed text?]</ref> On Wikipedia, a flowed text box does not render at all ([[phab:T43424]] - depending on font size and color).
</div><ref name="File:FlowRoot_and_flowRegion.svg"><span lang="en" dir="ltr" class="mw-content-ltr">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 <code>path</code>-tag and create other shapes.</span></ref>

<div lang="en" dir="ltr" class="mw-content-ltr">
To avoid this issue in Inkscape:
</div>

<div lang="en" dir="ltr" class="mw-content-ltr">
* The easiest solution is to only use a single click (without dragging) to create text with Inkscape’s text tool. (In contrast when holding the mouse button and dragging the mouse to draw a text box, you're specifically telling Inkscape to use Flowed Text).
</div>

<div lang="en" dir="ltr" class="mw-content-ltr">
However there are some easy ways to fix this issue:
</div>

* フロー式テキストボックスをすでに作成済みなら、平文に変換するにはText<ref name="User:JoKalliauer/RepairFlowRoot#replace_notempty_flow-text_using_(Inkscape)">[[User:JoKalliauer/RepairFlowRoot#replace notempty flow-text using (Inkscape)]]</ref>「テキスト」 Text → 「変換」Convert の手順を済ませます（ただし変換後に必ず文字配置を確認、実行例全体の15%前後<ref><code>translate=".."</code>-もしくは<code>text-align=".."</code>-属性を使った場合に該当。</ref>の確率で、文字列を変換もしくは文字の配置を変更するため<ref>サンプルはこちら：[[:File:Petit Monde de Gondry, Jonze %26 Kaufman.svg]]</ref>）。
* 浮動させる文字列があり、1行だけの場合 (おそらく作業10回のうち9回はこれ) お使いのテキスト編集ソフトで平文に変換 (inkscape と見た目は同じ) してから、矩形の x 値と y 値を入れ替えるため flowRegion を `<code><text x=".." y=".."></code>-タグに変えます。別の方法として、文字例-編集-スクリプト string-edit-script を[[User:JoKalliauer/RepairFlowRoot#replace_the_flow-text_by_<text>_using_(Text-Editor)]] にあります<ref name="svg2validsvg">[https://github.com/JoKalliauer/cleanupSVG/blob/master/svg2validsvg.sh Github] からもダウンロード可能。</ref>で入手すると自動処理できます。

<div lang="en" dir="ltr" class="mw-content-ltr">
If you accidentally created a Flowed Text box which is empty (i.e. contains no text) it’s not visible or selectable in Inkscape but it still shows up as a black rectangle on Wikipedia. To delete it there are some possibilities:
</div>
* <span lang="en" dir="ltr" class="mw-content-ltr">Use Inkscape’s built in XML editor (Edit → XML Editor) and delete all Flowed Text boxes (search for all nodes which are called <code>&lt;svg:flowRoot id="flowRootXXXX"&gt;</code> in the tree view).</span>
* <span lang="en" dir="ltr" class="mw-content-ltr">Use a simple text editor (e.g. Notepad) and search for the text ''"flowRoot"''. Delete all Flowed Text boxes manually by removing their opening XML tag (<code>&lt;flowRoot ...&gt;</code>), their closing XML tag (<code>&lt;/flowRoot&gt;</code>), and all text between two matching tags.<ref name="User:JoKalliauer/RepairFlowRoot#delete_empty_flow-text_using_(Text-Editor)">[[User:JoKalliauer/RepairFlowRoot#delete empty flow-text using (Text-Editor)]]</ref></span>
* 単に不可視な矩形を隠すだけなら<code><rect … '''fill-opacity="0"'''/></code>-tag (もしくは<code><path d="…" '''fill-opacity="0"'''></code>-tag) に`<code> fill-opacity="0"</code>`<ref name="Category:Images_with_SVG_1.2_features">[[:Category:Images with SVG 1.2 features]]</ref><ref name="User:JoKalliauer/RepairFlowRoot#That_the_black_square_won't_get_rendered_(Text-Editor)">[[User:JoKalliauer/RepairFlowRoot#That the black square won't get rendered (Text-Editor)]]</ref> を加入します。

<span id="Text_transform_limitations"></span>
==== 文字変換の制限 ====
[[File:Comparison raw text converted path.svg|thumb|<span lang="en" dir="ltr" class="mw-content-ltr">Comparison of SVG raw text rendering and text converted to path</span>]]

フォントのスケール調整は現状では（有効な変換マトリクスの場合）、水平と垂直のサイズ調整が予想どおりの挙動ではなく不均一です（水平方向の指定を無視：マトリクスから算出したフォントの高さのみ有効）。その波及効果は、幅の狭い・縮小済みの場合、あるいは他のフォントに対応して幅が拡張してある場合、文字列の幅が想定とは違って、文字ボックスからあふれてしまう（代替手段として、無償のフォントファミリーに差し替えると、既定で文字幅を縮めた・詰め打ちにした状態で使用可能。）

<div lang="en" dir="ltr" class="mw-content-ltr">
Text is guaranteed to be misplaced (and in some case, ugly {{W|kerning}}) if the resolution of the [[Wikipedia:Portable Network Graphics|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]]).<ref>Attribute <code>viewBox</code> in <code>SVG</code> element takes precedence in defining the native resolution if it differs from <code>width</code> and <code>height</code> attributes.</ref> 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).<ref>Font-kerning: Help with file at [[Special:PermanentLink/203530094#Help with File:GER-FRA 2016-07-07.svg?title=Commons:Graphics village pump|Graphics village pump]], compare also [[:File:Fonttest-Kerning.svg]].</ref>
</div>

<div lang="en" dir="ltr" class="mw-content-ltr">
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&nbsp;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 "''[[#fallback|Font substitution and fallback fonts]]''".
</div>

<div lang="en" dir="ltr" class="mw-content-ltr">
The attribute ''textLength'' isn't fully supported and could not rendered correctly. See [[phab:T15387]].<ref>[https://www.w3.org/TR/SVG/text.html#TextElementTextLengthAttribute textLenght attribute] in w3.org</ref>
</div>

<div lang="en" dir="ltr" class="mw-content-ltr">
==== Writing mode limitation ====
</div>
[[File:SVG Test Vertical Chinese Fonts.svg|thumb|<span lang="en" dir="ltr" class="mw-content-ltr">The top-to-bottom writing mode test cases that show it works with some but not all Chinese fonts.</span>]]

<div lang="en" dir="ltr" class="mw-content-ltr">
RSVG recognizes [https://www.w3.org/TR/SVG11/text.html#WritingModeProperty <code>writing-mode</code>] property, but there are problems with some fonts on Commons (especially the default font). That some fonts work suggests that the problem lies with the font rather than RSVG. The problem is the vertical spacing causes the characters to overwrite each other ([[phab:T65236]]). For example, the typical way of producing vertical text does not work:
</div>

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

<div lang="en" dir="ltr" class="mw-content-ltr">
The workaround is to specify a font that works rather than relying on the default Chinese font (which is probably <code>WenQuanYi Zen Hei</code>). Suitable fonts are <code>Noto Sans CJK SC</code> or <code>AR PL UKai TW</code> or <code>monospace</code>.
</div>


{{Anchor|fallback}}

<div lang="en" dir="ltr" class="mw-content-ltr">
==== Font substitution and fallback fonts ====
</div>
[[File:SVG Text Font Test.svg|thumb|500px|<span lang="en" dir="ltr" class="mw-content-ltr">How the fallback-fonts are rendered.</span>]]
<div lang="en" dir="ltr" class="mw-content-ltr">
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 <code>librsvg</code>, the default font is ''Liberation Serif''.
</div>

<div lang="en" dir="ltr" class="mw-content-ltr">
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 <code>font-family</code> 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.<ref>http://www.w3.org/TR/SVG/fonts.html#FontFaceElementFontFamilyAttribute</ref><ref>[https://www.w3.org/TR/2008/REC-CSS2-20080411/fonts.html#generic-font-families www.w3.org/TR/2008/REC-CSS2-20080411/fonts.html#generic-font-families]</ref> That means most SVG user agents should support the generic font families of <code>serif</code>, <code>sans-serif</code>, <code>cursive</code>, <code>fantasy</code>, and <code>monospace</code>. It is good practice to use a generic font family as the last entry in the font family list. For the <code>librsvg</code> on Commons:
</div>

<div lang="en" dir="ltr" class="mw-content-ltr">
* <code>sans-serif</code> maps to ''DejaVu Sans''
* <code>serif</code> maps to ''DejaVu Serif''
* <code>cursive</code> maps to the uninteresting ''DejaVu Sans''
* <code>fantasy</code> maps to the uninteresting ''DejaVu Sans''
* <code>monospace</code> maps to ''DejaVu Sans Mono''
</div>

<div lang="en" dir="ltr" class="mw-content-ltr">
On Commons, <code>librsvg</code> 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 <code>librsvg</code>, 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 <code>Trebuchet, sans-serif</code>).
</div>

<div lang="en" dir="ltr" class="mw-content-ltr">
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 <code>font-family: Arial</code> to <code>font-family: 'Liberation Sans', Arial, sans-serif</code>.
</div>

<div lang="en" dir="ltr" class="mw-content-ltr">
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: ‘<code> Liberation Sans, Arial, WenQuanYi Zen Hei, SimHei, sans-serif</code>’. 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.
</div>

<div lang="en" dir="ltr" class="mw-content-ltr">
* '''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.
</div>
{| class="wikitable"
|-
! <span lang="en" dir="ltr" class="mw-content-ltr">desired font</span> !! <span lang="en" dir="ltr" class="mw-content-ltr">Wiki-fallback</span> !! <span lang="en" dir="ltr" class="mw-content-ltr">possible fallback definition that will look similar<br>(works on Wikimedia/Windows/Linux/Mac)</span>
|-
| ''[-<span lang="en" dir="ltr" class="mw-content-ltr">no definition</span>-]'' || Liberation Serif ||
<!-- serif -->|-
| <span lang="en" dir="ltr" class="mw-content-ltr">''serif''</span> || DejaVu Serif<ref name="T180923">[[User:AntiCompositeNumber]] on [[phab:T180923#6557063]]</ref> || <code>font-family="serif"</code>
|-
| Times New Roman || Liberation Serif || <code>font-family="Liberation Serif,Times New Roman,Times,Times-Roman,serif"</code>
<!-- sans-serif -->|-
| <span lang="en" dir="ltr" class="mw-content-ltr">''sans-serif''</span> || DejaVu Sans<ref name="T180923" /> || <code>font-family="sans-serif"</code>
|-
| Arial || Liberation Sans || <code>font-family="Liberation Sans,Arial,Nimbus Sans L,Helvetica,sans-serif"</code>
|-
| Helvetica || Nimbus Sans L || <code>font-family="Nimbus Sans L,Ubuntu,Liberation Sans,Helvetica,Arial,sans-serif"</code>
|-
| Calibri || || <code>font-family="Liberation Sans,Carlito,Calibri,Segoe UI,Myriad,UnDotum,Optima,Tahoma,Arial,sans-serif"</code>
<!-- neither serif nor sans-serif -->|-
| <span lang="en" dir="ltr" class="mw-content-ltr">''monospace''</span> || DejaVu Sans Mono || <code>font-family="monospace"</code>
|-
| Courier New || Liberation Mono || <code>font-family="Liberation Mono,Courier New,Courier,monospace"</code>
|-
| ''[-<span lang="en" dir="ltr" class="mw-content-ltr">everything unknown</span>-]'' || DejaVu Sans ||
|}


<div lang="en" dir="ltr" class="mw-content-ltr">
==== Layout with text and tspan elements ====
</div>

<div lang="en" dir="ltr" class="mw-content-ltr">
Although you can use only the <code>text</code> element to render simple text in the image, the <code>tspan</code> element can be useful to handle text which the position of the word is dependent to the other.<ref>[https://www.w3.org/TR/SVG11/text.html#TSpanElement W3C: SVG – The ‘tspan’ element]</ref> A <code>tspan</code> element must be nested within the <code>text</code> element, and then more <code>tspan</code> can be nested within this <code>tspan</code>, all styling defined in the parent <code>text</code> element will be inherited by its child <code>tspan</code> elements. For example:
</div>

<syntaxhighlight lang="xml">
<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>
</syntaxhighlight>

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

しかしながら、<code>tspan</code> の使用は回数を多くしないのがコツであり、<code>text</code> 要素内のすべての<code>tspan</code> 要素に単一の絶対X座標をきちんと定義している場合も対象です。というのも、既定の <code>xml:space</code> 定義によると（<code>text</code> もしくは <code>tspan</code>内部の）[[:en:newline|改行]]では、その直後の半角スペースを自動で空白記号に痴漢するからです<ref>[https://www.w3.org/TR/SVG11/text.html#WhiteSpace W3C: SVG – White space handling]　空白記号の処理。</ref>。複数個の改行マークが偶然、連続した場合に処理しても、空白記号1件になります。これは、改行マークの後に絶対X座標付きの<code>tspan</code> 要素が置いてあり、左寄せであった場合に限定されます（既定値としての text-anchor=start）。もし<code>xml:space</code> に <code>'preserve'</code> 値を指定した場合、librsvg によってインデントを長い {{W|タブ記号}}に変換され、長さは半角スペース記号8文字分です。XML編集ソフトウェアのほとんどに自動フォーマットもしくはインデント繰り返し機能（{{w|インデントの書式設定}}）が組み込んであり、編集ソフトウェアは新しい XML 子タグごとに自動でインデントを作成します。そのような <code>tspan</code> の使用法が SVG ファイルに含まれているなら、インデントの繰り返しは慎重に。

<div lang="en" dir="ltr" class="mw-content-ltr">
The behaviors in different SVG renderers to this issue varies much and is usually inconsistent to the W3C specification (also the <code>'preserve'</code> value of <code>xml:space</code> will be deprecated in SVG 2.<ref>[https://www.w3.org/TR/SVG2/struct.html#LangSpaceAttrs W3C: SVG 2 - The ‘xml:lang’ and ‘xml:space’ attributes]</ref>). The only problem with librsvg is that it never converts the line break alone into space no matter which value of <code>xml:space</code> is given if there is no trailing space or indent before the <code>tspan</code> 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 <code>end</code> or <code>middle</code> values of <code>text-anchor</code> property always align the text 1 space leftward because the new line and/or the trailing tab or space after the closing <code>tspan</code> tag is converted to an unexpected space character.<ref>librsvg still preserves this extra space character but during the middle or end text alignments, this space character is ignored.</ref>
</div>

{| class="wikitable"
!<span lang="en" dir="ltr" class="mw-content-ltr">Re-indentation</span> !! <span lang="en" dir="ltr" class="mw-content-ltr">XML Code</span> !! <span lang="en" dir="ltr" class="mw-content-ltr">Result</span>
|-
!<span lang="en" dir="ltr" class="mw-content-ltr">Before</span>
|
 <text>
 &nbsp; <tspan>O</tspan><tspan>n</tspan><tspan>e</tspan>
 </text>
| One
|-
!<span lang="en" dir="ltr" class="mw-content-ltr">After</span>
|
 <text>
 &nbsp; <tspan>O</tspan>
 &nbsp; <tspan>n</tspan>
 &nbsp; <tspan>e</tspan>
 </text>
| O n e
|}

<div lang="en" dir="ltr" class="mw-content-ltr">
Inkscape is buggy to render <code>tspan</code>, for example, inheriting <code>text-anchor</code> property from the first <code>tspan</code> element incorrectly for the subsequent <code>tspan</code> elements even if the property is specifically given a value in all <code>tspan</code> elements.<ref>https://bugs.launchpad.net/inkscape/+bug/168023</ref> 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 <code>&#160<span>;</span></code> to replace each general space so it will not be hidden in Inkscape.
</div>

<div lang="en" dir="ltr" class="mw-content-ltr">
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).
</div>

<div lang="en" dir="ltr" class="mw-content-ltr">
===== Line wrap =====
</div>

<div lang="en" dir="ltr" class="mw-content-ltr">
SVG 1.1 does not provide any form of {{w|line wrap}} (either hard or soft). Any line wrap should be done manually by repositioning new <code>text</code> or <code>tspan</code> elements with the same absolute x coordinate and a new y coordinate. For <code>tspan</code> elements, the next line's y coordinate can be set with the <code>dy</code> attribute. Although <code>textPath</code> can handle a similar situation,<ref>[https://www.w3.org/TR/SVG11/text.html#TextPathElement W3C: SVG – The ‘textPath’ element]</ref> this element is not supported by librsvg/Wikimedia ([[phab:T11420]]).
</div>

<div lang="en" dir="ltr" class="mw-content-ltr">
A draft of SVG 1.2 did address line wrapping, but there is little support.
</div>

SVG 2.0 の下書き版は線分のラッピングができますが、2018年5月時点で未対応なのは Chrome、Firefox、Edge、<code>librsvg</code> です。

<div lang="en" dir="ltr" class="mw-content-ltr">
==== Font styling class ====
</div>

<div lang="en" dir="ltr" class="mw-content-ltr">
Usually it is simply gratuitous use of the ‘[https://www.w3.org/TR/SVG/styling.html#StyleAttribute <code>style</code> attribute]’. To ease the process of updating font-family for every text or tspan elements, you can define the font CSS class(es) within ‘[https://www.w3.org/TR/SVG/styling.html#StyleElement <code>style</code> element]’ and apply the <code>class</code> property in elements like this:
</div>
<syntaxhighlight lang="xml">
<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>
</syntaxhighlight>
<div lang="en" dir="ltr" class="mw-content-ltr">
CSS class defined in ‘<code>style</code> element’ can also be used for other SVG elements (e.g. <code>g</code> and <code>path</code>) despite the misleading <code>type="text/css"</code> 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.
</div>

<div lang="en" dir="ltr" class="mw-content-ltr">
Contrary to popular belief the <code>style</code> 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. <code><path fill="#fff" stroke="none"/></code> instead of <code><path style="fill:#fff;stroke:none"/></code>).<ref>[https://jwatt.org/svg/authoring/#the-style-attribute Avoid the ‚style‘ attribute where possible]</ref> However, if you need to override the element style defined in <code>style</code> element, you do need to employ <code>style</code> attribute. If you need to override the style for <code>text</code> element without <code>style</code> attribute, you can use a <code>tspan</code> element container to nest the text you need to override the style, presuming there is nothing predefined in <code>style</code> element for <code>tspan</code> element.
</div>

<div lang="en" dir="ltr" class="mw-content-ltr">
; Note
* [[phab:T68672]] – CSS style element get ignored if the default value <code>type="text/css"</code> is omitted.
* [[phab:T43423]] – CSS child selectors are not supported by librsvg.
* [[phab:T68551]] – CSS classes on <code>text</code> elements get not inherited on child <code>tspan</code> elements. If you want this, you need to add a separate class for <code>tspan</code> as well, or use simply groups (but not in the text element as it Scour unfortunately does).
</div>

<div lang="en" dir="ltr" class="mw-content-ltr">
==== Text with background edge ====
</div>

[[File:Text background edge.svg|300px|right]]
<div lang="en" dir="ltr" class="mw-content-ltr">
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:
</div>

<syntaxhighlight lang="xml">
<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>
</syntaxhighlight>

<div lang="en" dir="ltr" class="mw-content-ltr">
* "stroke-linejoin:round" is defined to avoid sharp corner of the text stroke.
</div>

<div lang="en" dir="ltr" class="mw-content-ltr">
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.
</div>

<div lang="en" dir="ltr" class="mw-content-ltr">
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:
</div>

: <syntaxhighlight lang="xml">
<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>
</syntaxhighlight>

SVG フィルターを使う方法でも文字を囲む背景の透明な矩形のサイズを決めることができます。矩形を塗ってからそのあとで文字をペイントするよりもフィルターで指定するほうがエラーに自動対処できます。矩形の大きさを固定してしまうと、文章に採用したフォントがはみ出してしまうかもしれません。あるいは文章の変更ごとに矩形の大きさを調整する必要が発生します。たとえば、文章を翻訳すると矩形を変える可能性があります。フィルターの採用によってサイズは自動で調整されます。

: <syntaxhighlight lang="xml">
<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>
</syntaxhighlight>

<div lang="en" dir="ltr" class="mw-content-ltr">
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).
</div>

<div lang="en" dir="ltr" class="mw-content-ltr">
If you have lot of text that needs to be rendered with a stroke background, you can manually include the text within <code><g></code>, <code><text></code> and <code><tspan></code> elements. The <code><g></code> element which will be rendered underneath, apply the stroke, then <code><nowiki><use></nowiki></code> the text group of <code><text></code> element without a stroke and fill the font with contrasting color:
</div>

<syntaxhighlight lang="xml">
<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"/>
</syntaxhighlight>

<div lang="en" dir="ltr" class="mw-content-ltr">
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.<ref>{{cite web
| url=https://www.w3.org/TR/SVG2/painting.html#PaintOrderProperty
| title=Chapter 11: Painting: Filling, Stroking and Marker Symbols
| publisher=W3C
| date=2012-08-12
| accessdate=2012-11-28
}}</ref>
</div>
Mozilla Firefox もこの属性を試験的に採用しましたが、SVG 2.0 の安定版が公開されるまで既定では無効になっています。この機能はまた Firefox.<ref>{{cite web
| url=https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/paint-order
| title=paint-order
| publisher=Mozilla Developer Network
| date=2013-01-12
| accessdate=2013-10-21
}}</ref> で about:config の入力値で有効にできます。

<div lang="en" dir="ltr" class="mw-content-ltr">
=== Gradients ===
</div>
[[File:Bugzilla 376027 test pattern.svg|thumb|Mozilla Firefox が原因の正しくないレンダリング。]]
Inkscape v0.46 の利用者であれば、画像が完璧に表示され「グラデーションを埋める」というメッセージが出ること、ブラウザの Opera や Firefox のブラウザだと「画像が乱れる」と気づくはずです。原因としてあり得るのは、グラデーションの最終の「stop」opacity set to 0. 格レーデントの最後の"ストップ"の不透明度の設定が 0 ではないでしょうか。Inkscape はこの最後のストップを無視するように見えますが、Firefox 3.0.6 と Opera 9.36 は両方とも、塗りつぶしたオブジェクト内の白い境界線としてレンダリングします。解決策は、最後のストップを削除するか（おそらく誤って作成された）、不透明度（および色）の数値を変えて、画像がブラウザで正しくレンダリングされるように修正します。

<div lang="en" dir="ltr" class="mw-content-ltr">
Note that Inkscape adds a JavaScript [[wikipedia:Polyfill (programming)|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.
</div>

Adobe Illustrator CS5、CS6、CC を採用しブラウザの Firefox を併用すると、グラデーションを含む Illustrator の「シンボル」は Commons PNG ファイルとして通常どおりレンダリングされるのに、これらのシンボルは SVG ファイル自体を Firefox で 開くと、空白で表示されると気づくかもしれません。他のブラウザでは — Google Chrome や Internet Explorer でさえ問題はなく、Illustrator の SVG 形式のロゴを正しいグラデーションでレンダリングするものの、2005 年以来、Firefox の設計者にとって既知のバグでこれまでのところ適切に修正できていないため（Mozilla の Bugzilla [https://bugzilla.mozilla.org/show_bug.cgi?id=376027 bug 376027] およびその他のレポート）、Firefox ではそのようなロゴを空っぽの形で表示します（グラデーションのないシンボルの線分やシンボル・パスには影響しません）。

<div lang="en" dir="ltr" class="mw-content-ltr">
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).
</div>

<div lang="en" dir="ltr" class="mw-content-ltr">
=== Blurring ===
</div>
[[File:SVG blur sample.PNG|thumb|<span lang="en" dir="ltr" class="mw-content-ltr">Comparison of gaussian blur filter effect between Google Chrome and Wikimedia. ([[:File:SVG Blur sample.svg|Source SVG file]])</span>]]
<div lang="en" dir="ltr" class="mw-content-ltr">
Wikimedia’s SVG renderer currently supports various filter effects, but some effects such as {{W|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 [https://www.w3.org/TR/SVG/masking.html#ClippingPaths clipPath] before applying filter effect), creating an undesirable filter effect against the image edge.
</div>

<div lang="en" dir="ltr" class="mw-content-ltr">
=== Size ===
</div>

<div lang="en" dir="ltr" class="mw-content-ltr">
* The {{pg|Commons:Maximum file size|maximum file size}} on Commons is 4 GiB (4,294,967,296 bytes) for users of UploadWizard and other tools that support chunked uploads. Although big files can be uploaded, they cause [[Commons:Graphics village pump#svg file size|problems when user opens the file]].
* {{pg|Commons:Maximum_file_size|The maximum size for thumbnails}} for SVG files is 10 MB.
* [[#Frequently asked questions|the recommended image height]] is around 400–600 pixels
</div>

<div lang="en" dir="ltr" class="mw-content-ltr">
====Reducing the file size ====
</div>

<div lang="en" dir="ltr" class="mw-content-ltr">
If the file is too big, reduce/optimize it by:
</div>
<!--T:352-->
* <span lang="en" dir="ltr" class="mw-content-ltr">using a special program</span>
** <span lang="en" dir="ltr" class="mw-content-ltr">an SVG optimizer shown in {{slink|#Specialized app}}</span> 
** <span lang="en" dir="ltr" class="mw-content-ltr">Inkscape, save as an optimised svg file</span>
* <span lang="en" dir="ltr" class="mw-content-ltr">manually editing the file</span>
** <span lang="en" dir="ltr" class="mw-content-ltr">manually cleaning up your code<ref>[https://www.webpagefx.com/blog/web-design/optimize-svg-files/ A Simple Trick for Optimizing SVG Files by WebpageFX]</ref></span>
** <span lang="en" dir="ltr" class="mw-content-ltr">editor and regex, [[:File:Preimages of the circle under map f(z) = z*z+0.25.svg|example]]</span>
** <span lang="en" dir="ltr" class="mw-content-ltr">creating groups</span>
** <span lang="en" dir="ltr" class="mw-content-ltr">Reducing the precision of numbers<ref>[https://css-tricks.com/lodge/svg/35-optimizing-svg-tools/ 35-optimizing-svg-tools by CSS-Tricks]</ref><ref>[https://css-tricks.com/understanding-and-manually-improving-svg-optimization/ css-tricks : understanding-and-manually-improving-svg-optimization]</ref></span>
** <span lang="en" dir="ltr" class="mw-content-ltr">removed unneeded code such as:</span>
*** [[#Tidying up|<span lang="en" dir="ltr" class="mw-content-ltr">remove any unused definitions (defs), as these can needlessly bloat the size of the file</span>]]
*** <span lang="en" dir="ltr" class="mw-content-ltr">comments, code formatting, spaces, but it will make code obfuscated (less readable) and usually have a negligible impact on file size and rendering time.)</span>
* <span lang="en" dir="ltr" class="mw-content-ltr">editing the program (script) for creating the file and:</span>
** <span lang="en" dir="ltr" class="mw-content-ltr">use fewer points for curves</span>
** <span lang="en" dir="ltr" class="mw-content-ltr">draw fewer curves</span>


<span id="Translations"></span>
=== 翻訳 ===

SVG ファイルは翻訳可能で、また1枚の画像を多言語化できます（訳文を埋め込むこと）。詳細は、{{pg|Commons:Translation possible/Learn more}}をご参照ください。

{{anchor|Converting to SVG}}

<span id="Converting_to_SVG"></span>
== SVG に変換する ==
{{See also|Commons:Media for cleanup}}
SVG 以外の画像を加工するには、まずさまざまな方法で SVG 形式に変換します。プログラムの一覧は''{{section link||変換アプリ}}'' をご参照ください。

<div lang="en" dir="ltr" class="mw-content-ltr">
'''Note:''' For vector images where the vectorization was done by a third party, there is the issue where the vectorization code may have its own copyright even if the depicted image itself is out of copyright or below the threshold of originality. ''See {{section link||Copyright}} for more info.''
</div>

<div lang="en" dir="ltr" class="mw-content-ltr">
Generally, there are 3 ways to produce an SVG file, given an existing image:
# Regenerate it
# Convert it
# Create a new one
</div>

<div lang="en" dir="ltr" class="mw-content-ltr">
If you are unable to convert an image yourself, please add the tag {{tl|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.
</div>

<div lang="en" dir="ltr" class="mw-content-ltr">
=== Regenerate it ===
</div>

<div lang="en" dir="ltr" class="mw-content-ltr">
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.
</div>

<div lang="en" dir="ltr" class="mw-content-ltr">
=== Convert it ===
</div>

<div lang="en" dir="ltr" class="mw-content-ltr">
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.
</div>

<div lang="en" dir="ltr" class="mw-content-ltr">
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 "[[:en:Vectorization (computer graphics)|vectorization]]" or "tracing" — automatically generating a vector graphic from a raster image.
</div>

SVG エディタの多くは、変換履歴の機能があり、専用の''[[#Converters|変換アプリ]]'' もあります。Inkscape の場合、[[:W:en:Special:MyLanguage/potrace|potrace]] というプログラムを使います<ref>[https://inkscape.org/doc/tutorials/tracing/tutorial-tracing.html Inkscape チュートリアル: Tracing]</ref><ref>[http://wiki.inkscape.org/wiki/index.php/Tools#Vectorize.2Ftrace Inkscape 公式ウィキ: Tools: Vectorize/trace]</ref> 確定した方法として、ビットマップファイルを開き（File&nbsp;→&nbsp;Open…&nbsp;（ショートカットは Ctrl-O））、次にパスを指定します Path&nbsp;→&nbsp;Trace Bitmap…&nbsp;（Shift-Alt-B）。オプションはいろいろあります。これを使って処理した後��、アンダーの bitmap レイヤを忘れずに除去し、ノード数を減らすためにパスの簡略化も検討したいところです（Ctrl-L）。

<div lang="en" dir="ltr" class="mw-content-ltr">
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.
</div>

<div lang="en" dir="ltr" class="mw-content-ltr">
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.
</div>

<div lang="en" dir="ltr" class="mw-content-ltr">
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:
</div>

<div lang="en" dir="ltr" class="mw-content-ltr">
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.
</div>

ご利用の画像の SVG 形式を Illustrator で表示すると、さっき保存した時の画像とは ''非常に'' 印象が変わってしまったと思うかもしれません。これは this is because Illustrator が画像ファイル作成中に特定のコード類を作成して保存、それを表示しようとしてもうまく行かなかったせいです（SVG 形式は Illustrator 最適ではなく Adobe Illustrator＝AI 向き）。AI 形式のファイルなら、Illustrator も問題なく正しく表示できるし、SVG 形式だとIllustrator が作成したファイルでさえ、ときどき画像表示に苦労します。幸い、Illustrator 上では難しそうに見える SVG ファイルでも、通常はブラウザと Inkscape で表示するとレンダリングが正しい''見た目'' になります（Firefox では前述のような不具合がたまに発生。）

<div lang="en" dir="ltr" class="mw-content-ltr">
=== Create a new one ===
</div>

<div lang="en" dir="ltr" class="mw-content-ltr">
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.
</div>

<div lang="en" dir="ltr" class="mw-content-ltr">
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).
</div>

<div lang="en" dir="ltr" class="mw-content-ltr">
Once you have created an SVG image, upload it (under a new name), and tag the original raster image with {{tl|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.
</div>

<div lang="en" dir="ltr" class="mw-content-ltr">
== Uploading & categorizing ==
</div>

<div lang="en" dir="ltr" class="mw-content-ltr">
::: Every SVG file uploaded to Wikimedia Commons should show how it was made: use template '''{{tl|Inkscape}}''', {{tl|Adobe}}, {{tl|HandSVG}}, etc.
</div>

<div lang="en" dir="ltr" class="mw-content-ltr">
: You should check the appearance and the validity <u>'''''before'''''</u> you upload the file; use the tool {{pg|Commons:Commons SVG Checker|Commons SVG Checker}}
: If you are not sure or want to see first how librsvg will render your file, upload it to {{F|Test.svg}}
</div>

<div lang="en" dir="ltr" class="mw-content-ltr">
=== Image description pages ===
</div>

<div lang="en" dir="ltr" class="mw-content-ltr">
Uploading is described at {{pg|Commons:First steps/Upload form}}.
</div>

{{tl|information}} ボックスの領域をできるだけ文字で埋めるように配慮してください。画像に情報をたっぷり添えてあると、他の人がカテゴリを決めて分類する作業が楽になるし、翻訳も正しくなります。

<div lang="en" dir="ltr" class="mw-content-ltr">
See the ''{{section link||SVG software tags}}'' section for detailed information on a SVG media.
</div>

<div lang="en" dir="ltr" class="mw-content-ltr">
=== Categorizing SVG files ===
</div>
{| class="float-right"<!--Achtung: überprüfen-->
|<categorytree>SVG files</categorytree>
|}

<div lang="en" dir="ltr" class="mw-content-ltr">
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 <s>thousands and thousands of</s> more than 100,000 SVG files).
</div>

サブカテゴリの並べ替えは主題ではなく、'<code>*</code>' を使うと、技術要素に基づかせて、アルファベット順を回避できます（「……で作成」、「アニメ画像」、「有効」その他）。

<div lang="en" dir="ltr" class="mw-content-ltr">
==== The SVG categories tree ====
</div>

<div lang="en" dir="ltr" class="mw-content-ltr">
The main tree is [[:Category:SVG]], as a part of [[:Category:Images]] → [[:Category:Media types]].
</div>

<div lang="en" dir="ltr" class="mw-content-ltr">
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.
</div>

<div lang="en" dir="ltr" class="mw-content-ltr">
: See {{pg|Commons:Categories}} for general information.
</div>

<div lang="en" dir="ltr" class="mw-content-ltr">
==== Category naming conventions ====
</div>

カテゴリ名は「SVG」で始まり、続いて小文字始まりで主題を記す（固有名詞は大文字始まり）。たとえば化学に関連する SVG ファイルなら、カテゴリは[[:Category:SVGchemical]] 。命名規則がないまま長い年月が経ったせいで、この形式と一致しないファイル名が表示される場合があります。これらは時間の経過とともに修正される見込みです。

<span id="Tagging_SVG_files"></span>
=== SVG ファイルにタグ付けする ===
<!-- This is for comparing design of templates; later, we will include also documentation pages. -->
<div lang="en" dir="ltr" class="mw-content-ltr">
: See [[:Category:SVG marker templates]] for all SVG markers available.
</div>
{{Commons:SVG marker templates}}

<div lang="en" dir="ltr" class="mw-content-ltr">
== SVG files in MediaWiki ==
</div>

<div lang="en" dir="ltr" class="mw-content-ltr">
=== How SVG files work in MediaWiki ===
</div>

<div lang="en" dir="ltr" class="mw-content-ltr">
When you upload your SVG to Commons (or any other MediaWiki wiki), the software automatically produces PNG [[:en:thumbnail|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.
</div>

<div lang="en" dir="ltr" class="mw-content-ltr">
[[MediaWiki]] uses '''{{W|librsvg}}''' to convert SVG files to [[:en:PNG|PNG files]] for display (SVG rendering), it has some long and [[librsvg bugs|well-known bugs]] that should be fixed, so you might want to check your file with that program before uploading. <!--The Unix command line tool [http://ait08.us.es/cgi-bin/man/man2html?rsvg-view+1 rsvg-view] can be used to preview how SVG files will look when rendered by MediaWiki. -->You can test the SVG with {{pg|Commons:Commons SVG Checker|SVG Check}} for accurate PNG render preview and [https://validator.w3.org/#validate_by_upload W3 XML validator] for possible code errors or incompatibility of SVG elements or attributes.
</div>

: ''詳細情報：[[Commons:Transition to SVG#Limitations|MediaWiki SVG の制限事項]]''。

<div lang="en" dir="ltr" class="mw-content-ltr">
=== Scaling SVG files via MediaWiki ===
</div>

<div lang="en" dir="ltr" class="mw-content-ltr">
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 {{Nowrap|1=https://commons.wikimedia.org/w/thumb.php?f=Foo.svg&w=1000}} or by doing something like <code><nowiki>[[File:Foo.svg|1000px]]</nowiki></code> in the {{pg|Commons:Sandbox|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.).
</div>

<div lang="en" dir="ltr" class="mw-content-ltr">
=== Frequently asked questions ===
</div>
; <span lang="en" dir="ltr" class="mw-content-ltr">What are reasonable dimensions to choose for my SVG images?</span>{{Anchor|SVG size}}
: <span lang="en" dir="ltr" class="mw-content-ltr">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&nbsp;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 {{F|75%.svg|9 × 9&nbsp;pixels}} are too tiny, {{F|Bandera de Jarque.svg|3000&nbsp;×&nbsp;2000}} are too large.</span> <span lang="en" dir="ltr" class="mw-content-ltr">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.</span>
; <span lang="en" dir="ltr" class="mw-content-ltr">How to convert SVG file to raster format in my computer?</span>
: <span lang="en" dir="ltr" class="mw-content-ltr">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 [https://opensourcepack.blogspot.hk/2012/06/rsvg-convert-svg-image-conversion-tool.html 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 {{pg|Commons:PDF to image files|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 [[toolforge:convert|SVG preview on Wikimedia Toolforge]] which does not have the maximum side cap, although certain rendering results such as font may differ slightly.</span>
; <span lang="en" dir="ltr" class="mw-content-ltr"> Why doesn't my image render?</span>
: 理由は複数、考えられます。ほとんどの場合、おそらく外部ファイルの参照か、ビットマップのトレースの残存が原因です（Web サイトがこのもう1つのファイルを検出しようとしてレンダリングが停止するため）。問題解決には、最終バージョンの保存前に、必ずエディタで''他のファイルへの参照をすべて削除'' してください。 ビットマップファイルを処理する必要があるなら、Inkscape の画像埋め込み機能ですべて処理できます（エフェクト・メニュー&nbsp;→&nbsp;画像&nbsp;→&nbsp;全ての画像を埋め込む）。ぼかしなど特殊効果も使えます。現状、残念ながら {{W|librsvg}} では十分に対応できません。''前述の{{section link||PlainSVG、圧縮 SVG、一般仕様}}'' も参照してください。<!-- 説明が足りません。 -->
; <span lang="en" dir="ltr" class="mw-content-ltr">Where can I get extra help with SVG images?</span>
: <span lang="en" dir="ltr" class="mw-content-ltr">Try {{pg|Commons:Graphic Lab}} if you have a problem with an individual image. {{pg|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.</span>
; <span lang="en" dir="ltr" class="mw-content-ltr">How do you change the document size in Inkscape?</span>
: 文書のサイズは A4 判のページを基準にします。拡大も縮小も文書サイズは矩形の縦横を希望の大きさに設定して、矢印ツールで選択します。次に''ファイル&nbsp;→&nbsp;文書プロパティ'' と進んでカスタムサイズ欄の''ページを選択に合わせる'' (Fit page to selection) を選択、OK を押します。これで「選択用」の矩形は消去して、作ったばかりのこの要素に配置する他の要素の移動やサイズ変更の作業に移ります。(''File&nbsp;→&nbsp;Document Properties''、Custom Size&nbsp;→&nbsp;''Fit page to selection''&nbsp;→&nbsp;OK)
; <span lang="en" dir="ltr" class="mw-content-ltr">My text is appearing as little blocks, or isn't showing up at all after uploading to Commons!</span>
: <span lang="en" dir="ltr" class="mw-content-ltr">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".</span>
: <span lang="en" dir="ltr" class="mw-content-ltr">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&nbsp;→&nbsp;Object to Path''. This will convert the text to paths. Save as plain SVG, and reupload your file.</span>
; <span lang="en" dir="ltr" class="mw-content-ltr">My arrowheads/dashed lines are appearing as little blocks, or aren't showing up at all after uploading to Commons!</span>
: <span lang="en" dir="ltr" class="mw-content-ltr">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&nbsp;→&nbsp;Stroke to Path''. This will convert the strokes to paths. Save as plain SVG, and reupload your file.</span>
; {{Anchor|transparent background}}背景に透明な箱があるけど、除去するには？
: 作業の必要がありますか？ 通常はそのままで大丈夫。MediaWiki のレンダラはファイル形式を SVG から PNG へ変換するときに自動で背景色に透明な白地を使います (PNG 透過性をサポートしないブラウザなら不透過の白色で表示。) SVG 透過性が組み込みされたブラウザなら画像の背景色は全て白色 (またはサムネールならグレー背景。) 画像背景を透明にしておくと将来の編集者の作業が楽で、その画像を別の背景色の上に表示させたときに大きな白箱が出ません。しかしながら、どうしても特定の画像に特定の色の「白身」が''欠かせない'' 場合には、画像と同寸の矩形をもう1個作り、背景色を決めて塗りつぶしてから、コマンドで背景に指定するには ''オブジェクト&nbsp;→&nbsp;下層へ移動'' と進みます。画像を保存すると、ソリッドな背景色が見えるはずです<ref>A feature bug report for this exists since {{date|2005|01}}以降、[https://bugs.launchpad.net/inkscape/+bug/166213 Inkscape launchpad] には機能のバグ報告あり。)</ref>(訳注＝''Object&nbsp;→&nbsp;Lower to Bottom''、保存)
; <span lang="en" dir="ltr" class="mw-content-ltr">My fonts aren't rendering correctly. What fonts are supported by the site’s renderer?</span>
: [[meta:SVG フォント]]に一覧があります。
; <span lang="en" dir="ltr" class="mw-content-ltr">I am using the same fonts installed in Wikimedia, but text positioning in my SVG image still looks differently between my local render and the Wikimedia render.</span>
: ローカルのレンダラがどのライブラリやバージョンを使っているかによって、対処は変わります。文字の配置その他、 SVG 要素（例えば"transform"）は、レンダリングのライブラリが変わると挙動が異なることは周知の事実です。ウィキメディアのレンダラにいちばん近いものは、librsvg を採用しているはずです。ブラウザならOpera、Chrome、Safariは正確な結果を返します。FirefoxとInternet Explorer 10はやや不正確。Safariだと、フォントのスムーズ処理を有効にした場合は、もう少しきれいに見えます。
; <span lang="en" dir="ltr" class="mw-content-ltr">I'm drawing a flag (or some other insignia) and it asks for {{W|PANTONE}} or {{W|CMYK}} colors. What do I do?</span>
: <span lang="en" dir="ltr" class="mw-content-ltr">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,[https://www.pantone.com/pages/pantone/colorfinder.aspx]{{Update inline}} 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 […]". <!-- The preceding sentence is for the case of CMYK, which have inconsistent results. --></span>


<div lang="en" dir="ltr" class="mw-content-ltr">
== Software ==
</div>

<div lang="en" dir="ltr" class="mw-content-ltr">
Many programs can handle SVG files. You may like to try one given below, though these are not the only programs around. Some are available for free download, while others are commercial software.
</div>

<div lang="en" dir="ltr" class="mw-content-ltr">
As SVG is just an XML specification, it is possible to write SVG files manually in a text editor, or with your own programs/scripts.<ref>[[:File:Poincare halfplane eptagonal hb.svg|Image made with C++ code by Claudio Rocchini]]</ref> In fact, many SVG images are written in text editors. An editor which can highlight the syntax is helpful. Check your work with the [https://validator.w3.org/ W3C SVG validator].
</div>

<div lang="en" dir="ltr" class="mw-content-ltr">
=== Viewers ===
</div>

<div lang="en" dir="ltr" class="mw-content-ltr">
All modern web browsers render SVG natively.
</div>
* <span lang="en" dir="ltr" class="mw-content-ltr">{{W|librsvg}}, a rendering library used by MediaWiki and the following viewers:</span>
** <span lang="en" dir="ltr" class="mw-content-ltr">[http://crpppc19.epfl.ch/cgi-bin/man/man2html?rsvg-view+1 RSVG-view for UNIX], a small, simple viewer to preview how SVG files will look when rendered by MediaWiki</span>
** <span lang="en" dir="ltr" class="mw-content-ltr">[https://code.google.com/p/ossbuild/source/browse/trunk/Shared/Build/Windows/Win32/bin/rsvg-view.exe RSVG-view for Windows] (same as above)</span>
** <span lang="en" dir="ltr" class="mw-content-ltr">{{pg|Commons:Commons SVG Checker}}, another librsvg-based rendered intended to find and report problems in SVG files</span>
* <span lang="en" dir="ltr" class="mw-content-ltr">[https://github.com/tibold/svg-explorer-extension Svg-explorer-extension], a free [[:en:GNU General Public License|GPL]] extension for {{w|Windows Explorer}} that generates thumnails for SVG files</span>
*  <span lang="en" dir="ltr" class="mw-content-ltr">[https://github.com/iAJTin/iShell iShell], a free [[:en:MIT License|MIT licensed]] extension for Windows Explorer that generates thumnails for SVG files</span>
*  <span lang="en" dir="ltr" class="mw-content-ltr">[https://github.com/AngusJohnson/SvgShellExtensions SvgShellExtensions.dll], a free [https://github.com/AngusJohnson/SvgShellExtensions/blob/main/LICENSE Boost licensed] extension for Windows Explorer that generates thumnails for SVG files, based on Image32 graphics library by the same author</span>
*  <span lang="en" dir="ltr" class="mw-content-ltr">[https://github.com/EtheaDev/SVGShellExtensions SVG Shell Extensions], a free [[:en: Apache License|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</span>
* <span lang="en" dir="ltr" class="mw-content-ltr">[https://github.com/RazrFalcon/resvg/ resvg], is one of the fastest and most correct SVG-render<ref>[[User:JoKalliauer/SVG test suites]]</ref>, also provides additional packages for viewer, optimizer (limited support) and extension for Windows Explorer</span>
* <span lang="en" dir="ltr" class="mw-content-ltr">[https://wiki.inkscape.org/wiki/Inkview Inkview], part of Inkscape vector graphics editor, supports also Inkscape-specific features, which are not in the SVG-1.1-DTD-Standard</span>
*  <span lang="en" dir="ltr" class="mw-content-ltr">[https://www.irfanview.com/ IrfanView], an image viewer provides a plug-in for svg-rendering</span>
*  <span lang="en" dir="ltr" class="mw-content-ltr">[https://www.nyam.pe.kr/dev/imagine/ Imagine], another image viewer provides a plug-in for svg-rendering</span>
* <span lang="en" dir="ltr" class="mw-content-ltr">[https://xmlgraphics.apache.org/batik/download.html batik], a java-based toolkit for svg-rendering</span>
* <span lang="en" dir="ltr" class="mw-content-ltr">[https://github.com/shakiba/svgexport svgexport], a Node.js module</span>
* <span lang="en" dir="ltr" class="mw-content-ltr">[https://cairosvg.org/ cairosvg], a Python library</span>
* <span lang="en" dir="ltr" class="mw-content-ltr">[https://imagemagick.org/index.php ImageMagick], image-converter</span>
* <span lang="en" dir="ltr" class="mw-content-ltr">[https://github.com/RazrFalcon/resvg-test-suite/tree/master/tools/chrome-svgrender chrome-svgrender], renders SVG files using Headless Chrome</span>
* <span lang="en" dir="ltr" class="mw-content-ltr">[https://github.com/svg-net SVG.NET], a basic renderer</span>
* <span lang="en" dir="ltr" class="mw-content-ltr">[https://doc.qt.io/qt-5/qtsvg-index.html QtSVG], a basic renderer</span>
* <span lang="en" dir="ltr" class="mw-content-ltr">[http://wxsvg.sourceforge.net/ wxsvg], a basic renderer</span>

{{anchor|Converters}}

<span id="Converters"></span>
=== 変換アプリ ===

ほとんどの SVG エディタにはラスタをベクターに変換する機能が同梱されています（[[:w:ja:ベクトル化|ベクトル化]]）
* [[toolforge:convert]]とは、PDF を SVG へ、SVG を PNG へ変換するツール
* [http://autotrace.sourceforge.net/ Autotrace]（ご注意：含まれているリンクが最低1件、フィッシングサイトに奪取されてい流として）マーティン・ウェバーが2004年に開発したライブラリで以下のツールを使用：
** [[:w:ja:ImageMagick|ImageMagick]]
** [http://www.autotracer.org/about.html autotracer.org]は、オンラインのトレース機能で、対応するファイル形式は JPEG、GIF、PNG から SVG、PDF、EPS、AI、DXF に変換
** [http://delineate.sourceforge.net/ Delineate]（デリアネイト）は、無料の Java インタフェースで Autotrace（オートトレース）と{{w|Potrace}}（ポトレース[http://potrace.sourceforge.net/ 公式サイトのリンク]）。Potrace は [[:w:ja:Inkspace|Inkspace]] に同梱してあり、<code>Path &gt;Trace Bitmap</code>メニューを参照。
* [http://www.scribus.net/ Scribus]（スクライバス、[http://ghostscript.com/ GhostScript] ゴーストスクリプトと併用）は、EPS から SVG に変換
* [https://www.pdftron.com/pdf2svg/ PDFTron PDF2SVG]は、Windows 向けの商用ソフトで PDF から SVG に変換converter for
* [http://www.cityinthesky.co.uk/opensource/pdf2svg/ バートン PDF2SVG] は Linux 対応で、PDF から SVG に変換、使用する無料のライブラリ2件はそれぞれ「Poppler」（ポップラー）と「Cairo」（カイロ）という
* [[:w:en:Special:MyLanguage/librsvg|librsvg]]というレンダリングのライブラリは、メディアウィキと下記の変換ツールが採用しています。
** [https://opensourcepack.blogspot.com/2012/06/rsvg-convert-svg-image-conversion-tool.html RSVG-Convert] は、オープンソースのツールで SVG から PNG、PDF、PS へ変換
* [http://drububu.com/tutorial/bitmap-to-vector.html Bitmap to SVG converter] - ピクセルの作画を変換するのに便利
* <span lang="en" dir="ltr" class="mw-content-ltr">[https://vectorizer.ai/ Vectorizer.AI], an artificial intelligence-based online tracer to convert raster image</span>
* <span lang="en" dir="ltr" class="mw-content-ltr">[https://tools.pdf24.org/ PDF24 Tools], including an online PDF-to-SVG converter</span>


<span id="Editors"></span>
=== エディタ ===
* [[:w:ja:Inkscape|Inkscape]]は、無料でオープンソースの SVG エディタで Windows、macOS、Linux に対応。詳細は {{pg|Help:Inkscape}} を参照。
* {{w|Sodipodi}} は、サポート終了したオープンソースで無償の SVG エディタで、対応は Windows と Linux
* <span lang="en" dir="ltr" class="mw-content-ltr">{{w|OpenOffice.org Draw}}, a free and open-source drawing program that can export to SVG natively, and reads SVG with [https://wiki.openoffice.org/wiki/SVG_Import_Filter SVG Plugin].</span>
* <span lang="en" dir="ltr" class="mw-content-ltr">{{w|LibreOffice Draw}}, derivative of OpenOffice Draw, can import and export to SVG. May be more suitable than Inkscape for special cases such as flow charts.</span>
* {{w|Dia (software)|Dia}} はオープンンソースで無償のダイアグラム・アプリで Windows、macOS、Unix に対応（現在、SVG エクスポートに複数のバグあり）
* <span lang="en" dir="ltr" class="mw-content-ltr">{{w|Adobe Illustrator}}, a commercial (and very expensive) vectory graphics editor with rich graphics features but limited SVG-specific capabilies. See {{pg|Help:Illustrator}} for details.</span>
* <span lang="en" dir="ltr" class="mw-content-ltr">{{w|Affinity Designer}}</span>
* <span lang="en" dir="ltr" class="mw-content-ltr">{{w|CorelDraw}}</span>
* SVG エディット（[https://github.com/SVG-Edit/svgedit 扱いは GitHub]）は、オープンソースで無償の{{w|Web アプリ}}版
** <span lang="en" dir="ltr" class="mw-content-ltr">[[toolforge:svgedit]], an old copy of SVG-edit on Wikimedia Toolforge. See {{section link|User talk:Rillke/SVGedit.js|Is there a WYSIWYG editor}} for details.</span>
* <span lang="en" dir="ltr" class="mw-content-ltr">[[User talk:Rillke/SVGedit.js|SVGedit.js]], an experimental gadget native to Wikimedia Commons</span>
* <span lang="en" dir="ltr" class="mw-content-ltr">[http://vectorpaint.yaks.co.nz Vector Paint] - a simple online editor useful for cropping. '''Note:''' cropping does not work properly with certain files.</span>


<div lang="en" dir="ltr" class="mw-content-ltr">
=== Specialized app ===
</div>
* {{w|Ipe (program)|Ipe}} はオープンソースで無償のエディタで SVG 変換機能付き、数学や工学の図・数式優れた統合を示す LaTeX 対応
* <span lang="en" dir="ltr" class="mw-content-ltr">[https://codedread.com/scour/ Scour]. For tidying up/create a smaller file size (in Python, also included in Inkscape).</span>
* <span lang="en" dir="ltr" class="mw-content-ltr">[http://www.graphviz.org/ Graphviz]. An open source application for automatic diagram layout.</span>
* <span lang="en" dir="ltr" class="mw-content-ltr">[http://bkchem.zirael.org/ BKchem]. A free software to draw chemical structures in SVG. Runs on Windows, Mac OS X, and Unix systems.</span>
* <span lang="en" dir="ltr" class="mw-content-ltr">[http://freemind.sourceforge.net/ Freemind] is a free and open source mind mapping application written in Java. {{W|FreeMind}}.</span>
* <span lang="en" dir="ltr" class="mw-content-ltr">[https://www.geogebra.org/ GeoGebra] is a free and open source multi-platform mathematics software with ability to export SVG. {{W|Geogebra}}.</span>
* <span lang="en" dir="ltr" class="mw-content-ltr">{{w|LibreOffice Calc}} ([https://www.libreoffice.org/ libreoffice.org]), for creating bar charts, pie charts, etc.</span>
* <span lang="en" dir="ltr" class="mw-content-ltr">[https://projects.gnome.org/gnumeric/ Gnumeric] spreadsheet, saves/exports charts in SVG format, cf. {{w|gnumeric}}.</span>
* <span lang="en" dir="ltr" class="mw-content-ltr">[https://vecta.io/nano Nano by Vecta.io] - reduces file sizes</span>
* <span lang="en" dir="ltr" class="mw-content-ltr">[https://github.com/svg/svgo SVGO] - reduces file sizes</span>
** <span lang="en" dir="ltr" class="mw-content-ltr">[https://jakearchibald.github.io/svgomg SVGOMG] - a web-based front-end for SVGO</span>
** <span lang="en" dir="ltr" class="mw-content-ltr">[https://omfg.svg.beauty/ SVGOMFG] - a web-based front-end for SVGO</span>
* <span lang="en" dir="ltr" class="mw-content-ltr">[https://yqnn.github.io/svg-path-editor/ SvgPathEditor]. An online editor useful for analyzing and improving SVG path data.</span>
* <span lang="en" dir="ltr" class="mw-content-ltr">[https://svg-path-visualizer.netlify.app/ SVG Path Visualizer]. For analyzing SVG path data.</span>

<div lang="en" dir="ltr" class="mw-content-ltr">
== Copyright ==
</div>

<div lang="en" dir="ltr" class="mw-content-ltr">
There is some concern that the SVG source code of images might be copyrightable as a "computer program" even if the output is an image in the public domain due to being {{pg|Commons:Threshold of originality|below the threshold of originality}} or otherwise indistinguishable from a work that is public domain due to copyright expiration. This could mean that even though the output of an SVG, the image, is in public domain, the code could be restrictively copyrighted, and therefore inappropriate for including in Wikimedia Commons.
</div>

<div lang="en" dir="ltr" class="mw-content-ltr">
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 [http://copyright.gov/circs/circ34.pdf 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:
</div>

<div lang="en" dir="ltr" class="mw-content-ltr">
* Example DRs at [[Commons:Deletion requests/File:Bethlehem Steel logo.svg]] and [[Commons:Deletion requests/File:W3C Semantic Web Logo.svg]].
* Discussion at [[Commons:Village pump/Copyright/Archive/2014/03#SVG's are computer software?]]
* Cases: '' {{W|Adobe Systems, Inc. v. Southern Software, Inc.}}'', ''Alfred Bell & Co. v. Catalda Fine Arts, Inc..'' ([https://h2o.law.harvard.edu/cases/1775 judgment], [http://www.invispress.com/law/copyright/bell.html commentary]), and ''Meshworks v. Toyota'' ([https://h2o.law.harvard.edu/cases/4073 judgment], [https://williampatry.blogspot.com/2008/06/model-opinion-affirmed.html commentary])
</div>

<div lang="en" dir="ltr" class="mw-content-ltr">
== See also ==
</div>
* {{pg|Commons:File types|anchor=SVG}}
* {{pg|Commons:Graphics village pump}}
* {{pg|Commons:Graphic Lab}}
* {{pg|Commons:Commons SVG Checker}}
* {{pg|Commons:Translation possible/Learn more}} — SVG ファイルの翻訳方法を解説
* {{pg|Commons:Transition to SVG}}
* <span lang="en" dir="ltr" class="mw-content-ltr">[[meta:SVG image support]]</span>
* [[meta:SVG フォント]] — 対応するフォントの一覧
* <span lang="en" dir="ltr" class="mw-content-ltr">[[Wikipedia:Comparison of raster-to-vector conversion software]]</span>
* <span lang="en" dir="ltr" class="mw-content-ltr">[[Wikipedia:Wikipedia:SVG help|Wikipedia: SVG help]]</span>
* <span lang="en" dir="ltr" class="mw-content-ltr">[[Wikipedia:Wikipedia:Graphics Lab/Resources/SVG|Wikipedia: Graphics Lab/Resources/SVG]]</span>
* <span lang="en" dir="ltr" class="mw-content-ltr">[[Wikipedia:Wikipedia:Graphics Lab/Resources/PDF conversion to SVG|Wikipedia:Graphics Lab/Resources/PDF conversion to SVG]]</span>
* <span lang="en" dir="ltr" class="mw-content-ltr">[[b:XML – Managing Data Exchange/SVG]]</span>
* [[mw:Extension:TranslateSvg]]と[[toolforge:svgtranslate]]
* [[User:Rillke/SVGedit.js]]

<div lang="en" dir="ltr" class="mw-content-ltr">
Maintenance:
* [[:Category:SVG]]
* [[:Category:SVG maps]] — The SVG branch of the map project.
* [[:Category:Images that should use vector graphics]]
* [[:Category:Pictures showing a librsvg bug]]
* {{pg|Commons:Transition to SVG}}
</div>

<span id="References"></span>
== 脚注 ==
{{reflist|30em}}

<span id="External_links"></span>
== 外部リンク ==
* <span lang="en" dir="ltr" class="mw-content-ltr">[//www.w3.org/Graphics/SVG/IG/resources/svgprimer.html SVG Primer]</span>
* <span lang="en" dir="ltr" class="mw-content-ltr">[//openclipart.org/ openclipart.org] offers more than 10000 SVG images (public domain)</span>
* <span lang="en" dir="ltr" class="mw-content-ltr">[https://caniuse.com/#feat=svg CanIUse.com]</span>
* <span class="mw-translate-fuzzy">[https://developer.mozilla.org/en-US/docs/Web/SVG/SVG_2_support_in_Mozilla Firefox ブラウザの SVG 2.0 サポート]</span>

[[Category:Commons help{{#if:{{#translation:}}|/Translations}}]]
[[Category:SVG help{{#if:{{#translation:}}|/Translations}}| ]]
[[Category:Commons image resources{{#if:{{#translation:}}|/Translations}}]]
Templates used on this page:
Commons:First steps/Upload form (view source) (semi-protected)
Commons:SVG marker templates (edit)
Template:- (view source) (template editor protected)
Template:Anchor (view source) (template editor protected)
Template:Animated SVG (edit)
Template:Animated SVG/en (edit)
Template:Animated SVG/lang (edit)
Template:Animated SVG/layout (edit)
Template:Attrib (edit)
Template:Attrib/en (edit)
Template:Attrib/layout (edit)
Template:Autotranslate (view source) (protected)
Template:BadSVG (edit)
Template:Bearbeiten (edit)
Template:Best current practice (edit)
Template:Box-shadow (view source) (template editor protected)
Template:C (view source) (semi-protected)
Template:C/display (view source) (semi-protected)
Template:Cite web (view source) (semi-protected)
Template:Cleanupbox (edit)
Template:Clear (view source) (protected)
Template:Clr (view source) (template editor protected)
Template:Collapse (view source) (semi-protected)
Template:Colon (view source) (template editor protected)
Template:Column-width (edit)
Template:Convert to SVG (view source) (template editor protected)
Template:Convert to SVG/en (edit)
Template:Convert to SVG/layout (view source) (template editor protected)
Template:Convert to SVG animation (edit)
Template:Convert to SVG animation/en (edit)
Template:Convert to SVG animation/layout (edit)
Template:Created with (view source) (template editor protected)
Template:Created with/en (view source) (template editor protected)
Template:Created with/layout (view source) (template editor protected)
Template:Created with .../en (view source) (template editor protected)
Template:Created with Adobe Illustrator (view source) (template editor protected)
Template:Created with Bin2svg (edit)
Template:Created with ChemDraw (edit)
Template:Created with CorelDRAW (edit)
Template:Created with Dia (edit)
Template:Created with ElCompLib (edit)
Template:Created with Fig2SVG (edit)
Template:Created with Gnuplot (edit)
Template:Created with HandSVG (view source) (template editor protected)
Template:Created with Inkscape (view source) (template editor protected)
Template:Created with Inkscape-hand (edit)
Template:Created with MetaPost (edit)
Template:Created with Other tool (edit)
Template:Created with Scribus (edit)
Template:Created with Sodipodi (edit)
Template:Created with Text Editor (view source) (template editor protected)
Template:Created with Text Editor/en (edit)
Template:Created with Unknown tool (edit)
Template:Created with Vim (edit)
Template:Created with bin2svg (edit)
Template:Created with other tool (edit)
Template:Date (view source) (protected)
Template:Edit (view source) (protected)
Template:Extracted with Inkscape (edit)
Template:F (view source) (template editor protected)
Template:F/layout (view source) (template editor protected)
Template:FakeSVG (edit)
Template:Filename (view source) (template editor protected)
Template:Full stop (view source) (template editor protected)
Template:HandSVG (edit)
Template:I18n/othertool (edit)
Template:Iffile (view source) (template editor protected)
Template:Ifsvg (view source) (template editor protected)
Template:Igen (view source) (template editor protected)
Template:Igen/2nd (edit)
Template:Igen/cwt (edit)
Template:Igen/par (view source) (template editor protected)
Template:Igen/sub (view source) (template editor protected)
Template:Igen/top (view source) (template editor protected)
Template:ImageNoteControl (view source) (template editor protected)
Template:Image generation (view source) (template editor protected)
Template:Incl (edit)
Template:Infobar-Layout (view source) (template editor protected)
Template:Inkscape-hand (edit)
Template:Inkscape-hand/en (edit)
Template:Lang (view source) (protected)
Template:LangSwitch (view source) (protected)
Template:Langswitch (view source) (protected)
Template:LayoutTemplateArgs (view source) (protected)
Template:Mbox (view source) (template editor protected)
Template:Mbox/styles.css (view source) (template editor protected)
Template:Namespace (view source) (protected)
Template:Namespace/en (edit)
Template:Negative boosted template (view source) (template editor protected)
Template:Nil2 (view source) (template editor protected)
Template:No redirect (view source) (semi-protected)
Template:Nobold (view source) (template editor protected)
Template:Nowrap (view source) (protected)
Template:Nowrap/styles.css (view source) (semi-protected)
Template:Partnership-Layout (view source) (protected)
Template:Path text SVG (edit)
Template:Path text SVG/en (edit)
Template:Path text SVG/lang (edit)
Template:Path text SVG/layout (edit)
Template:Pg (view source) (template editor protected)
Template:Plainlist (edit)
Template:Plainlist/styles.css (edit)
Template:Plural (view source) (template editor protected)
Template:Reflist (view source) (template editor protected)
Template:Replace text (view source) (template editor protected)
Template:Restriction-Layout (view source) (template editor protected)
Template:SVG with raster elements (edit)
Template:SVG with raster elements/en (edit)
Template:SVG with raster elements/layout (edit)
Template:SVGvalid (view source) (template editor protected)
Template:Scripted SVG (edit)
Template:Scripted SVG/en (edit)
Template:Scripted SVG/lang (edit)
Template:Scripted SVG/layout (edit)
Template:Section link (edit)
Template:See also (view source) (protected)
Template:See also/styles.css (view source) (template editor protected)
Template:Shortcut (view source) (template editor protected)
Template:Shortcut2 (view source) (semi-protected)
Template:Shortcut2/styles.css (edit)
Template:Shortcut text (view source) (semi-protected)
Template:Slink (edit)
Template:Str left (view source) (protected)
Template:Str len (view source) (template editor protected)
Template:Str right (view source) (template editor protected)
Template:Superseded (view source) (template editor protected)
Template:Superseded/en (view source) (template editor protected)
Template:Superseded/layout (view source) (template editor protected)
Template:T/main (view source) (protected)
Template:T0 (view source) (template editor protected)
Template:Tag (view source) (template editor protected)
Template:Technically replaced (edit)
Template:Technically replaced/en (edit)
Template:Technically replaced/lang (edit)
Template:Technically replaced/layout (edit)
Template:Template (edit)
Template:Template image (edit)
Template:Template image/i18n/en (edit)
Template:Template image/layout (edit)
Template:Tl (view source) (protected)
Template:Tl2 (view source) (template editor protected)
Template:Tlx (view source) (protected)
Template:TracedSVG (edit)
Template:TracedSVG/en (edit)
Template:TracedSVG/lang (edit)
Template:TracedSVG/layout (edit)
Template:Tracked (view source) (semi-protected)
Template:Tracked/layout (edit)
Template:Tracked/styles.css (edit)
Template:Translate (view source) (template editor protected)
Template:Translate/example (edit)
Template:Translate/i18n/en (edit)
Template:Translate/layout (edit)
Template:Trim (view source) (protected)
Template:U (view source) (protected)
Template:Update inline (edit)
Template:ValidSVG (edit)
Template:Valid SVG (view source) (template editor protected)
Template:Valid SVG/en (view source) (template editor protected)
Template:Validextension (edit)
Template:Vector wip (edit)
Template:W (view source) (protected)
Template:Wd (view source) (template editor protected)
Template:We (edit)
Template:Wf (edit)
Template:Wz (edit)
Template:Yesno (view source) (template editor protected)
Module:Anchor (view source) (template editor protected)
Module:Arguments (view source) (protected)
Module:Autotranslate (view source) (protected)
Module:Caller title (view source) (template editor protected)
Module:Char (view source) (template editor protected)
Module:Colon (view source) (template editor protected)
Module:DateI18n (view source) (template editor protected)
Module:File (view source) (template editor protected)
Module:Igenmod (view source) (template editor protected)
Module:LangSwitch (view source) (protected)
Module:Logoform (edit)
Module:Pg (view source) (semi-protected)
Module:Redirect (view source) (template editor protected)
Module:Section link (edit)
Module:String (view source) (protected)
Module:TNT (view source) (template editor protected)
Module:TableTools (view source) (template editor protected)
Module:Yesno (view source) (protected)
Translations:Commons:Categories/Page display title/ja (edit)
Translations:Commons:File types/Page display title/ja (edit)
Translations:Commons:First steps/Uploading files/Page display title/ja (edit)
Translations:Help:Inkscape/Page display title/ja (edit)
Return to Help:SVG/ja.
Retrieved from "https://commons.wikimedia.org/wiki/Help:SVG/ja"
View source for Help:SVG/ja

Navigation menu

Search
