Skip to content

Instantly share code, notes, and snippets.

@mardukbp

mardukbp/README.md

Forked from bollwyvl/README.md
Created November 29, 2022 07:43
Show Gist options
  • Save mardukbp/2231c9badb7c9c3584537a5530c11249 to your computer and use it in GitHub Desktop.
Save mardukbp/2231c9badb7c9c3584537a5530c11249 to your computer and use it in GitHub Desktop.
Download ZIP
RevealJS SVG fragment presenter
Raw
README.md

SVG fragment builds for reveal.js

Basic use case

  • make an SVG (maybe in inkscape)
    • save it someplace reveal.js can find it (maybe next to your presentation)
    • figure out how to identify them (maybe use named layers)
  • in reveal.js/index.html
    • add reveal-svg-fragment.js as a dependency
    • in a <section> of reveal.js markup
      • add data-svg-fragment="<url of the someplace>" to something, e.g. a div
      • add some things with class="fragment" inside that thing
        • add title="<a selector>" to those things
          • [*|label=<a label>] is good
          • for more about selectors, check out the W3C page

Example

Let's assume I made an SVG in Inkscape, and saved it next to my index.html. It has three layers: base, fragment1 and fragment2.

<html>
  ...
  <section>
    <div data-svg-fragment="figure.svg#[*|label=base]">
      <a class="fragment" href="[*|label=fragment1]"></a>
      <a class="fragment" href="[*|label=fragment2]"></a>
    </div>
  </section>
  ...
  <script>
    ...
    Reveal.initialize({
      dependencies: [
        ...
        {
          // maybe you put this in `plugins`
          src: 'reveal-svg-fragment.js',
          condition: function(){
            return !!document.querySelector( '[data-svg-fragment]' );
          }
          // Additional options
          // defaults to using already-loaded version, or CDN
          //d3: "./d3.min.js",
          // use a different attribute for your fragment selector
          //selector: "title",
        }
        ...
      ]
    ...
    }
    ...
  </script>
  ...
</html>

LIMITATIONS

  • won't work in Chrome against file://
    • workarounds:
      • dropbox
      • sharepoint
      • confluence
      • gist
      • python -m SimpleHTTPServer
  • probably won't work in IE
    • wontfix
Display the source blob
Display the rendered blob
Raw
d3.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Display the source blob
Display the rendered blob
Raw
github.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Raw
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>reveal.js svg fragments</title>
<meta name="description" content="An SVG Plugin for reveal.js">
<meta name="author" content="Nicholas Bollweg">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link rel="stylesheet" href="//cdn.jsdelivr.net/reveal.js/latest/css/reveal.min.css">
<link rel="stylesheet" href="//cdn.jsdelivr.net/reveal.js/latest/css/theme/default.css" id="theme">
<!-- For syntax highlighting -->
<link rel="stylesheet" href="//cdn.jsdelivr.net/reveal.js/latest/lib/css/zenburn.css">
<!-- If the query includes 'print-pdf', include the PDF print sheet -->
<script>
if( window.location.search.match( /print-pdf/gi ) ) {
var link = document.createElement( 'link' );
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = '//cdn.jsdelivr.net/reveal.js/latest/css/print/pdf.css';
document.getElementsByTagName( 'head' )[0].appendChild( link );
}
</script>
<style>
.column{ width: 50%; float:left;}
</style>
<!--[if lt IE 9]>
<script src="lib/js/html5shiv.js"></script>
<![endif]-->
</head>
<body>
<div class="reveal">
<!-- Any section element inside of this container is displayed as a slide -->
<div class="slides">
<section>
<h1>Reveal.js SVG Fragments</h1>
<h3>
<div class="column">
Built with <a href="http://d3js.org">d3</a>
<div data-svg-fragment="d3.svg"></div>
</div>
<div class="column">
Works with <a href="http://inkscape.org">Inkscape</a>
<div data-svg-fragment="inkscape.svg" href="http://inkscape.org"></div>
</div>
</h3>
<p>
<small>Created by <a href="http://github.com/bollwyvl">@bollwyvl</a></small>
</p>
</section>
<section>
<h1>Basic HTML Test</h1>
<div data-svg-fragment="test.svg#[*|label=base]">
<a class="fragment" title="[*|label=fragment1]"></a>
<a class="fragment" title="[*|label=fragment2]"></a>
</div>
</section>
<section data-markdown>
<script type="text/template">
# Using Markdown
<div data-svg-fragment="test.svg#[*|label=fragment1]">
<a class="fragment" title="[*|label=base]"></a>
<a class="fragment" title="[*|label=fragment2]"></a>
</div>
</script>
</section>
<section>
<h1>Questions / Feedback</h1>
<h3>
Comment/fork on
<a href="https://gist.github.com/bollwyvl/fe1d2806449487cdf88a">
GitHub
</a>
<div data-svg-fragment="github.svg"></div>
</h3>
</section>
</div>
</div>
<script src="//cdn.jsdelivr.net/reveal.js/latest/lib/js/head.min.js"></script>
<script src="//cdn.jsdelivr.net/reveal.js/latest/js/reveal.min.js"></script>
<script>
var cdn = "//cdn.jsdelivr.net/reveal.js/latest/";
// Full list of configuration options available here:
// https://github.com/hakimel/reveal.js#configuration
Reveal.initialize({
controls: true,
progress: true,
history: true,
center: true,
theme: Reveal.getQueryHash().theme, // available themes are in /css/theme
transition: Reveal.getQueryHash().transition || 'default', // default/cube/page/concave/zoom/linear/fade/none
// Parallax scrolling
// parallaxBackgroundImage: 'https://s3.amazonaws.com/hakim-static/reveal-js/reveal-parallax-1.jpg',
// parallaxBackgroundSize: '2100px 900px',
// Optional libraries used to extend on reveal.js
dependencies: [
{ src: cdn + 'lib/js/classList.js', condition: function() { return !document.body.classList; } },
{ src: cdn + 'plugin/markdown/marked.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
{ src: cdn + 'plugin/markdown/markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
{ src: cdn + 'plugin/highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } },
{ src: cdn + 'plugin/zoom-js/zoom.js', async: true, condition: function() { return !!document.body.classList; } },
{ src: cdn + 'plugin/notes/notes.js', async: true, condition: function() { return !!document.body.classList; } },
{ src: 'reveal-svg-fragment.js', condition: function() { return !!document.querySelector( '[data-svg-fragment]' ); } }
]
});
</script>
</body>
</html>
Display the source blob
Display the rendered blob
Raw
inkscape.svg
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
version="1.0"
width="128"
height="128"
id="svg2">
<defs
id="defs4">
<linearGradient
id="WhiteTransparent"
gradientUnits="userSpaceOnUse">
<stop
id="stop7"
style="stop-color:#ffffff;stop-opacity:1"
offset="0" />
<stop
id="stop9"
style="stop-color:#ffffff;stop-opacity:0"
offset="1" />
</linearGradient>
<linearGradient
x1="0"
y1="128"
x2="0"
y2="76"
id="liquidSpecular"
xlink:href="#WhiteTransparent"
gradientUnits="userSpaceOnUse" />
<linearGradient
x1="80"
y1="20"
x2="60"
y2="40"
id="sideSpecular"
xlink:href="#WhiteTransparent"
gradientUnits="userSpaceOnUse" />
<clipPath
id="clipoutline1">
<path
d="M 54.1,12.5 12.9,54.7 C -2.7,70.3 23,69 32.3,74.9 36.6,77.7 18.5,81.3 22.2,85 c 3.6,3.7 21.7,7.1 25.3,10.7 3.6,3.7 -7.3,7.6 -3.7,11.3 3.5,3.7 11.9,0.2 13.4,8.6 1.1,6.2 15.4,3.1 21.8,-2.2 4,-3.4 -6.9,-3.4 -3.3,-7.1 9,-9.1 17,-4.1 20.3,-12.5 1.8,-4.5 -13.6,-7.7 -9.5,-10.6 9.8,-6.9 45.8,-10.4 29.2,-27 L 73,12.5 c -5.3,-5 -14,-5 -18.9,0 z m -9.9,64.7 c 0.9,0 30.8,4 19.3,7.1 -4.4,1.2 -24.6,-7.1 -19.3,-7.1 z m 57.2,16.6 c 0,2.1 16.3,3.3 15.4,-0.5 -1.3,-6.4 -13.6,-5.9 -15.4,0.5 z m -69.5,11.1 c 3.7,3.2 9.3,-0.7 11.1,-5.2 -3.6,-4.7 -16.9,0.3 -11.1,5.2 z m 67.5,-6.7 c -4.6,4.2 0.8,8.6 5.3,5.7 1.2,-0.8 -0.1,-4.7 -5.3,-5.7 z"
id="outline1" />
</clipPath>
<linearGradient
x1="82.118591"
y1="20"
x2="60"
y2="40"
id="linearGradient9175"
xlink:href="#linearGradient5785"
gradientUnits="userSpaceOnUse" />
<linearGradient
id="linearGradient5785"
gradientUnits="userSpaceOnUse">
<stop
id="stop5787"
style="stop-color:#c0cdf9;stop-opacity:1"
offset="0" />
<stop
id="stop5789"
style="stop-color:#07092d;stop-opacity:0.28804347"
offset="1" />
</linearGradient>
<filter
id="filter8490"
color-interpolation-filters="sRGB">
<feGaussianBlur
id="feGaussianBlur8492"
stdDeviation="2.4163949"
inkscape:collect="always" />
</filter>
<filter
id="filter6017-3"
color-interpolation-filters="sRGB">
<feGaussianBlur
id="feGaussianBlur6019-9"
stdDeviation="0.80546496"
inkscape:collect="always" />
</filter>
<filter
id="filter6031-0"
color-interpolation-filters="sRGB">
<feGaussianBlur
id="feGaussianBlur6033-8"
stdDeviation="3.4903482"
inkscape:collect="always" />
</filter>
<linearGradient
x1="82.118591"
y1="20"
x2="60"
y2="40"
id="linearGradient9175-3"
xlink:href="#linearGradient5785-8"
gradientUnits="userSpaceOnUse" />
<linearGradient
id="linearGradient5785-8"
gradientUnits="userSpaceOnUse">
<stop
id="stop5787-7"
style="stop-color:#c0cdf9;stop-opacity:1"
offset="0" />
<stop
id="stop5789-3"
style="stop-color:#07092d;stop-opacity:0.28804347"
offset="1" />
</linearGradient>
<clipPath
id="clipPath9086-1">
<use
transform="translate(1.0095461e-6,0)"
id="use9088-0"
style="opacity:0.25;fill:#ffffff;fill-opacity:1"
x="0"
y="0"
width="400"
height="300"
xlink:href="#outline1" />
</clipPath>
<filter
id="filter8490-0"
color-interpolation-filters="sRGB">
<feGaussianBlur
id="feGaussianBlur8492-5"
stdDeviation="2.4163949"
inkscape:collect="always" />
</filter>
<linearGradient
x1="33"
y1="35"
x2="58"
y2="60"
id="shinySpecular-0"
xlink:href="#WhiteTransparent-3"
gradientUnits="userSpaceOnUse"
gradientTransform="matrix(1.009184,0,0,1.009184,-0.3890738,-0.3831933)" />
<linearGradient
id="WhiteTransparent-3"
gradientUnits="userSpaceOnUse">
<stop
id="stop7606-1"
style="stop-color:#ffffff;stop-opacity:1"
offset="0" />
<stop
id="stop7608-8"
style="stop-color:#ffffff;stop-opacity:0"
offset="1" />
</linearGradient>
<linearGradient
x1="60"
y1="20"
x2="90"
y2="50"
id="IcecapTip-0"
xlink:href="#WhiteTransparent-3"
gradientUnits="userSpaceOnUse" />
<radialGradient
cx="116.31038"
cy="250.89737"
r="30.599579"
fx="116.31038"
fy="250.89737"
id="radialGradient9177-1"
xlink:href="#linearGradient8568-7"
gradientUnits="userSpaceOnUse"
gradientTransform="matrix(1.5700516,0,0,1.0509301,-75.500107,-22.095908)" />
<linearGradient
id="linearGradient8568-7">
<stop
id="stop8570-9"
style="stop-color:#ffffff;stop-opacity:1"
offset="0" />
<stop
id="stop8572-1"
style="stop-color:#ffffff;stop-opacity:0"
offset="1" />
</linearGradient>
<radialGradient
cx="132.44434"
cy="251.99396"
r="30.599579"
fx="132.44434"
fy="251.99396"
id="radialGradient8574-0"
xlink:href="#linearGradient8568-7"
gradientUnits="userSpaceOnUse"
gradientTransform="matrix(2.0032532,0,0,1.340898,-132.8752,-95.166065)" />
<filter
height="1.2284414"
y="-0.11422065"
width="1.1561583"
x="-0.078079157"
id="filter8732-3"
color-interpolation-filters="sRGB">
<feGaussianBlur
id="feGaussianBlur8734-5"
stdDeviation="1.9579068"
inkscape:collect="always" />
</filter>
<radialGradient
cx="210.25"
cy="168.5"
r="34.25"
fx="210.25"
fy="168.5"
id="radialGradient8744-9"
xlink:href="#linearGradient8738-4"
gradientUnits="userSpaceOnUse"
gradientTransform="matrix(1,0,0,0.4233577,0,97.164234)" />
<linearGradient
id="linearGradient8738-4">
<stop
id="stop8740-8"
style="stop-color:#ffffff;stop-opacity:1"
offset="0" />
<stop
id="stop8742-4"
style="stop-color:#ffffff;stop-opacity:0"
offset="1" />
</linearGradient>
<radialGradient
cx="217.5"
cy="182.08189"
r="34.25"
fx="217.5"
fy="182.08189"
id="radialGradient8768-6"
xlink:href="#linearGradient8738-4"
gradientUnits="userSpaceOnUse"
gradientTransform="matrix(1,0,0,0.4233577,0,97.164234)" />
<filter
height="1.3508246"
y="-0.1754123"
width="1.1485243"
x="-0.074262142"
id="filter8764-9"
color-interpolation-filters="sRGB">
<feGaussianBlur
id="feGaussianBlur8766-2"
stdDeviation="2.1195652"
inkscape:collect="always" />
</filter>
<linearGradient
x1="231.625"
y1="195.1875"
x2="231.75"
y2="201.5"
id="linearGradient8912-9"
xlink:href="#linearGradient8866-0"
gradientUnits="userSpaceOnUse" />
<linearGradient
id="linearGradient8866-0">
<stop
id="stop8868-3"
style="stop-color:#ffffff;stop-opacity:1"
offset="0" />
<stop
id="stop8870-0"
style="stop-color:#ffffff;stop-opacity:0"
offset="1" />
</linearGradient>
<linearGradient
x1="231.37646"
y1="195.62132"
x2="231.37646"
y2="200.07138"
id="linearGradient8910-3"
xlink:href="#linearGradient8866-0"
gradientUnits="userSpaceOnUse" />
<filter
height="1.556464"
y="-0.27823201"
width="1.1708827"
x="-0.085441329"
id="filter8906-3"
color-interpolation-filters="sRGB">
<feGaussianBlur
id="feGaussianBlur8908-7"
stdDeviation="0.56515877"
inkscape:collect="always" />
</filter>
<radialGradient
cx="228.21875"
cy="204.83229"
r="14.09375"
fx="228.21875"
fy="204.83229"
id="radialGradient8922-9"
xlink:href="#linearGradient8916-4"
gradientUnits="userSpaceOnUse"
gradientTransform="matrix(1,0,0,0.1477455,0,174.56924)" />
<linearGradient
id="linearGradient8916-4">
<stop
id="stop8918-9"
style="stop-color:#ffffff;stop-opacity:1"
offset="0" />
<stop
id="stop8920-9"
style="stop-color:#ffffff;stop-opacity:0"
offset="1" />
</linearGradient>
<filter
height="1.9457178"
y="-0.47285891"
width="1.1397254"
x="-0.069862768"
id="filter8980-1"
color-interpolation-filters="sRGB">
<feGaussianBlur
id="feGaussianBlur8982-9"
stdDeviation="0.82052366"
inkscape:collect="always" />
</filter>
<linearGradient
x1="231.625"
y1="195.1875"
x2="231.75"
y2="201.5"
id="linearGradient8990-4"
xlink:href="#linearGradient8866-0"
gradientUnits="userSpaceOnUse" />
<linearGradient
x1="231.37646"
y1="195.62132"
x2="231.37646"
y2="200.07138"
id="linearGradient8992-2"
xlink:href="#linearGradient8866-0"
gradientUnits="userSpaceOnUse" />
<radialGradient
cx="228.21875"
cy="204.83229"
r="14.09375"
fx="228.21875"
fy="204.83229"
id="radialGradient8994-0"
xlink:href="#linearGradient8916-4"
gradientUnits="userSpaceOnUse"
gradientTransform="matrix(1,0,0,0.1477455,0,174.56924)" />
<radialGradient
cx="89.875"
cy="187.86935"
r="22.75"
fx="89.875"
fy="187.86935"
id="radialGradient9004-6"
xlink:href="#linearGradient8998-5"
gradientUnits="userSpaceOnUse"
gradientTransform="matrix(1,0,0,0.4070844,0,115.76014)" />
<linearGradient
id="linearGradient8998-5">
<stop
id="stop9000-9"
style="stop-color:#ffffff;stop-opacity:0.33004925"
offset="0" />
<stop
id="stop9002-5"
style="stop-color:#ffffff;stop-opacity:0"
offset="1" />
</linearGradient>
<linearGradient
x1="231.625"
y1="195.1875"
x2="231.75"
y2="201.5"
id="linearGradient9023-6"
xlink:href="#linearGradient8866-0"
gradientUnits="userSpaceOnUse" />
<linearGradient
x1="231.37646"
y1="195.62132"
x2="231.37646"
y2="200.07138"
id="linearGradient9025-1"
xlink:href="#linearGradient8866-0"
gradientUnits="userSpaceOnUse" />
<radialGradient
cx="90.28125"
cy="230.83626"
r="10.46875"
fx="90.28125"
fy="230.83626"
id="radialGradient9046-1"
xlink:href="#linearGradient9040-4"
gradientUnits="userSpaceOnUse"
gradientTransform="matrix(1.1850746,-0.3283582,0.1228557,0.4433973,-45.068314,152.92161)" />
<linearGradient
id="linearGradient9040-4">
<stop
id="stop9042-3"
style="stop-color:#ffffff;stop-opacity:1"
offset="0" />
<stop
id="stop9044-7"
style="stop-color:#ffffff;stop-opacity:0"
offset="1" />
</linearGradient>
<filter
height="1.3311402"
y="-0.1655701"
width="1.1523587"
x="-0.076179281"
id="filter9068-2"
color-interpolation-filters="sRGB">
<feGaussianBlur
id="feGaussianBlur9070-7"
stdDeviation="0.66458488"
inkscape:collect="always" />
</filter>
<radialGradient
cx="68.39994"
cy="21.225746"
r="54.783398"
fx="68.39994"
fy="21.225746"
id="radialGradient11553-3"
xlink:href="#linearGradient9286-3"
gradientUnits="userSpaceOnUse"
gradientTransform="matrix(1.7221535,0,0,1.6949765,-49.39526,-14.078057)" />
<linearGradient
id="linearGradient9286-3">
<stop
id="stop9288-9"
style="stop-color:#ffffff;stop-opacity:1"
offset="0" />
<stop
id="stop9290-2"
style="stop-color:#ffffff;stop-opacity:0"
offset="1" />
</linearGradient>
<filter
id="filter9298-4"
color-interpolation-filters="sRGB">
<feGaussianBlur
id="feGaussianBlur9300-4"
stdDeviation="0.32610678"
inkscape:collect="always" />
</filter>
<linearGradient
x1="95.5"
y1="208.16444"
x2="153.5"
y2="223.5"
id="linearGradient5905-4"
xlink:href="#linearGradient5899-9"
gradientUnits="userSpaceOnUse" />
<linearGradient
id="linearGradient5899-9">
<stop
id="stop5901-9"
style="stop-color:#ffffff;stop-opacity:1"
offset="0" />
<stop
id="stop5903-3"
style="stop-color:#ffffff;stop-opacity:0"
offset="1" />
</linearGradient>
<filter
height="1.2446715"
y="-0.12233575"
width="1.165018"
x="-0.082508981"
id="filter5983-8"
color-interpolation-filters="sRGB">
<feGaussianBlur
id="feGaussianBlur5985-3"
stdDeviation="3.6868363"
inkscape:collect="always" />
</filter>
<linearGradient
x1="57.225197"
y1="76.246338"
x2="53.63158"
y2="84.480316"
id="linearGradient5801-2"
xlink:href="#linearGradient5793-9"
gradientUnits="userSpaceOnUse"
gradientTransform="matrix(0.8852575,0,0,0.8852575,5.1772151,9.2293372)" />
<linearGradient
id="linearGradient5793-9">
<stop
id="stop5795-5"
style="stop-color:#eeeeec;stop-opacity:1"
offset="0" />
<stop
id="stop5797-4"
style="stop-color:#eeeeec;stop-opacity:0"
offset="1" />
</linearGradient>
<radialGradient
cx="181.22731"
cy="214.55121"
r="22.466398"
fx="181.22731"
fy="214.55121"
id="radialGradient5811-3"
xlink:href="#linearGradient5805-9"
gradientUnits="userSpaceOnUse"
gradientTransform="matrix(1.3515234,0,0,1.7175707,-63.705646,-153.95568)" />
<linearGradient
id="linearGradient5805-9">
<stop
id="stop5807-4"
style="stop-color:#ffffff;stop-opacity:1"
offset="0" />
<stop
id="stop5809-9"
style="stop-color:#ffffff;stop-opacity:0"
offset="1" />
</linearGradient>
<filter
id="filter5845-5"
color-interpolation-filters="sRGB">
<feGaussianBlur
id="feGaussianBlur5847-5"
stdDeviation="1.2409356"
inkscape:collect="always" />
</filter>
<linearGradient
x1="73.712105"
y1="180.47572"
x2="82.754066"
y2="187.65974"
id="linearGradient5822-7"
xlink:href="#WhiteTransparent-3"
gradientUnits="userSpaceOnUse"
gradientTransform="matrix(0.4927913,0,0,0.4927913,-6.0003885,-9.7225182)" />
<linearGradient
id="linearGradient10981-3-9">
<stop
id="stop10983-2-0"
style="stop-color:#729fcf;stop-opacity:1"
offset="0" />
<stop
id="stop10985-3-7"
style="stop-color:#729fcf;stop-opacity:0"
offset="1" />
</linearGradient>
<filter
id="filter10997-7-2"
color-interpolation-filters="sRGB">
<feGaussianBlur
id="feGaussianBlur10999-0-7"
stdDeviation="2.7696726"
inkscape:collect="always" />
</filter>
<linearGradient
x1="180.81293"
y1="217.5"
x2="153.70045"
y2="144.5"
id="linearGradient1539"
xlink:href="#linearGradient10981-3-9"
gradientUnits="userSpaceOnUse"
gradientTransform="translate(-130.16572,-83.352786)" />
</defs>
<style
type="text/css"
id="style26" />
<g
transform="matrix(0.9939405,0,0,0.9939405,0.38937111,-1.4450758)"
id="g9139"
style="display:inline;enable-background:new">
<g
transform="translate(3.6896803e-7,0.4883067)"
id="g6035"
style="opacity:0.78325124">
<path
d="m 54.1,12.988307 -41.2,42.2 c -15.6,15.6 10.1,14.3 19.4,20.2 4.3,2.8 -13.8,6.4 -10.1,10.1 3.6,3.7 21.7,7.1 25.3,10.7 3.6,3.699996 -7.3,7.600003 -3.7,11.300003 3.5,3.7 11.9,0.2 13.4,8.6 1.1,6.2 15.4,3.1 21.8,-2.2 4,-3.4 -6.9,-3.4 -3.3,-7.1 9,-9.100003 17,-4.1 20.3,-12.500003 1.8,-4.5 -13.6,-7.7 -9.5,-10.6 9.8,-6.9 45.8,-10.4 29.2,-27 l -42.7,-43.7 c -5.3,-5.0000003 -14,-5.0000003 -18.9,0 z m 47.3,81.3 c 0,2.1 16.3,3.3 15.4,-0.5 -1.3,-6.4 -13.6,-5.9 -15.4,0.5 z M 31.9,105.38831 c 3.7,3.2 9.3,-0.7 11.1,-5.2 -3.6,-4.700003 -16.9,0.3 -11.1,5.2 z m 67.5,-6.700003 c -4.6,4.200003 0.8,8.600003 5.3,5.700003 1.2,-0.8 -0.1,-4.700007 -5.3,-5.700003 z"
id="path5987"
style="fill:#000000;fill-opacity:1;filter:url(#filter6017-3)" />
<path
d="m 54.1,13.964921 -41.2,42.2 c -15.6,15.6 10.1,14.3 19.4,20.2 4.3,2.8 -13.8,6.4 -10.1,10.1 3.6,3.7 21.7,7.1 25.3,10.7 3.6,3.699999 -7.3,7.600009 -3.7,11.300009 3.5,3.7 11.9,0.2 13.4,8.6 1.1,6.2 15.4,3.1 21.8,-2.2 4,-3.4 -6.9,-3.4 -3.3,-7.1 9,-9.100009 17,-4.1 20.3,-12.500009 1.8,-4.5 -13.6,-7.7 -9.5,-10.6 9.8,-6.9 45.8,-10.4 29.2,-27 l -42.7,-43.7 c -5.3,-5.0000009 -14,-5.0000009 -18.9,0 z m 47.3,81.3 c 0,2.1 16.3,3.3 15.4,-0.5 -1.3,-6.4 -13.6,-5.9 -15.4,0.5 z M 31.9,106.36493 c 3.7,3.2 9.3,-0.7 11.1,-5.2 -3.6,-4.700009 -16.9,0.3 -11.1,5.2 z m 67.5,-6.700009 c -4.6,4.200009 0.8,8.600009 5.3,5.700009 1.2,-0.8 -0.1,-4.70001 -5.3,-5.700009 z"
id="path6021"
style="opacity:0.57635468;fill:#000000;fill-opacity:1;filter:url(#filter6031-0)" />
</g>
<path
d="M 54.1,12.5 12.9,54.7 C -2.7,70.3 23,69 32.3,74.9 36.6,77.7 18.5,81.3 22.2,85 c 3.6,3.7 21.7,7.1 25.3,10.7 3.6,3.7 -7.3,7.6 -3.7,11.3 3.5,3.7 11.9,0.2 13.4,8.6 1.1,6.2 15.4,3.1 21.8,-2.2 4,-3.4 -6.9,-3.4 -3.3,-7.1 9,-9.1 17,-4.1 20.3,-12.5 1.8,-4.5 -13.6,-7.7 -9.5,-10.6 9.8,-6.9 45.8,-10.4 29.2,-27 L 73,12.5 c -5.3,-5 -14,-5 -18.9,0 z m 47.3,81.3 c 0,2.1 16.3,3.3 15.4,-0.5 -1.3,-6.4 -13.6,-5.9 -15.4,0.5 z m -69.5,11.1 c 3.7,3.2 9.3,-0.7 11.1,-5.2 -3.6,-4.7 -16.9,0.3 -11.1,5.2 z m 67.5,-6.7 c -4.6,4.2 0.8,8.6 5.3,5.7 1.2,-0.8 -0.1,-4.7 -5.3,-5.7 z"
id="use7631"
style="fill:#000000;fill-opacity:1" />
<path
d="M 54.1,12.5 12.9,54.7 C -2.7,70.3 23,69 32.3,74.9 36.6,77.7 18.5,81.3 22.2,85 c 3.6,3.7 21.7,7.1 25.3,10.7 3.6,3.7 -7.3,7.6 -3.7,11.3 3.5,3.7 11.9,0.2 13.4,8.6 1.1,6.2 15.4,3.1 21.8,-2.2 4,-3.4 -6.9,-3.4 -3.3,-7.1 9,-9.1 17,-4.1 20.3,-12.5 1.8,-4.5 -13.6,-7.7 -9.5,-10.6 9.8,-6.9 45.8,-10.4 29.2,-27 L 73,12.5 c -5.3,-5 -14,-5 -18.9,0 z m 47.3,81.3 c 0,2.1 16.3,3.3 15.4,-0.5 -1.3,-6.4 -13.6,-5.9 -15.4,0.5 z m -69.5,11.1 c 3.7,3.2 9.3,-0.7 11.1,-5.2 -3.6,-4.7 -16.9,0.3 -11.1,5.2 z m 67.5,-6.7 c -4.6,4.2 0.8,8.6 5.3,5.7 1.2,-0.8 -0.1,-4.7 -5.3,-5.7 z"
id="use7639"
style="fill:none" />
<use
transform="matrix(0.9905442,0,0,0.9905442,0.6051535,0.604136)"
clip-path="url(#clipPath9086-1)"
id="use7641"
style="opacity:0.66995072;fill:url(#linearGradient9175-3);filter:url(#filter8490-0)"
x="0"
y="0"
width="400"
height="300"
xlink:href="#outline1" />
<path
d="M 16.565217,57.039374 C 5.3632748,68.140398 25.042362,65.011927 40.180121,70.966113 L 71.464824,15.965587 c -4.743164,-4.844083 -10.798268,-4.44041 -15.137759,0 L 16.565217,57.039374 z"
id="path7643"
style="opacity:0.50526315;fill:url(#shinySpecular-0);stroke:none" />
<path
d="m 70.5,15.5 16.3,16.6 c 1.5,1.5 1.5,4.6 0.6,5.5 L 79.3,31 77.7,40.7 71,37.1 60.1,44 56.5,29.5 50.7,42.1 36.2,42 c -2.8,0 -2.4,-2.9 0.5,-5.8 5.7,-6.3 16.8,-17 20.3,-20.7 3.6,-3.7 9.9,-3.6 13.5,0 z"
id="icecap"
style="fill:url(#IcecapTip-0)" />
<path
d="m 113,203.5 c 0,0 3.34046,5.10071 3,7.5 -0.66817,4.70868 -10.80945,7.05842 -8.5625,11.25 2.21991,4.14114 10.22139,1.79405 16.9375,6.125 6.6875,4.3125 4.88949,13.10149 9.75,15.3125 9.47925,4.31205 34.375,-7.4375 33.125,-7.1875 -1.25,0.25 -24.57014,5.09545 -29.82014,0.84545 -5.98592,-4.84575 -7.70217,-8.23028 -12.11736,-11.09545 -4.13751,-2.68498 -9.94967,-3.78036 -11.30246,-5.97865 -1.35279,-2.19829 2.7092,-5.03469 2.98996,-9.27135 0.16862,-2.54442 -4,-7.5 -4,-7.5 z"
transform="matrix(0.5296484,0,0,0.5296484,-11.722258,-13.864159)"
id="path8566"
style="opacity:0.21674876;fill:url(#radialGradient9177-1);fill-opacity:1;fill-rule:evenodd;stroke:none" />
<path
d="m 113,203.5 c 0,0 3.34046,5.10071 3,7.5 -0.66817,4.70868 -10.80945,7.05842 -8.5625,11.25 2.21991,4.14114 10.22139,1.79405 16.9375,6.125 6.6875,4.3125 4.88949,13.10149 9.75,15.3125 9.47925,4.31205 34.375,-7.4375 33.125,-7.1875 -41.33959,0.15736 -33.62485,-10.4946 -49.5625,-17.5 -2.30305,-1.0123 -0.96826,-3.76334 -0.6875,-8 0.16862,-2.54442 -4,-7.5 -4,-7.5 z"
transform="matrix(0.5296484,0,0,0.5296484,-11.722258,-13.864159)"
id="path8718"
style="opacity:0.27586209;fill:url(#radialGradient8574-0);fill-opacity:1;fill-rule:evenodd;stroke:none;filter:url(#filter8732-3)" />
<path
d="m 183.25,181.75 c 37.10371,-13.65459 49.02363,-15.53058 61.25,-27.75 -14.16069,11.95366 -44.09847,18.3658 -68.5,29 l 7.25,-1.25 z"
transform="matrix(0.5296484,0,0,0.5296484,-11.722258,-13.864159)"
id="path8736"
style="opacity:0.45320195;fill:url(#radialGradient8744-9);fill-opacity:1;fill-rule:evenodd;stroke:none" />
<path
d="m 183.25,181.75 c 61.10371,-21.65459 50.77363,-21.53058 61.25,-27.75 -19.42769,7.43666 -55.73446,8.22981 -68.5,29 l 7.25,-1.25 z"
transform="matrix(0.5296484,0,0,0.5296484,-11.722258,-14.791044)"
id="path8746"
style="opacity:0.51231528;fill:url(#radialGradient8768-6);fill-opacity:1;fill-rule:evenodd;stroke:none;filter:url(#filter8764-9)" />
<path
d="m 237.875,199.0625 a 7.9375,2.4375 0 1 1 -15.875,0 7.9375,2.4375 0 1 1 15.875,0 z"
transform="matrix(0.5296484,0,0,0.5296484,-12.384318,-14.791044)"
id="path8864"
style="opacity:0.2857143;fill:url(#linearGradient8912-9);fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />
<path
d="m 237.875,199.0625 a 7.9375,2.4375 0 1 1 -15.875,0 7.9375,2.4375 0 1 1 15.875,0 z"
transform="matrix(0.7131486,0,0,1.1407811,-54.577902,-134.95502)"
id="path8874"
style="opacity:0.62068942;fill:url(#linearGradient8910-3);fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1;marker:none;visibility:visible;display:inline;overflow:visible;filter:url(#filter8906-3);enable-background:accumulate" />
<path
d="m 214.125,203.75 c 3.76948,3.48424 24.75576,5.27219 28.1875,-1 -6.73663,4.7839 -21.71677,3.10264 -28.1875,1 z"
transform="matrix(0.5296484,0,0,0.5296484,-11.722258,-14.238677)"
id="path8914"
style="fill:url(#radialGradient8922-9);fill-opacity:1;fill-rule:evenodd;stroke:none;filter:url(#filter8980-1)" />
<path
d="m 236.44594,199.0625 a 6.5084434,3.0820823 0 1 1 -13.01688,0 6.5084434,3.0820823 0 1 1 13.01688,0 z"
transform="matrix(0.2042516,-0.1035605,0.2395168,0.4723972,5.7547955,30.286555)"
id="path8984"
style="opacity:0.2857143;fill:url(#linearGradient8990-4);fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />
<path
d="m 236.99305,199.0625 a 7.0555515,2.1400476 0 1 1 -14.1111,0 7.0555515,2.1400476 0 1 1 14.1111,0 z"
transform="matrix(0.2750159,-0.1394397,0.5158824,1.0174708,-65.353496,-69.300635)"
id="path8986"
style="opacity:0.62068942;fill:url(#linearGradient8992-2);fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1;marker:none;visibility:visible;display:inline;overflow:visible;filter:url(#filter8906-3);enable-background:accumulate" />
<path
d="m 217.05754,201.94027 c 3.76948,3.48424 26.97122,8.91123 25.25496,0.80973 -3.31737,5.32326 -18.78423,1.29291 -25.25496,-0.80973 z"
transform="matrix(0.2042516,-0.1035605,0.2395168,0.4723972,6.2599008,30.649764)"
id="path8988"
style="fill:url(#radialGradient8994-0);fill-opacity:1;fill-rule:evenodd;stroke:none;filter:url(#filter8980-1)" />
<path
d="m 68.25,186 c 0,-0.62057 38.84622,11.83854 45.5,18.5 -5.47122,-5.33854 -33.159709,-17.61609 -37.375,-17.75 -4.215291,-0.13391 -7.625,-0.5 -8.125,-0.75 z"
transform="matrix(0.5296484,0,0,0.5296484,-11.722258,-13.864159)"
id="path8996"
style="fill:url(#radialGradient9004-6);fill-opacity:1;fill-rule:evenodd;stroke:none" />
<g
transform="matrix(0.8790148,-0.1929959,0.2338341,0.6959295,-20.209533,36.725557)"
id="g9018">
<path
d="m 237.875,199.0625 a 7.9375,2.4375 0 1 1 -15.875,0 7.9375,2.4375 0 1 1 15.875,0 z"
transform="matrix(0.5296484,0,0,0.5296484,-84.4165,-4.7277245)"
id="path9006"
style="opacity:0.2857143;fill:url(#linearGradient9023-6);fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />
<path
d="m 237.875,199.0625 a 7.9375,2.4375 0 1 1 -15.875,0 7.9375,2.4375 0 1 1 15.875,0 z"
transform="matrix(0.7131486,0,0,1.1407811,-126.61008,-124.8917)"
id="path9008"
style="opacity:0.62068942;fill:url(#linearGradient9025-1);fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1;marker:none;visibility:visible;display:inline;overflow:visible;filter:url(#filter8906-3);enable-background:accumulate" />
</g>
<path
d="m 80.5,220.0625 c 0,0 2.10339,5.65078 7.875,5.9375 5.83887,0.29006 12.50324,-7.00698 13.0625,-9.625 -1,2.25 -6.590334,9.03328 -13.8125,8.9375 -4.099862,-0.0544 -7.125,-5.25 -7.125,-5.25 z"
transform="matrix(0.5296484,0,0,0.5296484,-11.622949,-14.42691)"
id="path9038"
style="opacity:0.61576353;fill:url(#radialGradient9046-1);fill-opacity:1;fill-rule:evenodd;stroke:none;filter:url(#filter9068-2)" />
<path
d="m 63.40625,10.21875 c -3.098181,0 -6.134601,1.122042 -8.28125,3.3125 l -41.1875,42.1875 c -3.76562,3.76562 -4.6702413,6.23069 -4.4375,7.625 0.1163706,0.697155 0.4585994,1.303027 1.1875,1.9375 0.728901,0.634473 1.831495,1.256389 3.15625,1.8125 2.649511,1.112222 6.217961,2.008085 9.71875,2.96875 3.500789,0.960665 6.929812,1.974626 9.53125,3.625 0.396623,0.258266 0.769088,0.576468 1.03125,1.03125 0.262162,0.454782 0.354216,1.056088 0.25,1.5625 -0.208431,1.012824 -0.83202,1.546985 -1.46875,2.03125 -1.27346,0.96853 -3.023257,1.773229 -4.78125,2.625 -1.757993,0.851771 -3.524925,1.723242 -4.40625,2.4375 -0.440663,0.357129 -0.600112,0.678133 -0.59375,0.65625 0.0064,-0.02188 -0.116851,-0.273101 0.09375,-0.0625 0.551764,0.56709 2.274075,1.538165 4.46875,2.40625 2.194675,0.868085 4.88065,1.745624 7.59375,2.625 2.7131,0.879376 5.4575,1.749959 7.78125,2.65625 2.32375,0.906291 4.217694,1.748944 5.46875,3 0.622681,0.639978 1.062632,1.435956 1.15625,2.25 0.09362,0.814044 -0.126809,1.578032 -0.4375,2.21875 -0.621382,1.28144 -1.620313,2.26719 -2.53125,3.21875 -0.910938,0.95156 -1.736226,1.86034 -2.03125,2.46875 -0.147512,0.3042 -0.170347,0.50242 -0.15625,0.625 0.0141,0.12258 0.03518,0.24623 0.3125,0.53125 A 1.4566768,1.4566768 0 0 1 44.875,106 c 1.193594,1.2618 3.787002,1.43924 6.71875,2.125 1.465874,0.34288 2.998909,0.86196 4.3125,2 1.313591,1.13804 2.299435,2.87059 2.71875,5.21875 0.176459,0.99459 0.702722,1.4788 1.96875,1.875 1.266028,0.3962 3.194353,0.46554 5.3125,0.15625 4.236295,-0.61859 9.260035,-2.69532 12.15625,-5.09375 0.17999,-0.15299 0.129956,-0.11255 0.1875,-0.1875 -0.194805,-0.13939 -0.651644,-0.43652 -1.40625,-0.8125 -0.891527,-0.4442 -1.944708,-0.85956 -2.75,-1.875 -0.402646,-0.50772 -0.679877,-1.30934 -0.5625,-2.09375 0.117377,-0.78441 0.546832,-1.43702 1.125,-2.03125 4.745751,-4.79848 9.421937,-5.944136 12.9375,-6.875 1.757782,-0.465432 3.229292,-0.891233 4.34375,-1.59375 1.114458,-0.702517 1.98508,-1.663728 2.71875,-3.53125 0.08087,-0.202174 0.07855,-0.260846 -0.03125,-0.5 C 94.515197,92.542096 94.220541,92.159521 93.75,91.75 92.808918,90.930959 91.239577,90.050804 89.6875,89.1875 88.135423,88.324196 86.627034,87.519262 85.53125,86.5 c -0.547892,-0.509631 -1.122017,-1.151633 -1.1875,-2.125 -0.06548,-0.973367 0.572568,-1.851633 1.3125,-2.375 2.745718,-1.93321 6.896278,-3.404906 11.40625,-4.96875 4.50997,-1.563844 9.36113,-3.182125 13.3125,-5.03125 3.95137,-1.849125 6.85729,-3.978669 7.78125,-6.125 0.46198,-1.073165 0.54663,-2.158606 0.0625,-3.5625 -0.48413,-1.403894 -1.58958,-3.120831 -3.5625,-5.09375 L 72,13.5625 c -0.01071,-0.0101 -0.02051,-0.02119 -0.03125,-0.03125 -2.357722,-2.207738 -5.478371,-3.3125 -8.5625,-3.3125 z m 45.9375,80 c -2.63522,0.09513 -5.05952,1.301393 -6.09375,3.1875 0.29381,0.110524 0.55838,0.234969 1.03125,0.34375 1.37562,0.316455 3.29543,0.520736 5.1875,0.5625 1.89207,0.04176 3.78415,-0.117472 4.9375,-0.4375 0.50487,-0.14009 0.77236,-0.281778 0.90625,-0.375 -0.2558,-1.091098 -0.86487,-1.862126 -1.90625,-2.4375 -1.07862,-0.595951 -2.55669,-0.898111 -4.0625,-0.84375 z m -70.5,9.0625 c -2.089872,-0.145348 -4.716548,0.686551 -6,1.71875 -0.641726,0.5161 -0.913269,0.99441 -0.9375,1.3125 -0.02423,0.31809 0.07726,0.74199 0.9375,1.46875 a 1.4566768,1.4566768 0 0 1 0,0.0312 c 1.352809,1.17 2.882256,1.04802 4.625,0.0937 1.460951,-0.79997 2.757201,-2.30075 3.625,-3.875 -0.585032,-0.377341 -1.284532,-0.682853 -2.25,-0.75 z m 61,0.625 c -0.447303,0.5686 -0.690902,1.09797 -0.71875,1.46875 -0.03844,0.51176 0.106611,0.90723 0.5,1.28125 0.73729,0.70099 2.33912,1.00278 3.96875,0.125 -0.0322,-0.1891 -0.0933,-0.47591 -0.34375,-0.84375 -0.4999,-0.73414 -1.6686,-1.5251 -3.40625,-2.03125 z"
id="87235"
style="fill:none;stroke:url(#radialGradient11553-3);stroke-width:0.48830673;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;filter:url(#filter9298-4)" />
<path
d="m 95.5,172 c -5.090606,1.50191 -21.592018,7.73713 -19.25,12.5 2.243595,4.56272 40.61138,6.40132 46.5,20 2.5679,5.93009 -5.89238,10.40326 -3.75,16.5 1.64973,4.69477 14.41196,16.49084 22.48603,22.06781 6.33298,4.37435 14.65096,-3.52244 11.26397,-10.06781 -5.39589,-10.42759 18.44266,-23.19912 29.25,-29 6.30524,-3.38436 -13,-20 -13,-20 0,0 -73.5,-12 -73.5,-12 z"
transform="matrix(0.4883067,0,0,0.4883067,-5.8104012,-7.7042521)"
id="path5897"
style="opacity:0.32512315;fill:url(#linearGradient5905-4);fill-opacity:1;fill-rule:evenodd;stroke:none;filter:url(#filter5983-8)" />
<path
d="m 41.742167,78.533037 c 2.231933,1.639226 6.636757,0.650538 9.282124,1.841759 6.349518,2.859218 14.154941,6.045427 12.718568,0.404555 0,0 -1.615771,1.342042 -1.615771,1.342042 0,0 -0.03153,-2.557545 -0.03153,-2.557545 0,0 -3.751977,0.916294 -3.751977,0.916294 0,0 -2.906173,-2.332759 -4.238526,-3.101995 -0.27829,-0.160669 -1.707695,1.292815 -1.707695,1.292815 0,0 -0.25697,-1.543804 -0.25697,-1.543804 -1.857372,-0.197638 -3.696159,-0.284805 -5.31515,-0.271821 -3.880942,0.03112 -6.499059,0.637741 -5.083074,1.6777 z"
id="path5783"
style="fill:url(#linearGradient5801-2);fill-opacity:1;fill-rule:evenodd;stroke:none" />
<path
d="m 182.75,187.25 c -1.75981,6.4783 21.62776,15.27989 19.875,19.75 -3.85895,9.84158 -24.97596,3.13755 -41.125,23.75 -2.31318,2.95251 3.25,13.5 2.5,12.25 -0.75,-1.25 -6.4649,-9.96285 -5,-14.25 4.59417,-13.44525 49.0128,-18.45749 40.875,-24.875 -4.67988,-3.69058 -21.50546,-13.88721 -17.125,-16.625 z"
transform="matrix(0.4883067,0,0,0.4883067,-5.8104012,-7.7042521)"
id="path5803"
style="opacity:0.47783251;fill:url(#radialGradient5811-3);fill-opacity:1;fill-rule:evenodd;stroke:none;filter:url(#filter5845-5)" />
<path
d="m 236.5,201.1875 a 2.5625,1.0625 0 1 1 -5.125,0 2.5625,1.0625 0 1 1 5.125,0 z"
transform="matrix(0.4883067,0,0,0.4883067,-6.3597463,-8.0094438)"
id="path6041"
style="opacity:0.58620689;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />
<path
d="m 236.5,201.1875 a 2.5625,1.0625 0 1 1 -5.125,0 2.5625,1.0625 0 1 1 5.125,0 z"
transform="matrix(0.3096579,0,0,0.4883067,27.528443,1.5735759)"
id="path6043"
style="opacity:0.58620689;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />
<path
d="m 236.5,201.1875 a 2.5625,1.0625 0 1 1 -5.125,0 2.5625,1.0625 0 1 1 5.125,0 z"
transform="matrix(0.5478563,0,0,0.4883067,-92.102233,1.115795)"
id="path6045"
style="opacity:0.58620689;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />
<path
d="m 36.672282,76.528654 c -7.152988,4.424107 -18.274031,6.034229 -6.103834,8.972635 -1.449712,-3.2281 3.138581,-2.872021 6.103834,-8.972635 z"
id="path5049"
style="opacity:0.25123153;fill:url(#linearGradient5822-7);fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2.04789329;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />
<path
d="m 8.8342799,171.64721 c 0,0 22.5917801,-2.12795 27.8180201,-8.64645 3.05755,-3.81358 -12.15146,-8.2638 -8.86827,-12 12.35008,-14.0541 22.73076,-13.46729 37.05025,-19.35355 14.31949,-5.88626 9.03544,-8.76906 4.40381,-11.35355 -7.9325,-4.4264 -25.58722,-9.14237 -19.74696,-19.64645 5.87688,-10.569936 57.34315,-25.249996 57.34315,-25.249996 15.59619,-5.32843 13.63909,-14.96447 6,-23 l -46,-45.7499997 c 0,0 2.28296,43.3886497 -7,61.9999997 -11.4715,22.99914 -72.54408,48.661766 -47,51.499996 9,1 13.32065,4.0705 17,11 7.57631,14.26883 -21.0000001,40.5 -21.0000001,40.5 z"
transform="matrix(0.48830674,0,0,0.48830674,57.750397,32.997477)"
id="path10207"
style="opacity:0.36315792;color:#000000;fill:url(#linearGradient1539);fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2;marker:none;visibility:visible;display:inline;overflow:visible;filter:url(#filter10997-7-2);enable-background:accumulate" />
</g>
</svg>
Raw
reveal-svg-fragment.js
/*
Copyright (C) 2014 Nicholas Bollweg
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.
*/
;Reveal.SvgFragment = (function(Reveal){
"use strict";
var window = this,
document = window.document,
proto = window.location.protocol,
local = proto === "file:",
d3 = window.d3,
defaults = {
d3: (local ? "http:" : proto) + "//cdn.jsdelivr.net/d3js/latest/d3.min.js",
selector: "title"
};
// the main function, to be called when d3 is available
function api(){
d3 = d3 || window.d3;
var container = d3.selectAll("[data-svg-fragment]"),
slides = d3.select(".slides");
container.data(function(){
return container[0].map(function(d){
var $ = d3.select(d);
return {
container: $,
url: $.attr("data-svg-fragment")
};
});
});
container.append("iframe")
.attr({
src: function(item){ return item.url; },
// TODO: make this an option?
scrolling: "no"
})
.on("load", api.iframed);
Reveal.addEventListener("fragmentshown", api.listen(container, true));
Reveal.addEventListener("fragmenthidden", api.listen(container));
return api;
};
// generate listeners for reveal events
api.listen = function(container, show){
return function(event){
var fragment = d3.select(event.fragment);
container.filter(function(){
return this === event.fragment.parentNode;
}).each(function(item){
api.toggle(fragment, item, show);
});
return api;
};
};
// toggle a fragment
// TODO: add hide
api.toggle = function(fragment, item, show){
if(!item.svg){ return; }
var selector = fragment.attr(api.cfg("selector"));
item.svg.selectAll(selector)
.transition()
.style({opacity: show ? 1 : 0});
return api;
};
// the iframe was created for this item
api.iframed = function(item){
item.iframe = d3.select(this);
item.idoc = d3.select(this.contentDocument);
item.svg = item.idoc.select("svg");
item.dims = {
width: item.svg.attr("width") || 100,
height: item.svg.attr("height") || 100
};
item.iframe.attr(item.dims);
// see https://groups.google.com/forum/#!topic/d3-js/mTBxTLi0q1o
item.svg.attr({
width: "100%",
height: "100%",
viewBox: "0 0 "+ item.dims.width + " " + item.dims.height
});
return api.clean(item);
};
// prepare
// TODO: smarter initialization?
api.clean = function(item){
var base;
item.container.selectAll(".fragment").each(function(){
item.svg.selectAll(d3.select(this).attr(api.cfg("selector")))
.style({opacity: 0});
});
if(base = item.url.match(/(?:#)(.*)$/)){
item.svg.selectAll(base[1])
.style({opacity: 1});
}
return api;
};
// preflight, call immediately it d3 is available, otherwise load the script
api.init = function(){
var options = Reveal.getConfig().svgFragment || {};
if(window.d3){
api();
}else if(window.require){
require([api.cfg("d3")], function(_d3){
d3 = _d3;
api();
});
}else{
api.load(api.cfg("d3"), api);
}
return api;
};
// get configuration values (or defaults)
api.cfg = function(opt){
var cfg = Reveal.getConfig().svgFragment || {};
return cfg.hasOwnProperty(opt) ? cfg[opt] :
defaults.hasOwnProperty(opt) ? defaults[opt] :
function(){ throw new Error("Unknown property: "+ opt); };
};
// load a script, jacked from search, i think
api.load = function(url, callback){
var head = document.querySelector('head'),
script = document.createElement('script');
// Wrapper for callback to make sure it only fires once
var finish = function(){
if(typeof callback === 'function') {
callback.call();
callback = null;
}
};
// IE
script.onreadystatechange = function() {
if (this.readyState === 'loaded') {
finish();
}
};
script.type = 'text/javascript';
script.src = url;
script.onload = finish;
// Normal browsers
head.appendChild(script);
return api;
};
return api.init();
}).call(this, Reveal);
Display the source blob
Display the rendered blob
Raw
test.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment