paper.js & Adobe Illustrator SVG : layers compatibilty - node.js

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.

Related

SVG with 'svg' element embedded

I've a problem with a complicated SVG image.
It works on Chrome and Firefox, but there is no way to convert it into a PNG image even using an online tool or GIMP and also with Inkscape.
I'm not sure where the problem is. Maybe because is it an image built with two other SVG images embedded.
Here is the SVG file.
To reproduce the problem: open the SVG file linked with a browser: it works.
Open it with GIMP and the image is empty.
An easier example with the same problem:
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg">
<!-- Some graphical objects to use -->
<defs>
<svg id="pippo" viewBox="0 0 10 10" >
<circle id="myCircle" cx="5" cy="5" r="5" />
</svg>
<linearGradient id="myGradient" gradientTransform="rotate(90)">
<stop offset="20%" stop-color="gold" />
<stop offset="90%" stop-color="red" />
</linearGradient>
</defs>
<!-- Using my graphical objects -->
<rect height="100%" width="100%" fill="#fc0" />
<use x="0" y="0" href="#pippo" fill="url('#myGradient')" />
</svg>
With SVG 1 you need to use the attribute xlink:href instead of href on the use element
<use x="0" y="0" xlink:href="#pippo" fill="url('#myGradient')" />
You will also need the xlink namespace on the <svg> element
<svg
viewBox="0 0 10 10"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
>
Since SVG 2, xlink: prefix is deprecated but SVG 2 is a W3C Candidate Recommendation and all its features are not yet supported by all browsers and editors.
Full SVG 1 example:
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Some graphical objects to use -->
<defs>
<svg id="pippo" viewBox="0 0 10 10">
<circle id="myCircle" cx="5" cy="5" r="5" />
</svg>
<linearGradient id="myGradient" gradientTransform="rotate(90)">
<stop offset="20%" stop-color="gold" />
<stop offset="90%" stop-color="red" />
</linearGradient>
</defs>
<!-- using my graphical objects -->
<rect height="100%" width="100%" fill="#fc0" />
<use x="0" y="0" xlink:href="#pippo" fill="url('#myGradient')" />
</svg>
Workaround: SVG to PDF via the native browser feature "save to PDF" (print modal)
Since Firefox, Chromium, and WebKit have powerful built-in PDF export functionalities combined with way better SVG support than any "desktop" application, we can convert complex SVG images to a flattened, 'visually hardwired' vector file.
Ideal result
all vector data is retained (can also be opened in a vector application like Inkscape, Adobe Illustrator, Figma, etc.)
complexities like nested SVG images or <use> elements as well as transforms are repositioned to hardcoded vector x/y coordinates.
... but curb your enthusiasm: common issues
patterns and some complex gradients might be rasterized
you will lose structural data like layers, IDs and other editable features.
Manual SVG export optimisations
as #Yukulélé already pointed out: some syntax conventions and newer attributes might be too progressive
try to replace CSS-based styling with attributes – svgomg can be helpful
reusable elements defined in <defs> or as <symbols> might have quirky recursive dependencies
try to clean up unnecessary or invalid properties (e.g., hexadecimal RGBA) and fix incomplete SVG nestings (missing end tags)
document dimensions and aspect ratios can often be better retained (by a graphic application),
when the parent SVG element was added a viewBox and width/height attributes (at least in Adobe Illustrator)

Why Illustrator convert my paths into groups when exporting to SVG?

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

Why does SVG viewbox attribute only work on inline SVG?

I downloaded some 16x16 SVG icons that used the viewbox attribute to scale the original code to fit into 16x16 canvas on download. Now what I am experiencing is that I can not insert the SVG from an external file anywhere as the viewbox attribute just isn't working on it. If I place the SVG code inline then it works.
Am I missing something, or is this just how it is?
Here is the code.
<?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 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" height="16" viewbox="0 0 48 48" width="16">
<path clip-rule="evenodd" d="M37,47H11c-2.209,0-4-1.791-4-4V5c0-2.209,1.791-4,4-4h18.973
c0.002,0,0.005,0,0.007,0h0.02H30c0.32,0,0.593,0.161,0.776,0.395l9.829,9.829C40.84,11.407,41,11.68,41,12l0,0v0.021
c0,0.002,0,0.003,0,0.005V43C41,45.209,39.209,47,37,47z M31,4.381V11h6.619L31,4.381z M39,13h-9c-0.553,0-1-0.448-1-1V3H11
C9.896,3,9,3.896,9,5v38c0,1.104,0.896,2,2,2h26c1.104,0,2-0.896,2-2V13z M33,39H15c-0.553,0-1-0.447-1-1c0-0.552,0.447-1,1-1h18
c0.553,0,1,0.448,1,1C34,38.553,33.553,39,33,39z M33,31H15c-0.553,0-1-0.447-1-1c0-0.552,0.447-1,1-1h18c0.553,0,1,0.448,1,1
C34,30.553,33.553,31,33,31z M33,23H15c-0.553,0-1-0.447-1-1c0-0.552,0.447-1,1-1h18c0.553,0,1,0.448,1,1C34,22.553,33.553,23,33,23 z"
fill-rule="evenodd"/>
</svg>
Note that it's viewBox not viewbox - the browser might save you sometimes, but not always.
See the following for full details:
https://jsfiddle.net/t88pLgbb/4/

SVG symbol with stroke has wrong size in Illustrator

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.

.svg renders as text document in browser but not when viewed locally

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.

Resources