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}}/>
I am pretty new at editing and embedding SVG to webpages. My client is a graphic designer so he created an svg logo for his website and wanted me embed it to his nav bar.
I am also using Bootstrap and as part of the development I am using bootstrap tooltips. However, once i embed the svg and edit the co-ordinates via viewbox, I encountered a problem with one of my tooltips.
The tooltip seems to be buggy with this particular logo. The rest of them are okay but for some reason I cannot figure out how to fix this one.
I have uploaded the website today for testing purposes and you can see the issue on http://edizorac.com/
The problematic logo is the second one on the navigation bar and you can also see my code through web inspector.
Any help/recommendation is appreciated!!
Thanks in advance :)
Update:
Sorry for any inconveniences. The svg code is as follows:
<li>
<a href="#projects">
<span>
<svg version="1.2" baseProfile="tiny" x="0px" y="0px" width="70px" height="60px" viewBox="50 40 90 120" data-toggle="tooltip" title="Projects">
<polygon fill="none" stroke="#ffffff" stroke-miterlimit="10" points="33.493,81.046 96.934,46.112 88.647,82.874 57.203,117.371 52.946,86.674 99.573,74.629 81.325,117.276 37.909,101.254"/>
<polyline fill="none" stroke="#ffffff" stroke-miterlimit="10" points="96.451,81.928 114.361,106.172 112.365,112.871 82.791,113.852 "/>
<line fill="none" stroke="#ffffff" stroke-miterlimit="10" x1="95.854" y1="47.473" x2="37.909" y2="101.254"/>
</svg>
</span>
</a>
</li>
May I suggest you have a read over this and also have a look at this to help you with SVG's
Change the first line of your SVG block to:
<svg version="1.2" baseProfile="tiny" x="0px" y="0px" width="40px" height="40px" viewBox="30 47 85 70" data-toggle="tooltip" title="" data-original-title="Projects">
You made the following mistakes:
You had the height and width set incorrectly compared to the other SVG's (Height you had defined: 60px & Width you had defined 70px)
Your viewBox property was set incorrectly so the elements didn't align properly
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.
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/
I want to make a drawing effect of tree that looks something like this one with a progressive line like here. I would prefer using only css3 with svg/canvas and js. Do you have any ideas?
More info:
I tried to cut a tree into pieces and animate piece by piece the appearance but it's not cursive cause it's to much details on syncronizing delays and durations because every piece has a different length and so on. All of this is made without svg. I want to now if i can animate a line path.
Yes, take a look at this rendering of the Bahamas Logo using CSS 3
It describes his process, and techniques. Also you can view the source.
There are more that can be found here
Update:
Also maybe this Sencha Animator product may help?
You can do this with plain SVG. SVG provides the <animate> element for declarative animation.
What you want (as I understand it) is a line that appears as if it was drawn in front of the viewer's eyes. You can use the stroke-dasharray property for this purpose. This property defines a dash pattern using a series of values that defines the length of dashes and gaps. The strategy would be: First we have a dash that has length 0 and a gap that is at least as long as the whole path. This means we see nothing (or only the first point at the start of the path). In the end we want a dash that's at least the full length of the path. We want the dash to gradually become longer and longer until it reaches its final length (the length of the full path).
The simplest case would be:
<svg xmlns="http://www.w3.org/2000/svg" width="400px" height="300px">
<!-- This is the path of a spiral -->
<path d="m 7.1428565,220.9336 c 0,0 13.6660115,54.75386 218.5714335,51.42857 C 430.61971,269.03688 478.47682,99.194335 206.69537,110.78149 -65.086093,122.36866 45.497658,213.22607 210.28635,207.29759 375.07503,201.3691 429.75297,97.468925 207.14285,82.362175 -15.467268,67.255425 64.868608,160.66909 210,153.79075 c 145.13139,-6.87834 137.69998,-93.087405 11.42857,-99.999995 -126.271412,-6.9126 -150.382292,28.03248 -24.28571,35.71428 126.09659,7.6818 72.6601,-44.83727 -5.71429,-84.2857095"
stroke-width="10" stroke-linecap="round" fill="none" stroke="black" stroke-dasharray="0,2305">
<!-- This defines the animation:
The path is roughly 2305 units long, it will be drawn in 5 seconds -->
<animate from="0,2305" to="2305,0" dur="5s"
attributeName="stroke-dasharray" repeatCount="indefinite"/>
</path>
</svg>
More sophisticated things can be done using multiple values (using the values attribute) instead of one from and one to value:
<svg xmlns="http://www.w3.org/2000/svg" width="400px" height="300px">
<path d="m 7.1428565,220.9336 c 0,0 13.6660115,54.75386 218.5714335,51.42857 C 430.61971,269.03688 478.47682,99.194335 206.69537,110.78149 -65.086093,122.36866 45.497658,213.22607 210.28635,207.29759 375.07503,201.3691 429.75297,97.468925 207.14285,82.362175 -15.467268,67.255425 64.868608,160.66909 210,153.79075 c 145.13139,-6.87834 137.69998,-93.087405 11.42857,-99.999995 -126.271412,-6.9126 -150.382292,28.03248 -24.28571,35.71428 126.09659,7.6818 72.6601,-44.83727 -5.71429,-84.2857095"
stroke-width="10" stroke-linecap="round" fill="none" stroke="black" stroke-dasharray="0,2305">
<animate attributeName="stroke-dasharray" dur="5s" repeatCount="indefinite"
values="0,2305;
2000,305;
2305,0"/>
</path>
</svg>
You can specify the precise timing (when which value listed in values will be reached) using the keyTimes attribute:
<svg xmlns="http://www.w3.org/2000/svg" width="400px" height="300px">
<path d="m 7.1428565,220.9336 c 0,0 13.6660115,54.75386 218.5714335,51.42857 C 430.61971,269.03688 478.47682,99.194335 206.69537,110.78149 -65.086093,122.36866 45.497658,213.22607 210.28635,207.29759 375.07503,201.3691 429.75297,97.468925 207.14285,82.362175 -15.467268,67.255425 64.868608,160.66909 210,153.79075 c 145.13139,-6.87834 137.69998,-93.087405 11.42857,-99.999995 -126.271412,-6.9126 -150.382292,28.03248 -24.28571,35.71428 126.09659,7.6818 72.6601,-44.83727 -5.71429,-84.2857095"
stroke-width="10" stroke-linecap="round" fill="none" stroke="black" stroke-dasharray="0,2305">
<animate attributeName="stroke-dasharray" dur="5s" repeatCount="indefinite"
values="0,2305;
2000,305;
2305,0"
keyTimes="0;.9;1"/>
</path>
</svg>
See this in action on Tinkerbin.
Something similar can be done using CSS3:
<svg xmlns="http://www.w3.org/2000/svg" width="400px" height="300px">
<style type="text/css">
path {
animation-name:animateDash;
animation-duration:5s;
animation-iteration-count:infinite;
}
#keyframes animateDash {
from{stroke-dasharray:0,2305}
to {stroke-dasharray:2305,0}
}
</style>
<path d="m 7.1428565,220.9336 c 0,0 13.6660115,54.75386 218.5714335,51.42857 C 430.61971,269.03688 478.47682,99.194335 206.69537,110.78149 -65.086093,122.36866 45.497658,213.22607 210.28635,207.29759 375.07503,201.3691 429.75297,97.468925 207.14285,82.362175 -15.467268,67.255425 64.868608,160.66909 210,153.79075 c 145.13139,-6.87834 137.69998,-93.087405 11.42857,-99.999995 -126.271412,-6.9126 -150.382292,28.03248 -24.28571,35.71428 126.09659,7.6818 72.6601,-44.83727 -5.71429,-84.2857095"
stroke-width="10" stroke-linecap="round" fill="none" stroke="black" stroke-dasharray="0,2305"/>
</svg>
Decide for yourself which method you prefer.