I have stumbled upon a quite strange problem. When I upload my .svg file to my web hosting server the .svg file renders as text in the browser and not as an image.
When I developed the site I created a local web server and everything is looking good there.
So for example when I enter:
http://localhost:8080/wordpress/wp-content/themes/SelenaStheme/intro/images/animation1.svg
I see a picture.
But when I enter:
http://www.selenas.se/wp-content/themes/SelenaStheme/intro/images/animation1.svg
I see the following:
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 17.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg version="1.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="200px"
height="150px" viewBox="0 0 200 150" enable-background="new 0 0 200 150" xml:space="preserve">
<g id="Layer_2" display="none">
<rect display="inline" fill="#D3D3D3" width="200" height="150"/>
</g>
<g id="Layer_1">
<g>
<path fill="#BF4756" d="M61.241,66.484c0.058-0.52-0.096-1.099-0.349-1.751C61.025,65.329,61.142,65.913,61.241,66.484z"/>
<path fill="#BF4756" d="M42.401,88.682c-3.276-11.089-6.221-23.403,5.585-28.073c2.426-0.96,5.841-1.078,7.912,0.355
c-0.264-0.767-0.504-1.521-0.724-2.265c-1.966-0.397-4.368-0.153-7.021,0.897c-12.94,5.118-15.824,17.941-9.698,34.145
c3.832,10.166,3.639,24.764-11.266,30.661c-8.845,3.498-16.252,1.535-18.141-3.243c-0.675-1.707-0.995-3.474-0.281-5.019
c0.49,0.28,1.416,0.229,1.989,0.002c1.638-0.648,2.271-2.161,1.731-3.526c-0.593-1.501-2.336-2.075-4.793-1.103
c-2.866,1.134-3.805,4.268-2.563,7.407c3.023,7.644,11.899,10.448,21.808,6.528c12.203-4.827,22.026-14.711,16.268-34.06
C43.057,90.884,42.382,88.68,42.401,88.682z"/>
</g>
<g>
<path fill="#FFFFFF" d="M42.405,88.679c2.056,0.146,4.033-0.253,7.139-1.481c10.61-4.197,10.363-15.735,7.067-24.41
c-5.267-13.828-3.783-24.393,5.429-28.037c4.081-1.614,7.813-0.529,9.059,2.62c0.968,2.448-0.565,4.538-2.955,5.484
c0.344-1.687,0.337-2.898-0.401-4.763c-1.107-2.799-3.503-3.401-5.776-2.502c-9.095,3.597-5.124,15.511-1.996,25.465
c5.153,16.435-1.548,24.21-10.235,27.646c-2.766,1.094-5.075,1.495-6.981,1.156"/>
</g>
</g>
</svg>
When I host the files on my public dropbox-folder I see the picture as intended.
Can it be so that rendering .svg files is disabled at my web hosting provider? How could that be? I am quite new to web development but this bug has taken me 5 hours to understand that this was my problem (I thought i was writing my the wrong paths due to the .svg files not showing up in my animation). Any idea how I can move on from here?
Thank you!
You need to get your web hosting provider to serve SVG files with the mime-type image/svg+xml
You'd have to contact them and ask them I guess.
Related
I am creating SVG files using paper.js (from node.js, with the paper-jsdom package), and I would like to make them as compliant as possible with Adobe Illustrator. In order to do so, I am trying to repoduce the steps described [here]. But then, exporting into SVG using the exportSVG function, I get something quite different :
The layer compatibility between paper.js and AI does not seems to work anymore. So, am I missing something here ? Is it because of my version of AI (CC 2018) ? Would there be a way to bypass this issue ?
I don't think that Paper.js SVG export was ever compatible with Illustrator layer model.
You say that this "does not seems to work anymore" but did you make it work with previous versions of Paper.js/AI ?
If not, I guess that you were confused by the analogy that is made in Paper.js documentation about their shared layer concept.
But this analogy is only made because users are used to AI layers and this allow them to better understand how Paper.js works.
From that, I was curious to see how AI was able to restore its layers after a SVG export, to see if there was a possible workaround in your case.
When you export your AI project as SVG, you can choose to "Preserve Illustrator Editing Capabilities" or not.
If you don't, the exported SVG will look like this:
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 17.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg version="1.0" id="Calque_1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="1137px" height="937px" viewBox="0 0 1137 937"
enable-background="new 0 0 1137 937" xml:space="preserve">
<g id="Calque_1_1_">
<circle fill="#FF0000" cx="380" cy="238" r="60"/>
</g>
<g id="Calque_2">
<circle fill="#0000FF" cx="569" cy="468" r="60"/>
</g>
</svg>
But if you try to load this SVG back into AI, you won't get 2 layers, but only one containing 2 groups (as you do with Paper.js exported SVG).
If you check "Preserve Illustrator Editing Capabilities", you will get a very different result:
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 17.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd" [
<!ENTITY ns_extend "http://ns.adobe.com/Extensibility/1.0/">
<!ENTITY ns_ai "http://ns.adobe.com/AdobeIllustrator/10.0/">
<!ENTITY ns_graphs "http://ns.adobe.com/Graphs/1.0/">
<!ENTITY ns_vars "http://ns.adobe.com/Variables/1.0/">
<!ENTITY ns_imrep "http://ns.adobe.com/ImageReplacement/1.0/">
<!ENTITY ns_sfw "http://ns.adobe.com/SaveForWeb/1.0/">
<!ENTITY ns_custom "http://ns.adobe.com/GenericCustomNamespace/1.0/">
<!ENTITY ns_adobe_xpath "http://ns.adobe.com/XPath/1.0/">
]>
<svg version="1.0" xmlns:x="&ns_extend;" xmlns:i="&ns_ai;"
xmlns:graph="&ns_graphs;"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="1137px"
height="937px"
viewBox="0 0 1137 937" enable-background="new 0 0 1137 937"
xml:space="preserve">
<switch>
<foreignObject requiredExtensions="&ns_ai;" x="0" y="0" width="1"
height="1">
<i:pgfRef xlink:href="#adobe_illustrator_pgf">
</i:pgfRef>
</foreignObject>
<g i:extraneous="self">
<g id="Calque_1">
<circle fill="#FF0000" cx="380" cy="238" r="60"/>
</g>
<g id="Calque_2">
<circle fill="#0000FF" cx="569" cy="468" r="60"/>
</g>
</g>
</switch>
<i:pgf id="adobe_illustrator_pgf">
<![CDATA[
...(huge data skipped)
]]>
</i:pgf>
</svg>
This time, if you load this back into AI, you will get your layers, as expected.
The difference resides in all the meta data that AI adds to the SVG in order to load it back, and most importantly, the <i:pgf id="adobe_illustrator_pgf"> element.
There is a thread discussing about the same kind of problem in Inskape context and it seems that this crucial data is a kind of binary data that only AI can read and write.
So as a final word, unfortunately, I don't think that there is a chance that you or Paper.js can make a SVG file that maps to AI internal layers model.
I am using SVGs to configure avatars in a website. The IDs of the layers are used to change properties like fill, stroke or display, so the IDs must be well defined.
I have a problem with the last model. When I export it from Adobe Illustrator CC to SVG 1.1, some paths are automatically converted to a group with the path inside. The group has the ID instead the path.
It could be something with the Illustrator version, I have made the same process with other files and they are exported just fine.
This is what I was expecting to export:
<?xml version="1.0" encoding="utf-8"?><!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="8 -9 640.6 640.6" enable-background="new 8 -9 640.6 640.6" xml:space="preserve">
<g id="chica">
<g id="peinados">
<g id="pelo15">
<path id="colorpelo" fill="#895C38" d="M258.6,245.7c-..."/>
</g>
</g>
</g>
</svg>
And this is what happens (Illustrator place the path with the ID "colorpelo_55_" inside a group and gives the group the ID):
<?xml version="1.0" encoding="utf-8"?><!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="8 -9 640.6 640.6" enable-background="new 8 -9 640.6 640.6" xml:space="preserve">
<g id="chica">
<g id="peinados">
<g id="pelo15">
<g id="colorpelo_55_">
<path fill="#895C38" d="M258.6,245.7c-..."/>
</g>
</g>
</g>
</g>
</svg>
Why is this happening? How can I fix it without doing it manually? (There are hundreds of layer's names to change).
Thank you!
Downloadable files:
https://drive.google.com/open?id=1ztkXVjbqvQmh77dLTAQM7NGwPfUHsUJd
Finally it was about a calligraphic brush applied (it couldn't be be seen, but it was there). If somebody is interested in the complete answer, check this link:
https://forums.adobe.com/message/10886713
I'm trying to hack together a sprite sheet from a set of icons. I know almost nothing about SVG. I can get the simple icons to work, but an icon with a clip path isn't displaying properly. From what I can tell it seems like it's not using the clip path.
The sprite works in jsfilddle and it works if I just load the svg on it's own and include a < use > statement in the SVG. But if I have a separate < use > it doesn't work.
All my testing has been done in Chrome (50.0.2661.94)
<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<clipPath id="folder-clip-0">
<path d="..." />
</clipPath>
<symbol id="folder" viewBox="0 0 32 32">
<g class="container" data-width="32" data-height="27" transform="translate(0 2)">
<path d="..." class="..." />
<path class="..." d="..." />
<path clip-path="url(#folder-clip-0)" d="..." class="..." />
</g>
</symbol>
</defs>
</svg>
I'm using it like so:
<svg>
<use
xmlns:xlink="http://www.w3.org/1999/xlink"
xlink:href="/img/path/sprite.svg#folder">
</use>
</svg>
When I use the separate statement it looks like this:
But it should look like this:
The color difference is not relevant, it's just the background when the image was taken.
Edit:
I just discovered that if I dump the whole sprite sheet into the page HTML and reference it locally instead of an external file it works. So I don't know what's wrong with my external reference.
e.g.
<svg>
<use xlinkHref={"/img/path/not/work/sprite.svg#folder"}></use>
</svg>
vs.
<svg>
<symbol id="folder"></symbol>
</svg>
<svg>
<use xlinkHref={"#folder"}></use>
</svg>
This works for me as a fallback, but I'd rather have an external SVG file instead of embedding it in my HTML.
Edit 2:
If the SVG sprite sheet is embeded in the HTML directly using the external link shows the icon correctly.
This seems to be a browser support issue. Using the external reference works as expected in Firefox. Chrome doesn't handle clip paths and some other functions in external references. There's an outstanding bug report filed. Safari also doesn't support it.
Related StackOverflow ticket: Why can't I reference an SVG linear gradient defined in an external file (paint server)?
Open bugs:
https://code.google.com/p/chromium/issues/detail?id=109212
https://bugs.webkit.org/show_bug.cgi?id=105904
I'm generating an SVG file on a website and it's supposed to be imported in Ilustrator. I use <symbol /> element to store a shape definition and I reference it with the <use /> element on the "sheet". Users are able to set size of the shape and it's really crucial that it's exactly the same size when imported to Adobe Illustrator. It works unless I add a stroke.
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg id="SvgjsSvg1000" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.dev/svgjs" width="210mm" height="297mm" viewBox="0 0 210 297" viewbox="0 0 210 297">
<defs id="SvgjsDefs1001">
<symbol id="shape_id70" preserveAspectRatio="xMinYMin meet" viewBox="0 0 27.841039657592773 12.2083101272583">
<path id="SvgjsPath1030" d="M26.4405 13.067C25.685728 11.72066 22.49458 8.90142 20.73442 7.678030000000001C22.99088 7.6388854 23.85819 7.6146637 28.738950000000003 7.456081C26.298620000000003 6.628644 23.737080000000002 5.904501 21.418080000000003 4.973881C23.937200000000004 4.5081560000000005 26.519460000000002 4.085806000000001 28.376120000000004 3.7947010000000008C28.376120000000004 3.7946453179000006 19.370760000000004 2.7013810000000005 8.358420000000002 4.414499000000001L9.412540000000002 1.364679000000001L6.497860000000001 3.520859000000001L4.442800000000001 0.858699000000001L4.324531000000001 4.464059000000001L0.897911000000001 5.542179000000001L4.249861000000001 6.913239000000001L4.236664300000001 10.198599000000002L6.192894300000001 7.622079000000001L9.099554300000001 8.802649L8.143547300000002 6.432539C12.463087300000002 6.813516 22.5756473 8.818239 26.440547300000002 13.067009Z" fill="none"></path>
</symbol>
</defs>
<use id="SvgjsUse1034" xlink:href="#shape_id70" x="0" y="0" width="50"></use>
</svg>
This is fine in both browser and Illustrator. But when I add attributes stroke-width="0.1" stroke="#000". In Illustrator, the size of the shape changesto 48.951. It's still 50 in browser though. I tried to add these attributes to the <symbol />, <path /> and <use /> elements with the same result.
I know that the SVG standard doesn't have any attribute that would control how to render the stroke. I know there is a discussion about the stroke-alignment attribute for future versions of SVG. But browsers don't support that yet, and neither Adobe Illustrator.
So my question is: Is there any way how to adjust the SVG so that Illustrator would render the shape with the size that is set by the width attribute in the <use /> element regardless of the stroke settings
The width value on your <use> should be having no effect on your <symbol> because your symbol has no viewBox attribute. Without a viewBox, only the x and y attributes of the <use> will be doing anything.
Also, be aware that we've seen a few questions on S.O. in the past, complaining about bugs in Illustrator's SVG import filter. If <symbol> is working, then that's great. However, in general, you may find that keeping your SVG structure simple, and avoiding the more advanced SVG features, might be a good idea.
Safari browser (I'm testing under windows) seems having problem in displaying Svg Image element.
<!DOCTYPE html>
<html>
<body>
<h1>My first SVG</h1>
<img src="image.svg" />
</body>
</html>
And here is the content of the image.svg:
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<rect x="50" y="50" width="100" height="100" style="fill:blue"></rect>
<rect id="foo" x="50" y="150" width="500" height="500" style="fill:green"></rect>
<image x="50" y="10" width="200" height="200" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg=="></image>
</svg>
Is there any solution or workaround to make this work in Safari?
In the <image> tag inside the svg element, href works fine in Chrome. To work in older versions of Safari, you need xlink:href. (Also applies to the <use> tag.) Keep in mind xlink:href is deprecated and is being replaced by href. However, it was not supported until Safari 12.
https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/href
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" ...>
<image href="data..." xlink:href="data...">
</svg>
I think there are two problems here:
You haven't said anything about how large your SVG image is. As a rule, you should at least include a viewBox attribute in the <svg> tag. For example:
<svg width="250" height="250" viewBox="0 0 250 250" ... >
The other problem is that Safari isn't particularly brilliant at rendering SVGs. However, it tends to do better when you embed them with an <iframe> or <object> tag instead of using <img>. For example:
<object data="image.svg" type="image/svg+xml"></object>
Also, make sure your server is delivering SVG content with the correct MIME type (Content-Type: image/svg+xml), as this can cause problems too.
So give this a try:
HTML source:
<!DOCTYPE html>
<html>
<body>
<h1>My first SVG</h1>
<object data="image.svg" type="image/svg+xml"></object>
</body>
</html>
image.svg:
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="250" height="250" viewBox="0 0 250 250"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<rect x="50" y="50" width="100" height="100" style="fill:blue"></rect>
<rect id="foo" x="50" y="150" width="500" height="500" style="fill:green"></rect>
<image x="50" y="10" width="200" height="200" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg=="></image>
</svg>
Be sure to supply your <svg> tag with a height, width, and view box like so. Safari doesn't like it when height or width is set to auto for some reason. ⤵︎
<svg height="16px" width="16px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="M60......"></path></svg>
I just discovered this same problem when I checked an app I was working on in Safari, after having been using Chrome most of the time. I wrote this bit of TypeScript/jQuery code (easily enough turned into plain JavaScript) to solve the problem:
export function setSvgHref(elem: JQuery, href: string) {
elem.attr('href', href);
if (isSafari()) {
elem.each(function() {
this.setAttributeNS('http://www.w3.org/1999/xlink', 'href', href);
});
}
}
In my case, the problem was related to <mask> tags in svg.
I deleted the following line in my svg component and it started to work on Safari.
<mask id="y9iogdw0wd" fill="#fff">
<use xlink:href="#jz8vxv0q6c"/>
</mask>
I had a problem with a wordmark (text that I use as a logo) that I saved as a .svg file. It was on my page with a <img src="...svg"> but did not appear properly in Safari (current version as of July 2020). The SVG worked fine with FireFox, Chrome, and Brave.
I had created the SVG in Inkscape. I selected the entire object, then used Path -> Object to Path... and saved the resulting file.
This rendered properly in all four browsers. (I'm writing this here in case I have this problem again: it'll tell me what I did to fix it.)