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/
/raw/73dbe29aa165b3cb95c9edc686f3632e/
73dbe29aa165b3cb95c9edc686f3632e
js
JavaScript
8
2019-06-19T11:15:17
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/
/raw/e317d8ded16a3667a18822dcdcff2bfb/
e317d8ded16a3667a18822dcdcff2bfb
css
CSS
2
2019-06-20T04:44:47
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/
/raw/e69360d17e5ca4d55d913664f975ed82/
e69360d17e5ca4d55d913664f975ed82
html
HTML
6
2019-06-07T06:26:19
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

Text only

Dynamic SVG file

1
2
3
4
5
.htaccess:
AddType application/x-httpd-php .svg

*.svg file:
header('content-type: text/xml');
https://snipt.net/embed/f0e0adc0bd9b52d4f0e49343e6383d8f/
/raw/f0e0adc0bd9b52d4f0e49343e6383d8f/
f0e0adc0bd9b52d4f0e49343e6383d8f
text
Text only
6
2019-06-19T21:42:49
True
False
False
/api/public/snipt/3344/
dynamic-svg-file
<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></pre></div></td><td class="code"><div class="highlight"><pre><span></span><span id="L-1"><a name="L-1"></a>.htaccess: </span><span id="L-2"><a name="L-2"></a>AddType application/x-httpd-php .svg </span><span id="L-3"><a name="L-3"></a> </span><span id="L-4"><a name="L-4"></a>*.svg file: </span><span id="L-5"><a name="L-5"></a>header(&#39;content-type: text/xml&#39;); </span></pre></div> </td></tr></table>
htaccess, php, svg

JavaScript+Django/Jinja

js svg raphael example

1
2
3
4
5
txt1 = paper.text(30, 30, "Sample text");
txt1.attr({'font-size': "20px"});
txt1.rotate(45);
txt1.node.onmouseover = function () {txt1.animate({rotation: 40}, 500)};
txt1.node.onmouseout = function () {txt1.animate({rotation: 45}, 500)};
https://snipt.net/embed/f0cbaff3e573df0e6264f0a9468bb67d/
/raw/f0cbaff3e573df0e6264f0a9468bb67d/
f0cbaff3e573df0e6264f0a9468bb67d
js+django
JavaScript+Django/Jinja
6
2019-06-15T09:50:56
True
False
False
/api/public/snipt/2929/
js-svg-raphael-example
<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></pre></div></td><td class="code"><div class="highlight"><pre><span></span><span id="L-1"><a name="L-1"></a><span class="nx">txt1</span> <span class="o">=</span> <span class="nx">paper</span><span class="p">.</span><span class="nx">text</span><span class="p">(</span><span class="mi">30</span><span class="p">,</span> <span class="mi">30</span><span class="p">,</span> <span class="s2">&quot;Sample text&quot;</span><span class="p">);</span> </span><span id="L-2"><a name="L-2"></a><span class="nx">txt1</span><span class="p">.</span><span class="nx">attr</span><span class="p">({</span><span class="s1">&#39;font-size&#39;</span><span class="o">:</span> <span class="s2">&quot;20px&quot;</span><span class="p">});</span> </span><span id="L-3"><a name="L-3"></a><span class="nx">txt1</span><span class="p">.</span><span class="nx">rotate</span><span class="p">(</span><span class="mi">45</span><span class="p">);</span> </span><span id="L-4"><a name="L-4"></a><span class="nx">txt1</span><span class="p">.</span><span class="nx">node</span><span class="p">.</span><span class="nx">onmouseover</span> <span class="o">=</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span><span class="nx">txt1</span><span class="p">.</span><span class="nx">animate</span><span class="p">({</span><span class="nx">rotation</span><span class="o">:</span> <span class="mi">40</span><span class="p">},</span> <span class="mi">500</span><span class="p">)};</span> </span><span id="L-5"><a name="L-5"></a><span class="nx">txt1</span><span class="p">.</span><span class="nx">node</span><span class="p">.</span><span class="nx">onmouseout</span> <span class="o">=</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span><span class="nx">txt1</span><span class="p">.</span><span class="nx">animate</span><span class="p">({</span><span class="nx">rotation</span><span class="o">:</span> <span class="mi">45</span><span class="p">},</span> <span class="mi">500</span><span class="p">)};</span> </span></pre></div> </td></tr></table>
example, javascript, raphael, svg