I have a SVG file (an exported Gliffy diagram) that I want to open and edit in Inkscape. When viewing the code of the file using the developer options of Chrome, it looks like:
<svg xmlns="...>
<g transform="...>
<image xlink:href="data:image/svg+xml,%0A%20...></image>
</g>
... (about 20 more <g>...</g> tags)
</svg>
When decoding the part starting with %0A%20..., it translates to something like
data:image/svg xml,
<svg xmlns="http://www.w3.org/2000/svg" height="50000" width="50000">
<style>
.gliffy-rte-text {
...
The issue is, that in Inkscape those parts will be replaced by a placeholder telling me "Linked image not found" and as speculated here, Inkscape most likely is not able to read the CSS styling correctly or probably at all.
I would very much appreciate any thoughts or ideas on how to convert the file such that it can be edited and displayed correctly in Inkscape.
You might convert all styling to element attributes using SVGOMG:
replace your embedded <image> element by the decoded data url content. Your parent svg should look something like this:
<!-- parent svg -->
<svg xmlns="http://www.w3.org/2000/svg" >
<!-- embedded svg decoded data url -->
<svg xmlns="http://www.w3.org/2000/svg" height="50000" width="50000">
<style>
.gliffy-rte-text {
}
</style>
</svg>
</svg>
Use SVGOMG "inline styles" and "style to attribute"parameter:
You should disable all other optimizing parameter, since they might strip to many other attributes.
Expected before result
<svg viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg">
<style>
circle{
fill:none;
stroke: orange;
stroke-width:10;
}
</style>
<circle cx="128" cy="128" r="100"/>
</svg>
After
<svg viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg">
<circle cx="128" cy="128" r="100" fill="none" stroke="orange" stroke-width="10"/>
</svg>
Open the wrapper file in a browser. Right-click on the area containing the embedded SVG, and choose "Save (image) as...". If the wrapper contains multiple <image> tags, you will have to save them to separate files, but at least they will be in a form Inkscape can handle.
If you want to get them all together in one SVG file again, you will have to re-import them via the Inkscape import function. Take care to select 'Include as editable object', or you will end up right where you started:
The speculations above about CSS are unsubstantiated, btw. Inkscape will convert the content of a <style> element into inline style attributes, but otherwise handle them correctly. What happened is stated quite clearly in the above screenshot: data URLs embeded via an <image> tag will not be editable in Inkscape.
I am working on an app that uses Polymer. I need to include the IcoMoon Free Fonts into my app. For some reason, I can't get the icons into my app. Here is what I've tried:
Selected all of the icons at the link above.
Clicked the "Generate SVG, PNG, PDF" button in the lower left.
Clicked the "Download" button in the lower left.
Extracted the .zip file contents into a directory.
Opened the symbol-defs.svg file in a text editor.
Copied the defs element and all of its contents.
Created a file called "icomoon.html"
Put the following code in icomoon.html, based on this:
icomoon.html
<iron-iconset-svg name="icomoon" size="100">
<svg>
<!-- Code copied in step 6 placed here -->
</svg>
</iron-iconset-svg>
In my element, I add <link rel="import" href="[path]/icomoon.html">
I then attempt to use an icon by saying <iron-icon icon="icomoon:icon-home"></iron-icon>.
The icon doesn't appear. I don't understand why.
Update
icomoon.html
<link rel="import" href="../bower/iron-icon/iron-icon.html">
<link rel="import" href="../bower/iron-iconset-svg/iron-iconset-svg.html">
<iron-iconset-svg name="icomoon" size="50">
<svg>
<defs>
<path id="home" d="M1024 590.446l-512-397.428-512 397.428v-162.038l512-397.426 512 397.428zM896 576v384h-768v-384l384-288z"></path>
</defs>
</svg>
</iron-iconset-svg>
Just had a look at the icomoon icons.
I couldn't get the home icon to show up but
I found this works:
<g id="icon-spades" viewBox="0 0 38 38">
<path d="M25.549 10.88c-6.049-4.496-8.133-8.094-9.549-10.88v0c-0 0-0-0-0-0v0c-1.415 2.785-3.5 6.384-9.549 10.88-10.314 7.665-0.606 18.365 7.93 12.476-0.556 3.654-2.454 6.318-4.381 7.465v1.179h12.001v-1.179c-1.928-1.147-3.825-3.811-4.382-7.465 8.535 5.889 18.244-4.811 7.93-12.476z"/>
</g>
Its doesn't show up without the viewbox
Here is an example for a FontAwesome iconset.
I use an SVG element to display characters from an icon font. Therefore there might be some differences to your use case. The element structure is from Dart so don't wonder if it looks weird.
I had to add
<bwu-fontawesome-iconset-svg></bwu-fontawesome-iconset-svg>
to make the icons available. examle code
i had to import some custom svg to my iconset
I did it like that :
<iron-iconset-svg name="custom" size="50">
<svg><defs>
<g id="temp"><path d="M31.666,39.707c0,3.675-2.99,6.664-6.667,6.664c-3.675,0-6.665-2.989-6.665-6.664c0-2.484,1.371-4.748,3.58-5.904
l0.907-0.477V5.807c0-1.201,0.978-2.178,2.178-2.178s2.179,0.977,2.179,2.178v27.52l0.907,0.476
C30.293,34.958,31.666,37.223,31.666,39.707z M24.999,1.936c-2.138,0-3.871,1.733-3.871,3.871v26.495
c-2.666,1.396-4.487,4.188-4.487,7.405c0,4.616,3.742,8.357,8.358,8.357c4.617,0,8.36-3.741,8.36-8.357
c0-3.221-1.822-6.009-4.489-7.405V5.807C28.87,3.669,27.137,1.936,24.999,1.936 M24.999,0c3.202,0,5.808,2.604,5.808,5.807v25.402
c2.795,1.906,4.488,5.063,4.488,8.498C35.295,45.382,30.676,50,24.999,50c-5.676,0-10.294-4.618-10.294-10.293
c0-3.436,1.692-6.591,4.487-8.497V5.807C19.192,2.604,21.797,0,24.999,0L24.999,0z"/></g>
<g id="sun">
<path d="M48.621,23.622h-9.672c-0.278-2.833-1.401-5.419-3.114-7.505l4.919-4.92c0.539-0.539,0.539-1.412,0-1.951
s-1.412-0.539-1.951,0l-4.919,4.92c-2.086-1.714-4.672-2.836-7.504-3.114V1.38C26.38,0.618,25.762,0,25,0
c-0.763,0-1.38,0.618-1.38,1.38v9.672c-2.832,0.278-5.418,1.4-7.504,3.114l-4.92-4.92c-0.539-0.539-1.412-0.539-1.951,0
c-0.538,0.539-0.538,1.412,0,1.951l4.92,4.92c-1.713,2.086-2.836,4.672-3.114,7.505H1.38c-0.762,0-1.38,0.616-1.38,1.38
c0,0.761,0.618,1.38,1.38,1.38h9.671c0.278,2.831,1.401,5.417,3.114,7.503l-4.92,4.92c-0.538,0.538-0.538,1.412,0,1.95
c0.27,0.27,0.623,0.404,0.976,0.404c0.354,0,0.706-0.135,0.976-0.404l4.92-4.919c2.086,1.713,4.672,2.835,7.504,3.113v9.672
C23.62,49.384,24.237,50,25,50c0.762,0,1.38-0.616,1.38-1.379v-9.672c2.832-0.278,5.418-1.4,7.505-3.113l4.918,4.919
c0.27,0.27,0.623,0.404,0.977,0.404c0.353,0,0.705-0.135,0.975-0.404c0.539-0.538,0.539-1.412,0-1.95l-4.919-4.92
c1.713-2.086,2.836-4.672,3.114-7.503h9.672c0.761,0,1.379-0.619,1.379-1.38C50,24.238,49.382,23.622,48.621,23.622z M25,36.26
c-6.208,0-11.259-5.051-11.259-11.258c0-6.209,5.051-11.261,11.259-11.261c6.209,0,11.26,5.052,11.26,11.261
C36.26,31.209,31.209,36.26,25,36.26z"/>
</g>
</defs></svg>
</iron-iconset-svg>
by the way, you can add how many svg in a as you want
Don't forget to import this file, then you can use your icon :
<iron-icon icon="custom:temp"></iron-icon>
Depending on parent html tag of an SVG object, I would like it's path color to change. Can this be done with SVG? For instance, if a logo is in the header I want it to be red, if it is in the footer I want it to be blue. Here's an example:
<style type="text/css">
#header-img {
fill:blue;
}
#footer-img {
fill:black;
}
</style>
...
<header>
<object id="header-img" type="image/svg+xml" data="myimg.svg" />
</header>
...
<footer>
<object id="footer-img" type="image/svg+xml" data="myimg.svg" />
</footer>
Granted, this can't be done, but is there an alternative without using JavaScript?
Starting again, this is the best question/answer to your problem that I can find:
How to apply a style to an embedded SVG?
It's possible for you to add a linked stylesheet to the file you wish to embed by hand...
Thereby avoiding the use of JavaScript.
I would argue that you should try not to ask redundant questions.
We'd have both done well to have sourced this earlier.
Yes you can.
SVG elements can be manipulated in much the same way as any other HTML/DOM element. For example, with Raphael JS (http://raphaeljs.com/) you could, at the very least, find the absolute position of a vector/SVG element in the browser window, compare that to the absolute position of your header/footer and, using JQuery, trigger an event to change the colour of the SVG.
Raphael additionally renders VML graphics for old versions of IE. So it's well worth looking into.
That said, if you're not planning to use JavaScript, then do it with CSS instead.
Updated with a working example, found here;
http://jsfiddle.net/Zp6HS/4/
Replacing the 'circle' element with your custom path, and the css properties you want to change.
Can't you use the 'parent of' operator in css? Like so:
<style>
header > svg {
fill:blue;
}
body > svg {
fill:black;
}
</style>