<!DOCTYPE html>
<html>
<head>
<meta http-equiv="x-ua-compatible" content="ie=edge">
<script data-require="angular.js@1.6.0" data-semver="1.6.0" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular.js"></script>
<script data-require="jquery@3.0.0" data-semver="3.0.0" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
<script src="svg4everybody.js"></script>
<script>svg4everybody(); // run it now or whenever you are ready</script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-app="icons">
<p>Consult the README.md for full documentation.</p>
<p>Examples of icons taking both color and size from the surrounding text
automatically:</p>
<h1>Test <svg-icon symbol="categories"></svg-icon></h1>
<h2>Test 2 <svg-icon symbol="categories"></svg-icon></h2>
<h3>Test 3 <svg-icon symbol="categories"></svg-icon></h3>
<p>An example where the whole path to the SVG icons file and symbol are specified:</p>
<p>
<svg-icon path="icons.svg#arrow"></svg-icon>
</p>
<p>Examples of using CSS classes to style width, height, and color for icons:</p>
<p>
<svg-icon class="icon-small" symbol="edit"></svg-icon>
<svg-icon class="icon-medium" symbol="edit"></svg-icon>
<svg-icon class="icon-large" symbol="edit"></svg-icon>
<svg-icon class="icon-xlarge" symbol="edit"></svg-icon>
</p>
<p>
<svg-icon class="icon-small" symbol="options"></svg-icon>
<svg-icon class="icon-medium" symbol="options"></svg-icon>
<svg-icon class="icon-large" symbol="options"></svg-icon>
<svg-icon class="icon-xlarge" symbol="options"></svg-icon>
</p>
<p>
<svg-icon class="icon-small" symbol="rebate"></svg-icon>
<svg-icon class="icon-medium" symbol="rebate"></svg-icon>
<svg-icon class="icon-large" symbol="rebate"></svg-icon>
<svg-icon class="icon-xlarge" symbol="rebate"></svg-icon>
</p>
</body>
</html>
angular.module('icons', []).component('svgIcon', {
bindings: {
symbol: '@',
path: '@'
},
controller: function ($element) {
// Dig down to find the SVG element contained within this
// component.
var element = $($element).find('svg');
// Get the size of text at this point.
var fontSize = element.css('font-size');
// Get the CSS styling for the SVG element inside the component.
var height = element.css('height');
var width = element.css('width');
var fill = element.css('fill');
this.href = function () {
if (this.symbol) {
return 'icons.svg#' + this.symbol;
} else if (this.path) {
return this.path;
}
}
this.styles = function () {
var retVal = { };
// If it looks like we've got the default fill color of black,
// use the current text color.
if (fill === 'rgb(0, 0, 0)') {
retVal.fill = 'currentcolor';
}
// If it looks like we've got the default size for SVG elements,
// use the size of the current text as both height and width.
if (height === '150px' && width === '300px') {
retVal.height = fontSize;
retVal.width = fontSize;
}
return retVal;
}
},
template: '<svg ng-style="$ctrl.styles()"><use href="{{ $ctrl.href() }}"/></svg>'
});
h1 {
font-size: 78px;
color: pink;
}
h2 {
color: green;
}
.icon-small svg {
width: 20px;
height: 20px;
fill: red;
}
.icon-medium svg {
height: 40px;
width: 40px;
fill: green;
}
.icon-large svg {
height: 80px;
width: 80px;
fill: blue;
}
.icon-xlarge svg {
height: 160px;
width: 160px;
fill: black;
fill-opacity: 0.3;
}
A simple AngularJS component which may be called one of two ways:
1. Either with just a symbol name, in which case the file icons.svg is assumed:
```
<svg-icon symbol="categories"></svg-icon>
```
2. Or with a full path specified:
```
<svg-icon path="icons.svg#categories"></svg-icon>
```
## SVG File Organization
In both cases you must specify a particular symbol within the SVG file which you
want to display and the SVG file must have one or more symbols within it. For
example, this SVG file has one symbol in it with an id of "edit" and that is how you
would refer to it.:
```
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<symbol id="edit" viewBox="0 0 200 200">
<!-- Generator: Sketch 41.2 (35397) - http://www.bohemiancoding.com/sketch -->
<title>Icon Edit</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Symbols" stroke="none" stroke-width="1" fill-rule="evenodd">
<g id="Icon-Edit">
<polyline id="Rectangle-3" points="140.679292 36.1656813 165.32171 60.8566361 87.6153387 138.716061 51.9822184 149.728411 62.9729208 114.025106"></polyline>
<path d="M99.8725,52.0002 L16.8105,52.0002 C7.5265,52.0002 -0.000499999995,59.5262 -0.000499999995,68.8112 L-0.000499999995,183.6702 C-0.000499999995,192.9542 7.5265,200.4802 16.8105,200.4802 L131.6705,200.4802 C140.9545,200.4802 148.4805,192.9542 148.4805,183.6702 L148.4805,100.3162 L126.2085,123.3802 L126.2085,161.3972 C126.2085,170.6832 118.6825,178.2092 109.3985,178.2092 L39.0825,178.2092 C29.7985,178.2092 22.2715,170.6832 22.2715,161.3972 L22.2715,91.0832 C22.2715,81.7982 29.7985,74.2712 39.0825,74.2712 L78.3645,74.2712 L99.8725,52.0002 Z" id="Fill-1"></path>
<polyline id="Rectangle-3-Copy" points="175.820814 1.24739809 200.463232 25.9383529 180.4689 45.972067 155.826482 21.2811122"></polyline>
</g>
</g>
</symbol>
</svg>
```
## CSS Styling
If you want to style the component you can use classes as normal to
set the style, fill, and even opacity of the icon it inserts. For example:
```
.icon-xlarge svg {
height: 160px;
width: 160px;
fill: black;
fill-opacity: 0.3;
}
```
For a component instance like this:
```
<svg-icon class="icon-xlarge" symbol="rebate"></svg-icon>
```
Note: You have to include "svg" as part of the selector so it specifically
applies your styling to the SVG inside of the component. Setting the width and
height of the component itself will not work.
## Default Styling
The component looks to see if a fill color has been set for the SVG element
inside it. If not, it sets the color of the surrounding text as the fill color
for the SVG.
Note: This will _not_ take effect unless you have removed any
fill="none" from the SVG you embed inside the symbol and any other fill color
which is set for the primary drawing color within it. If you don't do that then
the SVG will continue to use its original colors at all times.
Likewise it looks to see if the width and height of the SVG are something other
than the default 300 x 150 which browsers set for every SVG element. If they
are, then the component does nothing to override that. If no size is set though,
the component looks at the size of the surrounding text and automatically sets
the height and width of the icon to match that. Thus you can easily embed icons
in a <p> or <h1> and it will morph to match the color and size of the
surrounding text with no additional styling.
## Problems
As much as I would like this to be perfect, it's far from it:
1. You cannot have multiple colors within a symbol and set them all from CSS.
One color, that's it...
1. I haven't come up with some clever way to set the path to the default SVG
icons file.
1. For IE11 you have to use the https://jonathantneal.github.io/svg4everybody/
polyfill because it does not support SVG <use> elements. But seriously, please
stop enabling IE11 users. Just don't support that browser anymore.
1. If, for some bizarre reason you happened to want your icon to be exactly
300 x 150 then the component would not believe you and would override your
wishes with the text size. I think you could probably force it with !important
in that unlikely case though.
1. I'm not in love with having to specify ".classname svg" on all the CSS but
I haven't come up with a better solution.
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<symbol id="edit" viewBox="0 0 200 200">
<!-- Generator: Sketch 41.2 (35397) - http://www.bohemiancoding.com/sketch -->
<title>Icon Edit</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Symbols" stroke="none" stroke-width="1" fill-rule="evenodd">
<g id="Icon-Edit">
<polyline id="Rectangle-3" points="140.679292 36.1656813 165.32171 60.8566361 87.6153387 138.716061 51.9822184 149.728411 62.9729208 114.025106"></polyline>
<path d="M99.8725,52.0002 L16.8105,52.0002 C7.5265,52.0002 -0.000499999995,59.5262 -0.000499999995,68.8112 L-0.000499999995,183.6702 C-0.000499999995,192.9542 7.5265,200.4802 16.8105,200.4802 L131.6705,200.4802 C140.9545,200.4802 148.4805,192.9542 148.4805,183.6702 L148.4805,100.3162 L126.2085,123.3802 L126.2085,161.3972 C126.2085,170.6832 118.6825,178.2092 109.3985,178.2092 L39.0825,178.2092 C29.7985,178.2092 22.2715,170.6832 22.2715,161.3972 L22.2715,91.0832 C22.2715,81.7982 29.7985,74.2712 39.0825,74.2712 L78.3645,74.2712 L99.8725,52.0002 Z" id="Fill-1"></path>
<polyline id="Rectangle-3-Copy" points="175.820814 1.24739809 200.463232 25.9383529 180.4689 45.972067 155.826482 21.2811122"></polyline>
</g>
</g>
</symbol>
<symbol id="options" viewBox="0 0 100 100">
<!-- Generator: Sketch 41 (35326) - http://www.bohemiancoding.com/sketch -->
<title>Icon-Options</title>
<desc>Created with Sketch.</desc>
<defs>
<polygon id="path-1" points="99.4472376 0.477272727 0 0.477272727 0 35.3294318 99.4472376 35.3294318 99.4472376 0.477272727"></polygon>
<polygon id="path-3" points="0 0.213636364 0 35.0659091 99.4473481 35.0659091 99.4473481 0.213636364 1.49751681e-20 0.213636364"></polygon>
<polygon id="path-5" points="0.000276243094 35.2272727 99.4475138 35.2272727 99.4475138 0.375113636 0.000276243094 0.375113636"></polygon>
</defs>
<g id="Symbols" stroke="none" stroke-width="1" fill-rule="evenodd">
<g id="Icon-Options">
<g id="Page-1">
<g id="Group-3" transform="translate(0.000000, 0.090909)">
<mask id="mask-2" fill="white">
<use xlink:href="#path-1"></use>
</mask>
<g id="Clip-2"></g>
<path d="M28.3527624,28.88625 C22.4643646,28.88625 17.6732044,23.9589773 17.6732044,17.9032955 C17.6732044,11.8476136 22.4643646,6.92034091 28.3527624,6.92034091 C34.2411602,6.92034091 39.0323204,11.8476136 39.0323204,17.9032955 C39.0323204,23.9589773 34.2411602,28.88625 28.3527624,28.88625 L28.3527624,28.88625 Z M44.7831492,13.6413636 C42.9290055,6.08681818 36.2665746,0.477159091 28.3527624,0.477159091 C20.4389503,0.477159091 13.7765193,6.08681818 11.9223757,13.6413636 L2.7621547,13.6413636 C1.23674033,13.6413636 -0.000276243094,14.9135227 -0.000276243094,16.4822727 L-0.000276243094,19.3231818 C-0.000276243094,20.8925 1.23674033,22.1640909 2.7621547,22.1640909 L11.9223757,22.1640909 C13.7759669,29.7197727 20.4389503,35.3294318 28.3527624,35.3294318 C36.2665746,35.3294318 42.929558,29.7197727 44.7831492,22.1640909 L96.6848066,22.1640909 C98.2107735,22.1640909 99.4472376,20.8925 99.4472376,19.3231818 L99.4472376,16.4822727 C99.4472376,14.9135227 98.2107735,13.6413636 96.6848066,13.6413636 L44.7831492,13.6413636 Z" id="Fill-1" mask="url(#mask-2)"></path>
</g>
<g id="Group-6" transform="translate(0.000000, 32.477273)">
<mask id="mask-4" fill="white">
<use xlink:href="#path-3"></use>
</mask>
<g id="Clip-5"></g>
<path d="M71.1909945,28.6227273 C65.3025967,28.6227273 60.5114365,23.6954545 60.5114365,17.6397727 C60.5114365,11.5840909 65.3025967,6.65681818 71.1909945,6.65681818 C77.0793923,6.65681818 81.8705525,11.5840909 81.8705525,17.6397727 C81.8705525,23.6954545 77.0793923,28.6227273 71.1909945,28.6227273 M71.1909945,0.213636364 C63.0014917,0.213636364 56.1512155,6.21988636 54.5838122,14.1738636 L2.76226519,14.1738636 C1.23685083,14.1738636 -0.000165745856,15.4454545 -0.000165745856,17.0147727 L-0.000165745856,19.8556818 C-0.000165745856,21.4244318 1.23685083,22.6965909 2.76226519,22.6965909 L54.9760773,22.6965909 C57.0887845,29.8465909 63.5572928,35.0659091 71.1909945,35.0659091 C78.8246961,35.0659091 85.2932044,29.8465909 87.4059116,22.6965909 L96.6849171,22.6965909 C98.210884,22.6965909 99.4473481,21.4244318 99.4473481,19.8556818 L99.4473481,17.0147727 C99.4473481,15.4454545 98.210884,14.1738636 96.6849171,14.1738636 L87.7981768,14.1738636 C86.2307735,6.21988636 79.3804972,0.213636364 71.1909945,0.213636364" id="Fill-4" mask="url(#mask-4)"></path>
</g>
<g id="Group-9" transform="translate(0.000000, 64.295455)">
<mask id="mask-6" fill="white">
<use xlink:href="#path-5"></use>
</mask>
<g id="Clip-8"></g>
<path d="M36.7792818,28.7842045 C30.890884,28.7842045 26.0997238,23.8569318 26.0997238,17.80125 C26.0997238,11.7455682 30.890884,6.81829545 36.7792818,6.81829545 C42.6676796,6.81829545 47.4588398,11.7455682 47.4588398,17.80125 C47.4588398,23.8569318 42.6676796,28.7842045 36.7792818,28.7842045 M36.7792818,0.375113636 C28.6417127,0.375113636 21.8279006,6.30579545 20.2041436,14.1847727 L2.76270718,14.1847727 C1.23674033,14.1847727 0.000276243094,15.4563636 0.000276243094,17.0256818 L0.000276243094,19.8665909 C0.000276243094,21.4353409 1.23674033,22.7075 2.76270718,22.7075 L20.5229282,22.7075 C22.588674,29.9342045 29.0925414,35.2273864 36.7792818,35.2273864 C44.4660221,35.2273864 50.9698895,29.9342045 53.0356354,22.7075 L96.6853591,22.7075 C98.2107735,22.7075 99.4477901,21.4353409 99.4477901,19.8665909 L99.4477901,17.0256818 C99.4477901,15.4563636 98.2107735,14.1847727 96.6853591,14.1847727 L53.3544199,14.1847727 C51.730663,6.30579545 44.9168508,0.375113636 36.7792818,0.375113636" id="Fill-7" mask="url(#mask-6)"></path>
</g>
</g>
</g>
</g>
</symbol>
<symbol id="rebate" viewBox="0 0 200 200">
<!-- Generator: Sketch 41.2 (35397) - http://www.bohemiancoding.com/sketch -->
<title>Icon Rebate</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Symbols" stroke="none" stroke-width="1" fill-rule="evenodd">
<g id="Icon-Rebate">
<path d="M0,73.7409829 L16.0314657,62.5953079 L16.0314657,14 L182.513269,14 L182.513269,62.1915119 L200,73.7409829 L200,200.443359 L0,200.443359 L0,73.7409829 Z M25.3914061,23.6719371 L173.662391,23.6719371 L173.662391,89.4411097 L99.5268985,131.030439 L25.3914061,89.4411097 L25.3914061,23.6719371 Z M8.79383505,189.744499 L99.3878945,141.621211 L189.981954,190.706291 L8.79383505,189.744499 Z M16.5791099,83.8559194 L8.84156022,78.8899055 L16.5791099,73.9238917 L16.5791099,83.8559194 Z M182.474687,73.9238917 L190.212237,78.8899055 L182.474687,83.8559194 L182.474687,73.9238917 Z M8.91089109,94.4995328 L83.1683168,136.673521 L8.91089109,178.00403 L8.91089109,94.4995328 Z M190.09901,178.67749 L115.841584,136.124542 L190.09901,93.5178312 L190.09901,178.67749 Z" id="Combined-Shape"></path>
<path d="M85.8762376,98.6689124 L83,96.7526309 L86.8663366,91.0489444 L89.7425743,92.965226 C89.8049505,93.0074392 96.8039604,96.5808331 102.991089,95.3890473 C108.00099,94.425998 111.076238,88.6997325 111.076238,85.0183514 C111.076238,81.0866364 104.978218,77.6408637 99.2831683,74.0831771 C92.329703,69.7391474 85.5514851,65.1546008 85.3336634,60.4758109 C84.9237624,51.6326427 88.6366337,45.7286892 96.7584158,43.4285623 C97.3870969,43.2502745 98.8415842,43.0213337 98.8415842,43.0213337 L98.8415842,34 L104.782178,34 L104.782178,42.9722651 C104.782178,42.9722651 105.829316,43.0406067 106.083279,43.0817804 C111.340276,43.9340691 114.339986,46.7136948 114.576238,46.8821886 L117.39604,48.8789697 L113.367327,54.4707421 L110.557426,52.4798512 C110.431683,52.3934615 104.816832,48.5716971 99.6524752,50.0354142 C94.5435644,51.4834241 92.4940594,53.6736004 93.4782178,59.363543 C94.1881188,63.4690192 100.569307,66.1461195 103.967327,68.2685584 C111.476238,72.9591287 118.006931,77.2943231 118.006931,85.0183514 C118.006931,91.857671 112.745617,100.181842 104.851698,102.020194 C104.672446,102.061938 104.782178,110.572726 104.782178,110.572726 L98.8415842,110.572726 L98.8415842,102.020194 C98.8415842,102.020194 86.1597986,98.8577485 85.8762376,98.6689124 Z" id="Fill-1"></path>
</g>
</g>
</symbol>
<symbol id="arrow" viewBox="0 0 40 100">
<!-- Generator: Sketch 41.2 (35397) - http://www.bohemiancoding.com/sketch -->
<title>Icon-Arrow</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Symbols" stroke="none" stroke-width="1" fill-rule="evenodd">
<g id="Icon-Arrow">
<path d="M1.09435053,5.67800415 C0.489957423,4.75126805 0.796318054,3.60184097 1.79535615,3.10232192 L6.20464385,0.897678077 C7.19619167,0.401904165 8.48349442,0.755460036 9.0830335,1.69223985 L38.9169665,48.3077602 C39.5151094,49.2423584 39.5165056,50.75546 38.9169665,51.6922398 L9.0830335,98.3077602 C8.48489062,99.2423584 7.2772423,99.4837445 6.37646484,98.840332 L2.62353516,96.159668 C1.72688145,95.519201 1.48514996,94.2471811 2.08390669,93.3180758 L28.9160933,51.6819242 C29.5147184,50.7530231 29.5104904,49.2494186 28.9056495,48.3219958 L1.09435053,5.67800415 Z" id="Rectangle-21"></path>
</g>
</g>
</symbol>
<symbol id="categories" viewBox="0 0 100 94">
<!-- Generator: Sketch 41 (35326) - http://www.bohemiancoding.com/sketch -->
<title>Icon-Categories</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Symbols" stroke="none" stroke-width="1" fill-rule="evenodd">
<g id="Icon-Categories">
<g id="Group-18">
<rect id="Rectangle-28-Copy" x="0" y="34.7391304" width="81.6326531" height="59.2608696"></rect>
<path d="M84.6938776,74.5869565 L91.8367347,74.5869565 L91.8367347,16.3478261 L14.2857143,16.3478261 L14.2857143,29.6304348 L84.6938776,29.6304348 L84.6938776,74.5869565 Z" id="Combined-Shape-Copy-4"></path>
<path d="M93.877551,56.1956522 L100,56.1956522 L100,0 L25.5102041,0 L25.5102041,11.2391304 L93.877551,11.2391304 L93.877551,56.1956522 Z" id="Combined-Shape-Copy-5"></path>
</g>
</g>
</g>
</symbol>
</svg>
!function(root, factory) {
"function" == typeof define && define.amd ? // AMD. Register as an anonymous module unless amdModuleId is set
define([], function() {
return root.svg4everybody = factory();
}) : "object" == typeof module && module.exports ? // Node. Does not work with strict CommonJS, but
// only CommonJS-like environments that support module.exports,
// like Node.
module.exports = factory() : root.svg4everybody = factory();
}(this, function() {
/*! svg4everybody v2.1.4 | github.com/jonathantneal/svg4everybody */
function embed(parent, svg, target) {
// if the target exists
if (target) {
// create a document fragment to hold the contents of the target
var fragment = document.createDocumentFragment(), viewBox = !svg.hasAttribute("viewBox") && target.getAttribute("viewBox");
// conditionally set the viewBox on the svg
viewBox && svg.setAttribute("viewBox", viewBox);
// copy the contents of the clone into the fragment
for (// clone the target
var clone = target.cloneNode(!0); clone.childNodes.length; ) {
fragment.appendChild(clone.firstChild);
}
// append the fragment into the svg
parent.appendChild(fragment);
}
}
function loadreadystatechange(xhr) {
// listen to changes in the request
xhr.onreadystatechange = function() {
// if the request is ready
if (4 === xhr.readyState) {
// get the cached html document
var cachedDocument = xhr._cachedDocument;
// ensure the cached html document based on the xhr response
cachedDocument || (cachedDocument = xhr._cachedDocument = document.implementation.createHTMLDocument(""),
cachedDocument.body.innerHTML = xhr.responseText, xhr._cachedTarget = {}), // clear the xhr embeds list and embed each item
xhr._embeds.splice(0).map(function(item) {
// get the cached target
var target = xhr._cachedTarget[item.id];
// ensure the cached target
target || (target = xhr._cachedTarget[item.id] = cachedDocument.getElementById(item.id)),
// embed the target into the svg
embed(item.parent, item.svg, target);
});
}
}, // test the ready state change immediately
xhr.onreadystatechange();
}
function svg4everybody(rawopts) {
function oninterval() {
// while the index exists in the live <use> collection
for (// get the cached <use> index
var index = 0; index < uses.length; ) {
// get the current <use>
var use = uses[index], parent = use.parentNode, svg = getSVGAncestor(parent);
if (svg) {
var src = use.getAttribute("xlink:href") || use.getAttribute("href");
if (polyfill && (!opts.validate || opts.validate(src, svg, use))) {
// remove the <use> element
parent.removeChild(use);
// parse the src and get the url and id
var srcSplit = src.split("#"), url = srcSplit.shift(), id = srcSplit.join("#");
// if the link is external
if (url.length) {
// get the cached xhr request
var xhr = requests[url];
// ensure the xhr request exists
xhr || (xhr = requests[url] = new XMLHttpRequest(), xhr.open("GET", url), xhr.send(),
xhr._embeds = []), // add the svg and id as an item to the xhr embeds list
xhr._embeds.push({
parent: parent,
svg: svg,
id: id
}), // prepare the xhr ready state change event
loadreadystatechange(xhr);
} else {
// embed the local id into the svg
embed(parent, document.getElementById(id));
}
}
} else {
// increase the index when the previous value was not "valid"
++index;
}
}
// continue the interval
requestAnimationFrame(oninterval, 67);
}
var polyfill, opts = Object(rawopts), newerIEUA = /\bTrident\/[567]\b|\bMSIE (?:9|10)\.0\b/, webkitUA = /\bAppleWebKit\/(\d+)\b/, olderEdgeUA = /\bEdge\/12\.(\d+)\b/;
polyfill = "polyfill" in opts ? opts.polyfill : newerIEUA.test(navigator.userAgent) || (navigator.userAgent.match(olderEdgeUA) || [])[1] < 10547 || (navigator.userAgent.match(webkitUA) || [])[1] < 537;
// create xhr requests object
var requests = {}, requestAnimationFrame = window.requestAnimationFrame || setTimeout, uses = document.getElementsByTagName("use");
// conditionally start the interval if the polyfill is active
polyfill && oninterval();
}
function getSVGAncestor(node) {
for (var svg = node; "svg" !== svg.nodeName.toLowerCase() && (svg = svg.parentNode); ) {}
return svg;
}
return svg4everybody;
});