diff options
Diffstat (limited to 'files/ja/mozilla/developer_guide/svg_guidelines/index.html')
| -rw-r--r-- | files/ja/mozilla/developer_guide/svg_guidelines/index.html | 198 |
1 files changed, 198 insertions, 0 deletions
diff --git a/files/ja/mozilla/developer_guide/svg_guidelines/index.html b/files/ja/mozilla/developer_guide/svg_guidelines/index.html new file mode 100644 index 0000000000..358d2da811 --- /dev/null +++ b/files/ja/mozilla/developer_guide/svg_guidelines/index.html @@ -0,0 +1,198 @@ +--- +title: SVG ガイドライン +slug: Mozilla/Developer_Guide/SVG_Guidelines +translation_of: Mozilla/Developer_guide/SVG_Guidelines +--- +<p>The <a href="/en-US/docs/Web/SVG">SVG</a> format has the advantage of being able to describe complex images while being lightweight and to scaling them very well at all resolutions. Unfortunately, a lot of SVG files (often generated by SVG editors) ship without being cleaned up, so the benefit of them being lightweight is gone. Here are some best pratices to keep SVGs lightweight. These rules are based on some real examples seen in Mozilla's code.</p> + +<h2 id="Basics"><span class="author-g-1scq3ywqbljc5puc b">Basics</span></h2> + +<ul> + <li><span class="author-g-1scq3ywqbljc5puc">2 spaces indenting</span></li> + <li><span class="author-g-1scq3ywqbljc5puc">No useless whitespaces or linebreaks (see below for more details)</span></li> + <li><span class="author-g-1scq3ywqbljc5puc">Adding a license header</span></li> + <li><span class="author-g-1scq3ywqbljc5puc">Use double quotes</span></li> +</ul> + +<h2 id="Whitespace_and_line_breaks">Whitespace and line breaks</h2> + +<div id="magicdomid5"> +<h3 id="Whitespace">Whitespace</h3> + +<p>In addition to trailing whitespace at the end of lines, there are a few more cases more specific to SVGs:</p> + +<ul> + <li>Trailing whitespaces in attribute values (usually seen in path definitions)</li> + <li>Excessive whitespace in path or polygon points definition</li> +</ul> + +<h4 id="Examples">Examples</h4> + +<p>This path:<span class="author-g-g4g23bmoaru8by8u"> </span></p> + +<pre><span class="author-g-g4g23bmoaru8by8u"><path d=" M5,5 L1,1z "></span></pre> + +<p><span class="author-g-g4g23bmoaru8by8u">can be cut down to this:</span></p> + +<pre><span class="author-g-g4g23bmoaru8by8u"><path d="M5,5 L1,1z"></span></pre> + +<p>Similarly, this polygon:</p> + +<pre><span class="author-g-g4g23bmoaru8by8u"><polygon points=" 0,0 4,4 4,0 "/></span></pre> + +<p><span class="author-g-g4g23bmoaru8by8u">can be cut down to this:</span></p> + +<pre><span class="author-g-g4g23bmoaru8by8u"><polygon points="0,0 4,4 4,0"/></span></pre> + +<h3 id="Line_breaks">Line breaks</h3> + +<p>You should only use line breaks for logical separation or if they help make the file readable. You should avoid line breaks between every single element or within attribute values. It's recommended to put the attributes on the same line as their tagnames if possible. You should also put the shortest attributes first so they are easier to spot.</p> + +<h2 id="Unused_tags_and_attributes"><span class="author-g-1scq3ywqbljc5puc b">Unused tags and attributes</span></h2> +</div> + +<h3 id="Editor_metadata"><span class="author-g-1scq3ywqbljc5puc b">Editor metadata</span></h3> + +<p><span class="author-g-1scq3ywqbljc5puc b">Vector editors (Inkscape, Adobe Illustrator, Sketch, </span>…<span class="author-g-1scq3ywqbljc5puc b">) usually add a bunch of metadata in SVG files when saving them.</span> Metadata can mean many things, including:</p> + +<ul> + <li>The common "Created with <em>editor</em>" comments</li> + <li>Non-standard editor specific tags and attributes (<code>sketch:foo</code>, <code>illustrator:foo</code>, <code>sopodi:foo</code>, …)</li> + <li>The <a href="/en-US/docs/Namespaces">XML namespace</a> definition that comes with the latter (<code>xmlns:sketch</code>, <code>xmlns:sopodi</code>, …)</li> +</ul> + +<h3 id="Other_metadata">Other metadata</h3> + +<p>In addition to non-standard editor metadata, standard compliant metadata also exists. Common examples of this are <code><title></code> and <code><desc></code> tags. Although this kind of data is supported by the browser, it can only be displayed when the SVG is opened in a new tab. Plus, the filename is descriptive enough most of the time. So it's recommended to remove that kind of metadata, since it doesn't bring much value.</p> + +<p>You shouldn't include DOCTYPEs in your SVGs either, they are source of many issues and the SVG WG recommends not to include them. See <a href="https://jwatt.org/svg/authoring/#doctype-declaration">SVG Authoring guidelines</a>.</p> + +<h3 id="Avoid_the_use_of_CDATA_sections"><span class="author-g-1scq3ywqbljc5puc">Avoid the use of <span id="cke_bm_253E" style="display: none;"> </span>CDATA sections</span></h3> + +<p><span class="author-g-1scq3ywqbljc5puc"><a href="/en-US/docs/Web/API/CDATASection">CDATA sections</a> are used to avoid parsing some text as HTML. Most of time, CDATA isn't needed, for example, the content in <code><style></code> tags doesn't need to be wrapped in a CDATA section as the content inside the tag is already properly parsed as CSS.</span></p> + +<h3 id="Invisible_shapes">Invisible shapes</h3> + +<p>There are 2 kinds of invisible shapes: the offscreen ones and the uncolored ones.</p> + +<p>The offscreen shapes are hard to spot, even with an automated tool, and are usually context aware. Those kind of shapes are visible, but off the <a href="/en-US/docs/Web/SVG/Attribute/viewBox">SVG view box</a>. Here's <a href="https://hg.mozilla.org/mozilla-central/diff/9fb143f3b36a/browser/themes/shared/heartbeat-star-lit.svg">an example</a> of a file with offscreen shapes.</p> + +<p>On the other hand, the uncolored ones are easier to spot, since they usually come with styles making them invisible. They must meet 2 conditions: they must have no fill (or a transparent one) and no stroke.</p> + +<h3 id="Unused_attributes_on_root_<svg>_element">Unused attributes on root <code><svg</code>> element</h3> + +<p>The root <code><svg></code> element can also host many useless attributes. Here's an <a href="https://hg.mozilla.org/mozilla-central/diff/2d38fecce226/browser/components/loop/content/shared/img/icons-10x10.svg">example</a> taking into account the list below:</p> + +<ul> + <li><code><span class="author-g-1scq3ywqbljc5puc">version</span></code></li> + <li><span class="author-g-1scq3ywqbljc5puc"><code>x="0"</code> and <code>y="0"</code></span></li> + <li><span class="author-g-1scq3ywqbljc5puc"><code>enable-background</code> (unsupported by Gecko and now deprecated by the Filter Effects specification</span><span class="author-g-1scq3ywqbljc5puc">)</span></li> + <li><span class="author-g-1scq3ywqbljc5puc"><code>id</code> (id on root element has no effect)</span></li> + <li><span class="author-g-1scq3ywqbljc5puc"><code>xmlns:xlink</code> attribute when there are no <code>xlink:href</code> attributes used throughout the file</span></li> + <li><span class="author-g-1scq3ywqbljc5puc">Other unused <a href="/en-US/docs/Namespaces">XML Namespace</a> definitions</span></li> + <li><span class="author-g-1scq3ywqbljc5puc"><code>xml:space</code> when there is no text used in the file</span></li> +</ul> + +<h3 id="Other">Other</h3> + +<ul style="list-style-type: disc;"> + <li>Empty tags, this may be obvious, but those are sometimes found in SVGs</li> + <li><span class="author-g-1scq3ywqbljc5puc">Unreferenced ids (usually on gradient stops, but also on shapes or paths)</span></li> + <li><span class="author-g-1scq3ywqbljc5puc"><code><a href="/en-US/docs/Web/SVG/Attribute/clip-rule">clip-rule</a></code> attribute when the element </span><u><strong><span class="author-g-1scq3ywqbljc5puc u">is not</span></strong></u><span class="author-g-1scq3ywqbljc5puc"> a descendant of a <code><a href="/en-US/docs/Web/SVG/Element/clipPath"><clipPath></a></code></span></li> + <li><span class="author-g-1scq3ywqbljc5puc"><code><a href="/en-US/docs/Web/SVG/Attribute/fill-rule">fill-rule</a></code> attribute when the element </span><u><strong><span class="author-g-1scq3ywqbljc5puc u">is</span></strong></u><span class="author-g-1scq3ywqbljc5puc"> a descendant of a <code><a href="/en-US/docs/Web/SVG/Element/clipPath"><clipPath></a></code></span></li> + <li><span class="author-g-1scq3ywqbljc5puc">Unreferenced/Unused clip paths, masks or defs (<a href="https://hg.mozilla.org/mozilla-central/diff/2d38fecce226/toolkit/themes/shared/reader/RM-Plus-24x24.svg">example</a>)</span></li> +</ul> + +<h2 id="Styling"><span class="author-g-1scq3ywqbljc5puc b">Styling</span></h2> + +<h3 id="Basics_2">Basics</h3> + +<ul> + <li><span class="author-g-1scq3ywqbljc5puc">Privilege short lowercase hex for colors</span></li> + <li><span class="author-g-1scq3ywqbljc5puc">Don't use excessive precision for numeric values (usually comes from illustrator)</span></li> + <li><span class="author-g-1scq3ywqbljc5puc">Use descriptive IDs </span></li> + <li><span class="author-g-1scq3ywqbljc5puc">Avoid inline styles and use class names or SVG attributes</span></li> +</ul> + +<h4 id="Examples_2"><span class="author-g-1scq3ywqbljc5puc">Examples</span></h4> + +<p>Here are some examples for excessive number precision:</p> + +<ul> + <li><span class="author-g-1scq3ywqbljc5puc">5.000000e-02 </span>→<span class="author-g-1scq3ywqbljc5puc"> 0.05 (as seen <a href="https://hg.mozilla.org/mozilla-central/diff/2d38fecce226/browser/themes/shared/devtools/images/tool-network.svg#l1.31">here</a>)</span></li> + <li><span class="author-g-1scq3ywqbljc5puc">-3.728928e-10 </span>→<span class="author-g-1scq3ywqbljc5puc"> 0 (as seen <a href="https://hg.mozilla.org/mozilla-central/diff/2d38fecce226/browser/themes/shared/aboutNetError_alert.svg#l1.12">here</a>)</span></li> + <li>t<span class="author-g-1scq3ywqbljc5puc">ranslate(0.000000, -1.000000) </span>→<span class="author-g-1scq3ywqbljc5puc"> translate(0, -1) (as seen <a href="https://hg.mozilla.org/mozilla-central/diff/2d38fecce226/browser/themes/shared/heartbeat-icon.svg#l1.13">here</a>)</span></li> +</ul> + +<p>As for descriptive IDs:</p> + +<ul> + <li><span class="author-g-1scq3ywqbljc5puc">For gradients: SVG_ID1 </span>→<span class="author-g-1scq3ywqbljc5puc"> gradient1 (as seen <a href="https://hg.mozilla.org/mozilla-central/diff/2d38fecce226/browser/themes/shared/aboutNetError_alert.svg#l1.12">here</a>)</span></li> +</ul> + +<h3 id="Use_of_class_names"><span class="author-g-1scq3ywqbljc5puc b">Use of class names</span></h3> + +<ul> + <li><span class="author-g-g4g23bmoaru8by8u">Avoid using a class if that class is only used once in the file</span></li> + <li><span class="author-g-g4g23bmoaru8by8u">If that class only sets a fill or a stroke, it's better to set the fill/stroke directly on the actual shape, instead of introducing a class just for that shape, you can also use SVG grouping to avoid duplicating those attributes</span></li> + <li><span class="author-g-1scq3ywqbljc5puc">Avoid introducing variants of the same file (color/style variants), and use sprites instead (with class names)</span></li> +</ul> + +<h3 id="Default_style_values"><span class="author-g-1scq3ywqbljc5puc b">Default style values</span></h3> + +<p><span class="author-g-1scq3ywqbljc5puc b">There's usually no need to set the default style value unless you're overriding a style. Here are some commonly seen examples:</span></p> + +<ul> + <li><span class="author-g-1scq3ywqbljc5puc"><code>style="display: none;"</code> on <code><a href="/en-US/docs/Web/SVG/Element/defs"><defs></a></code> elements (a <code><defs></code> element is hidden by default)</span></li> + <li><span class="author-g-1scq3ywqbljc5puc"><code>type="text/css"</code> on <code><style></code> elements</span></li> + <li><span class="author-g-1scq3ywqbljc5puc"><code>stroke: none</code> or <code>stroke-width: 0</code></span></li> +</ul> + +<h2 id="SVG_grouping">SVG grouping</h2> + +<h3 id="Style_grouping">Style grouping</h3> + +<p>Group similarly styled shapes under one <code><g></code> tag, this avoids having to set the same class/styles on many shapes.</p> + +<h3 id="Avoid_excessive_grouping">Avoid excessive grouping</h3> + +<p>Editors can sometimes do excessive grouping when exporting SVGs. This is due to the way editors work.</p> + +<h4 id="Nested_groups">Nested groups</h4> + +<p>Avoid multiple-level nesting of groups, these make the SVG less readable.</p> + +<h4 id="Nested_transforms">Nested transforms</h4> + +<p>Some editors use <code><g></code> tags to do nested transforms, which is usually not needed. You can avoid this by doing basic algebra, for example:</p> + +<pre><span class="author-g-1scq3ywqbljc5puc"><g transform="translate(-62, -310)"><shape transform="translate(60, 308)"/></g></span></pre> + +<p><span class="author-g-1scq3ywqbljc5puc">can be cut down to:</span></p> + +<pre><span class="author-g-1scq3ywqbljc5puc"><shape transform="translate(-2,-2)"/></span></pre> + +<p><span class="author-g-1scq3ywqbljc5puc">because: -62+60 = -310+308 = -2</span></p> + +<h2 id="Performance_tips"><span class="author-g-1scq3ywqbljc5puc b">Performance tips</span></h2> + +<p>These rules are optional, but they help speeding up the SVG.</p> + +<ul> + <li><span class="author-g-1scq3ywqbljc5puc">Avoid using a <code><use></code> tag when that <code><use></code> tag is being referenced only once in the whole file</span></li> + <li>Instead of using CSS/SVG <a href="/en-US/docs/Web/SVG/Attribute/transform">transforms</a>, apply directly the transform on the path/shape definition</li> +</ul> + +<h2 id="Tools">Tools</h2> + +<p>Tools can help clean SVG files. Note however that some of the rules stated above can be hard to detect with automated tools since they require too much context-awereness.<br> + To this date, there doesn't seem to be a tool that handles all of the above. However, there are some existing utilities that cover some parts of this document:</p> + +<ul> + <li>Mostly complete command line tool: <a href="https://github.com/svg/svgo">https://github.com/svg/svgo</a></li> + <li>GUI for command line tool (use with "Prettify code" and "Remove <code><title></code>" options on): <a href="https://jakearchibald.github.io/svgomg/">https://jakearchibald.github.io/svgomg/</a></li> + <li>Good alternative to SVGO/SVGOMG: <a href="http://petercollingridge.appspot.com/svg-editor">http://petercollingridge.appspot.com/svg-editor</a></li> + <li><span class="author-g-1scq3ywqbljc5puc">Fixes the excessive number precision: </span><span class="author-g-1scq3ywqbljc5puc url"><a href="https://simon.html5.org/tools/js/svg-optimizer/">https://simon.html5.org/tools/js/svg-optimizer/</a></span></li> + <li><span class="author-g-1scq3ywqbljc5puc url">Converts inline styles to SVG attributes:</span><span class="author-g-1scq3ywqbljc5puc url"> </span><a href="http://www.w3.org/wiki/SvgTidy">http://www.w3.org/wiki/SvgTidy</a></li> + <li><span class="author-g-1scq3ywqbljc5puc">RaphaelJS has a couple of utilities that may be useful: </span><span class="author-g-1scq3ywqbljc5puc url"><a href="http://raphaeljs.com/reference.html">http://raphaeljs.com/reference.html</a></span></li> +</ul> |