Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>Currently, there is no CSS method to change the rendering mode of SVG elements, though there is an SVG attribute that can do so: <a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/shape-rendering" rel="nofollow"><code>shape-rendering</code></a>.</p> <p>I went ahead and <a href="http://www.mobilefish.com/services/base64/base64.php" rel="nofollow">ran your SVG file through a base64 encoder</a> (which you can use to <em>decode</em> the data in the following examples), after adding <code>shape-rendering: &lt;value&gt;</code> to each of your <code>&lt;g&gt;</code> elements, where <code>&lt;value&gt;</code> has several options: <a href="http://jsfiddle.net/VX4ej/14/" rel="nofollow"><code>optimizeSpeed</code> (example)</a>, <a href="http://jsfiddle.net/VX4ej/12/" rel="nofollow"><code>crispEdges</code> (example)</a>, and <a href="http://jsfiddle.net/VX4ej/13/" rel="nofollow"><code>geometricPrecision</code> (example)</a>.</p> <p>Depending on how you want your final SVG to display, just choose one of the particular values, and your final SVG code will look somewhat like the following (note the <code>shape-rendering</code> attribute on each of the <code>&lt;g&gt;</code> tags):</p> <pre><code>&lt;svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="480" height="480" viewBox="0 0 480 480"&gt; &lt;g shape-rendering="crispEdges" stroke="#333" fill="#333"&gt; &lt;g shape-rendering="crispEdges" id="icon-1-1" transform="translate(0,0)"&gt; &lt;line x1="10" y1="10" x2="86" y2="86" stroke-width="12"/&gt; &lt;line x1="10" y1="86" x2="86" y2="10" stroke-width="12"/&gt; &lt;/g&gt; &lt;g shape-rendering="crispEdges" id="icon-1-2" transform="translate(96,0)"&gt; &lt;!-- svg continues below ... --&gt; </code></pre>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload