Develop Reference

svg animation not animating smoothly

Here I give code of html which not work properly, how can I get it to move smoothly?
I am happy to use jQuery if necessary.
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="1362px" height="219px" viewBox="0 0 1362 219" enable-background="new 0 0 1362 219" xml:space="preserve" class="header-svg-nav">
<g id="Shape_1">
<g>
<path fill="#454545" d="M1361.7-0.1L124.1,0.1L4,161.7c0,0-27.6,61.2,61,57.2s1297-110.5,1297-110.5L1361.7-0.1 z" class="header-svg-nav">
<animate attributeName="d" attributeType="XML" repeatCount="indefinite"
values="M1361.7-0.1L124.1,0.1L4,161.7c0,0-27.6,61.2,61,57.2s1297-110.5,1297-110.5L1361.7-0.1 z;
M1361.7-0.1 L124.1,0.1 L4,161.7 c0,0-9.6,21.3,0.7,37.9 c9.5,15.4,31.4,19.7,60.3,19.3
c70.7-1,109.2-28.3,161-41.9 c87.3-22.9,103,21.9,238,14c64.4-3.8,55.7-13.6,143-25 c129.3-16.8,154.8,4,273-7 c118.6-11,125.3-35,230-45 c107.5-10.2,196.2,5.9,252,20 C1361.9,89.3,1361.8,44.6,1361.7-0.1z;" begin="0s" dur="5s"/>
</path>
</g>
</g>
</svg>

An animation with easing between two path definitions can only work if they match structurally.
They must have the same number of control points and all path commands must be identical.
You cannot exchange absolute (C) commands for relative (c), or shorthand curve commands (S) for full (C).
Optional command letters (for repetitions of the same command) can be used or left out.
Whitespace can have different length or be exchanged for commas.
The reason for that is actually not that hard to understand: To compute an interim state, the renderer needs to formulate a path definition by choosing an appropriate value between the "from" and "to", for every control point. There can be no computed interim if the letters or the number of points differ.
Currently you go from
M1361.7-0.1L124.1,0.1L4,161.7c0,0-27.6,61.2,61,57.2s1297-110.5,1297-110.5L1361.7-0.1 z
to a much longer command
M1361.7-0.1 L124.1,0.1 L4,161.7 c0,0-9.6,21.3,0.7,37.9 c9.5,15.4,31.4,19.7,60.3,19.3 c70.7-1,109.2-28.3,161-41.9 c87.3-22.9,103,21.9,238,14c64.4-3.8,55.7-13.6,143-25 c129.3-16.8,154.8,4,273-7 c118.6-11,125.3-35,230-45 c107.5-10.2,196.2,5.9,252,20 C1361.9,89.3,1361.8,44.6,1361.7-0.1z
That is much too different.
And there is a fair amount of work involved to get them to match. I don't know if Illustrator will be helpfull in that regard. It changes commands for what it deems optimal and if that happens in one command variant and not the other, easing will still not work. The only thing you can rely on is writing down the path commands in a text editor one below the other and comparing number for number, letter for letter.
The version below was worked out with Inkscape, some experience, and a lot of trial and error.
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="1362px" height="219px" viewBox="0 0 1362 219" enable-background="new 0 0 1362 219" xml:space="preserve" class="header-svg-nav">
<g id="Shape_1">
<g>
<path fill="#454545" d="M1361.7-0.1L124.1,0.1L4,161.7c0,0-27.6,61.2,61,57.2s1297-110.5,1297-110.5L1361.7-0.1 z" class="header-svg-nav">
<animate attributeName="d" attributeType="XML" repeatCount="indefinite"
values="M 1361.7,-0.1 124.1,0.1 4,161.7 C 4,161.7 -23.6,222.9 65,218.9 82,218.1 140.1,213.6 222.9,206.8 289.6,201.3 372.4,194.3 462.7,186.6 509.1,182.6 557.4,178.5 606.6,174.3 697.4,166.4 790.9,158.3 879.9,150.6 962.2,143.4 1040.7,136.6 1109.4,130.6 1193.6,123.2 1277.8,115.8 1362,108.4 Z;
M 1361.7,-0.1 124.1,0.1 4,161.7 C 4,161.7 -23.6,222.9 65,218.9 135.7,217.9 174.2,190.6 226,177 313.3,154.1 329,198.9 464,191 528.4,187.2 519.7,177.4 607,166 736.3,149.2 761.8,170 880,159 998.6,148 1005.3,124 1110,114 1217.5,103.8 1306.2,119.9 1362,134 Z;" begin="0s" dur="5s"/>
</path>
</g>
</g>
</svg>

SVG icons in ReactJS

I have to move an SVG icon from a regular website to a ReactJS website. The SVG has to be modified a little to make it compatible with JSX, so I've removed all the ':'s and replaced them with camel case attribute names for JSX compatibility. The only issue is the d attribute.
The SVG now looks like:
<svg id="Logo" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100px" height="100px" viewBox="0 0 900 800" enable-background="new 0 0 1024 1024" xmlSpace="preserve">
<g id="Layer_1"></g>
<g id="Logo">
<g>
<g id="Fish">
<g>
<path style={{fill:"#8DC046"}} d="M430.249,525.415c0,64.563-58.349,136.165-58.349,136.165l0.434,0.435l214.046-136.867L374.238,388.279
l-0.594,0.596C373.644,388.875,430.249,458.241,430.249,525.415z"></path>
</g>
<g>
<path style={{fill="#B8CD43"}} d="M586.381,525.147L374.238,388.279l-0.594,0.596c0,0,56.605,69.366,56.605,136.54L586.381,525.147z"></path>
</g>
<g>
<path style={{fill="#15AADB"}} d="M430.249,253.264c0,64.145-56.444,136.163-56.444,136.163l0.433,0.435l212.143-136.868L372.334,116.125
l-0.595,0.598C371.739,116.723,430.249,188.18,430.249,253.264z"></path>
</g>
<g>
<path style={{fill="#4AC5ED"}} d="M586.381,252.994L372.334,116.125l-0.595,0.598c0,0,58.51,71.457,58.51,136.541L586.381,252.994z"></path>
</g>
<g>
<path style={{fill="#F88F2D"}} d="M596.473,389.394c0,216.894-135.035,388.081-135.035,388.081l0.789,0.795L889.707,388.9L462.227-0.467
l-1.095,1.097C461.132,0.629,596.473,177.202,596.473,389.394z"></path>
</g>
</g>
</g>
</g>
</svg>
This gives me the following error:
Module build failed: SyntaxError: Unexpected token (90:58)
This makes sense, but in the d attributes in my case there are parts like M596.473,389.394c0. As you can imagine, the letter c between the 4 and 0 cause issues as the letter is not an integer.
How can I make this SVG work without using a library or something else? I just want to convert this SVG to valid JSX.

Change style={{fill="#B8CD43"}} to style={{fill: "#B8CD43"}} every place, it will work.
There is no need of dangerouslySetInnerHTML. Here is the working Demo

React does not play nice with SVG yet. If your svg is static I personally find it much easier to do it this way:
var img = `<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 252.5 148.7" xml:space="preserve">
<g>
<polygon points="252.5,0 252.5,52.6"/>
</g>
</svg>`
In string you can put your svg exactly how you read it from file/DB without any extra conversions.
And then later use it in render like this:
<div dangerouslySetInnerHTML={{__html: img}}/>

Getting external SVG file from React component

I am trying to use SVG icons on my React site using an external SVG file with all of my icons.
I am using the <use> tag and calling them from a component. However, I get a console error that the browser cannot get the SVG file (404). It is currently in the same folder as my component jsx file.
I have an external file called svgSprites.svg:
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink" >
<path id="icon-home" class="path1" d="M32 18.451l-16-12.42-16 12.42v-5.064l16-12.42 16 12.42zM28 18v12h-8v-8h-8v8h-8v-12l12-9z" />
<path id="icon-camera" class="path1" d="M9.5 19c0 3.59 2.91 6.5 6.5 6.5s6.5-2.91 6.5-6.5-2.91-6.5-6.5-6.5-6.5 2.91-6.5 6.5zM30 8h-7c-0.5-2-1-4-3-4h-8c-2 0-2.5 2-3 4h-7c-1.1 0-2 0.9-2 2v18c0 1.1 0.9 2 2 2h28c1.1 0 2-0.9 2-2v-18c0-1.1-0.9-2-2-2zM16 27.875c-4.902 0-8.875-3.973-8.875-8.875 0-4.902 3.973-8.875 8.875-8.875 4.902 0 8.875 3.973 8.875 8.875 0 4.902-3.973 8.875-8.875 8.875zM30 14h-4v-2h4v2z" />
</svg>
and in my component:
<svg>
<use xlinkHref="svgSprites.svg#icon-home"></use>
</svg>

Simple SVG Grid not being shown in IE 10 and IE 11

I got this little SVG grid
<svg id="grid-svg" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
<defs>
<pattern id="smallGrid" width="10" height="10" patternUnits="userSpaceOnUse">
<path d="M 10 0 L 0 0 0 10" fill="none" stroke="#000000" stroke-width="0.7" />
</pattern>
<pattern id="grid" width="100" height="100" patternUnits="userSpaceOnUse">
<rect width="100" height="100" fill="url(#smallGrid)" />
</pattern>
</defs>
<rect x="-100%" y="-100%" width="200%" height="200%" fill="url(#grid)" />
</svg>
I got it in a template html. Because I don't want it to remain in the main page for a reason.
Then I just clone that piece of SVG, create a wrapper div, and append the grid-svg to it.
Then I apply the grid dynamically with jQuery.
It works for Chrome and Firefox, but it doesn't work for IE 10 and IE 11.
Do you know why?
Thanks.

I am using the SVG using D3.js and i had the same issue.
I wrote the below code to resolve the issue
$('#lineChartSVG g').remove();
$('#lineChartSVG path').remove();
here i am removing the previous g and path, replacing with the new one.
Keep your tags in the static content and then call the above code where you used your code. This should work

This was solved already, i was doing a jquery clone() to get it from the template, which is wrong. Now it works fine.

JavaScript - Is there a way how to draw SVG path UNDER the content?

I need a path that goes UNDER the content (text) - is there a way how to do that?
(as already been answered somewhere else, z-index doesnt affect svg paths)

You can declare PATH and TEXT in different SVG layers, and put one layer onto another like this
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" style="position:absolute;z-index:1">
<text x="100" y="15" fill="red">I love SVG</text>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" style="position:absolute;z-index:0">
<path d="M150 0 L75 200 L225 200 Z" />
</svg>
http://jsfiddle.net/WJZrU/