External sprite.svg shadow-root empty icons not showing - svg

I am working with gulp-sprite trying to load svgs into a styleguide. I have created the icon.svg, but when I try to display them in a different HTML file using xlink:href the svgs aren't showing. The shadow-root is empty.
I have tried multiple things, this works in Edge, but no other browser. I have even got it to work including the sprite, but hiding it within the html.
<!-- icon in html -->
<svg>
<use xlink:href="assets/images/icons.svg#BlueCard"></use>
</svg>
<!-- external svg file -->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><symbol viewBox="0 0 72 64" id="BlueCard"><path d=...></symbol></svg>
I expect the icon to be there and the shadow root to not be empty. Should include the path

Related

Embedded SVG into Inkscape

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.

Polymer - Load custom icons via iron-iconset-svg

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>

importing svg.js drops everything inside a link tag

i load a svg file like this
var draw=SVG('container');
var rawSVG=$('rawSVG').get('html'); //get content of invisible div with mootools
draw.svg(rawSVG);
in rawSVG DIV i can see the link tags. But in container, everything inside of the link tags is dropped and i get empty tags
in import.svg.js the only thing related to xlink:href i could found is related to image
element = context.image(attr['xlink:href'])
the links are created by svg.js and saved by export.svg.js correctly but on importing the next time the get dropped.
edit:
i want to load a svg graphic into an cms and than be able to modify the graphic.
it is working fine but on next import the text within the link tag get dropped.
edit 2
ok, now i loose the xlink element but the child elements are kept
what i want is to change a svg node in an external svg file
i include in a hidden div called rawSVG
in witch i see
...//more svg
<a xlink:href="test/" id="lktest">
<text y="86.83333396911621" x="100" font-family="Muli" id="txtest">
<tspan dy="1.8em" x="0" id="tstest">test</tspan>
</text>
</a>
...//more svg
than i grab the content of that div with mootools
var rawSVG=$('rawSVG').get('html');
and than i do
draw.svg(rawSVG);
to make it editable in svg.js
but in my container div i see
... //more svg
<text y="86.83333396911621" x="100" font-family="Muli" id="txtest">
<tspan dy="1.8em" x="0" id="tstest">test</tspan>
</text>
... //more svg
the ink was created and exported with svg.js and works. this behavior happens after reload
i have the xmlns:xlink="http://www.w3.org/1999/xlink" in my svg node
I tried html 5 and html 4 strict
i tried svg with doctype and without
I also tried images and they get dropped aswell
it's like the xml link namespace is not recognized
i tried to set the namespace of xlink like in the comment of the answer to this cuestion:
xmlserializer strips xlink from xlink:html svg image tag
but nothing changed
any suggestion what I'm doing wrong?

Accessing external SVG graphics with the USE tag

Dear Stack Overflow,
I am trying to reference individual SVG graphics which reside in different SVG files
via the tag and ID numbers in a master HTML5 page.
I want to be able to put onclicks on the use tags in the HTML page in order to
make a multiple choice quiz (and then keep a score which I know how to do),
The graphics are going to be bulky. Therefore, these need to be in an external svg files.
Here however, I have used a simple rectangle to make my question easier to
follow
Here is my HTML
<html>
<head></head>
<body>
<svg>
<use xlink:href="LINK.svg#link" />
</svg>
</body>
</html>
and here is My SVG
<?xml version="1.0" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg">
<g id="link">
<rect x="0" y="0" width="50" height="50" style="fill:red"/>
</g>
</svg>
This works exactly the way I want it to in Firefox and Opera.
However, it does not work in Chrome or Safari. Not sure about Internet Explorer
Is there an alternative method that will allow me external access to the
SVG data, and scripting from the main HTML page (because I want can keep a score
over multiple SVG elements)

You could access your SVG by using an <object> tag. This link shows you how to script from html to SVG and vice versa.

svg inside svg is rasterized causing blury results when scaling up

I'd like to embed an external SVG image file within an <svg> tag. To do this, i'm using SVG's <image> tag as follows:
<svg width="1000" height="1000"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<image x="0" y="0" width="48" height="48"
xlink:href="http://static.micahcarrick.com/media/images/autotools-tutorial/hello-world.svg"
transform="scale(5.0)" />
</svg>
As you can see, I'm trying to scale the nested SVG by 5.0 by adding a transform attribute. Unfortunately, in both Firefox and Chrome, I'm sometimes getting a blury image because it's rasterizing the nested SVG before scaling it up.
Note: It sometimes works as expected (The nested SVG stays crisp) in Firefox and Chrome, but not always (For example, if I open the attached JSFiddle in Chrome, it's blury/broken. If I press F5, it's crisp/working)
Is there any way to ensure that the nested SVG is never rasterized before scaling ?
Thanks :)
JSFiddle: http://jsfiddle.net/a9NRY/17/

This is a known bug in Chrome, caused by the fact that the image is cached. You can't fix this from your code, since it's a browser bug, but you could try to disable caching for that image on the server side.

Resources