Snipt.net is closing on December 31st, 2016

For more information, please visit this blog post.

snipt

Ctrl+h for KB shortcuts

JavaScript

Load SVG into HTML using JavaScript

1
2
3
4
5
6
7
8
$(function(){
    $("#workspace").load('your_svg.svg',function(response){
        $(this).addClass("svgLoaded"); 
        if(!response){
            // Error loading SVG! Is it running properly on localhost or a webserver?
        }
    });
});
https://snipt.net/embed/73dbe29aa165b3cb95c9edc686f3632e/
https://snipt.net/raw/73dbe29aa165b3cb95c9edc686f3632e/
73dbe29aa165b3cb95c9edc686f3632e
js
JavaScript
8
2016-12-02T13:32:26
True
False
False
/api/public/snipt/70480/
-7380
<table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre><a href="#L-1">1</a> <a href="#L-2">2</a> <a href="#L-3">3</a> <a href="#L-4">4</a> <a href="#L-5">5</a> <a href="#L-6">6</a> <a href="#L-7">7</a> <a href="#L-8">8</a></pre></div></td><td class="code"><div class="highlight"><pre><span></span><span id="L-1"><a name="L-1"></a><span class="nx">$</span><span class="p">(</span><span class="kd">function</span><span class="p">(){</span> </span><span id="L-2"><a name="L-2"></a> <span class="nx">$</span><span class="p">(</span><span class="s2">&quot;#workspace&quot;</span><span class="p">).</span><span class="nx">load</span><span class="p">(</span><span class="s1">&#39;your_svg.svg&#39;</span><span class="p">,</span><span class="kd">function</span><span class="p">(</span><span class="nx">response</span><span class="p">){</span> </span><span id="L-3"><a name="L-3"></a> <span class="nx">$</span><span class="p">(</span><span class="k">this</span><span class="p">).</span><span class="nx">addClass</span><span class="p">(</span><span class="s2">&quot;svgLoaded&quot;</span><span class="p">);</span> </span><span id="L-4"><a name="L-4"></a> <span class="k">if</span><span class="p">(</span><span class="o">!</span><span class="nx">response</span><span class="p">){</span> </span><span id="L-5"><a name="L-5"></a> <span class="c1">// Error loading SVG! Is it running properly on localhost or a webserver?</span> </span><span id="L-6"><a name="L-6"></a> <span class="p">}</span> </span><span id="L-7"><a name="L-7"></a> <span class="p">});</span> </span><span id="L-8"><a name="L-8"></a><span class="p">});</span> </span></pre></div> </td></tr></table>
jQuery.load, svg

CSS

CSS base64 SVG Backgroundimage

background-image:url(data:image/svg+xml;base64,XXXXXX);
https://snipt.net/embed/e317d8ded16a3667a18822dcdcff2bfb/
https://snipt.net/raw/e317d8ded16a3667a18822dcdcff2bfb/
e317d8ded16a3667a18822dcdcff2bfb
css
CSS
2
2016-12-02T09:54:18
True
False
False
/api/public/snipt/62726/
css-base64-svg-backgroundimage
<table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre><a href="#L-1">1</a></pre></div></td><td class="code"><div class="highlight"><pre><span></span><span id="L-1"><a name="L-1"></a><span class="nt">background-image</span><span class="nd">:url</span><span class="o">(</span><span class="nt">data</span><span class="nd">:image</span><span class="o">/</span><span class="nt">svg</span><span class="o">+</span><span class="nt">xml</span><span class="o">;</span><span class="nt">base64</span><span class="o">,</span><span class="nt">XXXXXX</span><span class="o">);</span> </span></pre></div> </td></tr></table>
css, svg

HTML

Add svg to html with object tag

1
2
3
4
5
6
<object type="image/svg xml" width="100" height="100" style="float:right" 
data="http://blog.codedread.com/clipart/apple.svgz">
<span/></object>

you can style it on css.
url: http://www.alistapart.com/articles/using-svg-for-flexible-scalable-and-fun-backgrounds-part-ii
https://snipt.net/embed/e69360d17e5ca4d55d913664f975ed82/
https://snipt.net/raw/e69360d17e5ca4d55d913664f975ed82/
e69360d17e5ca4d55d913664f975ed82
html
HTML
6
2016-12-02T09:54:21
True
False
False
/api/public/snipt/40155/
add-svg-to-html-with-object-tag
<table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre><a href="#L-1">1</a> <a href="#L-2">2</a> <a href="#L-3">3</a> <a href="#L-4">4</a> <a href="#L-5">5</a> <a href="#L-6">6</a></pre></div></td><td class="code"><div class="highlight"><pre><span></span><span id="L-1"><a name="L-1"></a><span class="p">&lt;</span><span class="nt">object</span> <span class="na">type</span><span class="o">=</span><span class="s">&quot;image/svg xml&quot;</span> <span class="na">width</span><span class="o">=</span><span class="s">&quot;100&quot;</span> <span class="na">height</span><span class="o">=</span><span class="s">&quot;100&quot;</span> <span class="na">style</span><span class="o">=</span><span class="s">&quot;float:right&quot;</span> </span><span id="L-2"><a name="L-2"></a><span class="na">data</span><span class="o">=</span><span class="s">&quot;http://blog.codedread.com/clipart/apple.svgz&quot;</span><span class="p">&gt;</span> </span><span id="L-3"><a name="L-3"></a><span class="p">&lt;</span><span class="nt">span</span><span class="p">/&gt;&lt;/</span><span class="nt">object</span><span class="p">&gt;</span> </span><span id="L-4"><a name="L-4"></a> </span><span id="L-5"><a name="L-5"></a>you can style it on css. </span><span id="L-6"><a name="L-6"></a>url: http://www.alistapart.com/articles/using-svg-for-flexible-scalable-and-fun-backgrounds-part-ii </span></pre></div> </td></tr></table>
html, svg
Copyrighted, illegal, or inappropriate content? Email [email protected].