So when you export an Adobe Illustrator file to SVG format, paths are encoded using the SVG path syntax:
http://www.w3.org/TR/SVG/paths.html
If you look at the "path data" element, it's possible to have "move to" commands embedded into a path:
http://www.w3.org/TR/SVG/paths.html#PathData
In other words, you draw a few lines in the path, pick up the pen and move it somewhere else, and continue the same path.
I have been trying to figure out how to do this in Illustrator to no avail. You can add on to an existing path but it seems you can only do this by extending the path from one of the endpoints. I don't want to do this: I want to continue the path from somewhere else.
You can get something sort of like this by grouping two disjoint paths. However when Illustrator does the svg export it just creates two <path> tags and puts them inside a <g> tag which is not what I want. If I manually edit an svg file with a text editor, adding "move to" commands, and I import them, it looks like maybe what Illustrator is doing is creating a group, but I can't tell because I don't know how to select and object and figure out if it is a group or not.
I think the only way would be to mak a compound path. Select both paths you want to use as a single path and go to Object > Compound Path > Make.
If this doesnt work then its probably not possible. This is the only way i can think of in which a non-contiguous path would even exists as far as AI sees it.
Create a file that has a path using move-to commands:
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
viewBox="-25 -25 100 100">
<path d="M0,0 L50,0 M50,50 L0,50" stroke="black" />
</svg>
Open this file in Illustrator. Note that there is a single element named <Compound Path> in the Layers palette.
Choose command Object > Compound Path > Release. Now there are two paths selected.
Choose command Object > Compound Path > Make.
Save as SVG file:
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 15.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<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"
width="612px" height="792px" viewBox="0 0 612 792"
enable-background="new 0 0 612 792" xml:space="preserve">
<path stroke="#000000" d="M128,218h306 M434,524H128"/>
</svg>
Cheer!
Related
I have a set of svgs I need to minify and I noticed that many of them have two paths when they could just use one path. They use one path for the shape and one for the color.
I can manually unset the mask and then do an intersect operation on each but this is very time consuming and not scalable.
This file is an example of the kind of clip I'm talking about:
https://svgur.com/s/Eac
<?xml version="1.0" encoding="UTF-8" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="100%" height="100%" viewBox="0 0 284 284" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;"><clipPath id="_clip1"><circle cx="140.476" cy="140.476" r="42.52"/></clipPath><g clip-path="url(#_clip1)"><rect x="57.702" y="57.702" width="165.548" height="165.548" style="fill:#ff91a5;"/></g></svg>
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 was looking into SVG code, and i see that first time:
<svg id="Icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 342 472"><defs><style>.cls-1{isolation:isolate;}</style></defs><title>Artboard 1</title><image id="Vector_Smart_Object" data-name="Vector Smart Object" class="cls-1" width="314" height="200" transform="translate(14 272)" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAToAAADICAYAAAB4by36AAAACXBIWXMAAAsSAAALEgHS3X78AAAcrklEQVR4Xu2dbXfjKLNFDwWS08///623Ewuo+wHhKJ6knTg6vEjstWYm3UujyBJsVwGFjKpiMPgJ0/xiHh3DZLm+jkY7+BFmiG4A1JcXiyHFATBEdxqOKrLfMkR4DoboDsYQ2j4MAR6LIbpOGUKrwxBgnwzRdcCQWtsM+bXPEF2DDLH1zRBfewzRNcAQ27EZ4qvPEF0lhtzOyZBeHYboCjHENviMIb4yDNERGXIb/IQhPR5DdDsz5DbYgyG9fRmi24EhtwGTIb3fM0T3JENuCTdditwHv7yNhoohvWcZovsBZ5DbVlzGyPvnNabNz75pwKrx9vMZxDik932G6L7B0QSXZXYTWasS24u1kWcRHk2CQ3iPGaL7giPI7XRC+ykHFOCQ3ucM0d ...
Why is it says:
xlink:href="data:image/png
If it's not png?
It's a PNG that has been encoded as a data url and embeded in a SVG file, utilizing the <image> tag.
From certian details its possible to see this has been produced with Illustrator. Probably someone has placed the PNG into an artboard, choosing not to link but to embed the file, and then exported to SVG.
I'm learning to work with svg icons and now trying to directly extract icons from psd. With adobe photoshop 2017 it's possible to export image as svg code. However in this code instead of tag is generated tag (as I understand this is base64 encoding?!). Because of that I can't modify icons, for example, give them different color (fill) etc.
My question is - what is the best way to convert image to svg, so that it would contain tag, preferable with photoshop?
Basically, I want something like this:
<svg fill="#000000" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
<path clip-rule="evenodd" d="M0 0h24v24H0z" fill="none"/>
<path d="M22.7 19l-9.1-9.4z"/>
And this is approximately what I get using photoshop:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="34" height="48" viewBox="0 0 34 48">
<metadata><?xpacket begin="" id="W5M0MpCehiHzreSzNTczkc9d"?>
<x:xmpmeta xmlns:x="adobe:ns:meta/" x:xmptk="Adobe XMP Core 5.6-c138 79.159824, 2016/09/14-01:09:01 ">
<rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
<rdf:Description rdf:about=""/>
</rdf:RDF>
</x:xmpmeta>
<?xpacket end="w"?></metadata>
<image width="34" height="48" xlink:href="data:img/png;base64,iVBORw0KGgoAAAANSUhEUgAAACIAAAAwCA0gTiVBORw0KGgoAAAANSUhEUgAAACIAAAAwCA0gTiVBORw0KGgoAAAANSUhEUgAAACIAAAAwCA0gT="/>
</svg>
P.S. I tried several online decoders from base64, but didn't find them useful.
After all I found most useful this tool - vectormagic (editor's note: after going through the process, it asks you for $10 to download your result). It convert to svg fast and very precise, and you don't have to do a lot of customization. On the image, first icon is inkscape result and second is from vector magic.
Maybe I missed something in inkscape for the result to be this perfect. In that case please point it out. Anyway, vector magic saves a lot of time and I haven't found flaws with it..yet.
1.- Open your icon with Illustrator.
2.- Clic in file > export > export to screen.
3.- Select the svg extention and save.
3.- Open your svg file with a browser
4.- Clic in Inspect Element (or F12)
That's all, in the elements tab is your svg code path
Given the following SVG:
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="1891px" height="1492px" viewBox="0 0 1891 1492" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g transform="translate(352 500)">
<path d="M1,0 L1,400 C0.999999169,799.99998 201,1205 601,1439.4375 C1001,1205 1201,800 1201,400 L1201,0 L1,0 Z M1,0"></path>
<path d="M1,0 L1,960.824531 C1.00000084,1439.4375 489.311066,1258.28207 600.483175,1439.4375 C708.904794,1258.28211 1201,1439.4375 1200.99997,960.824531 C1200.99996,960.824531 1201,0 1201,0 L1,0 Z M1,0"></path>
</g>
</svg>
Are there any tools to automatically update the path points with the transform, and remove the transform from the group element?
I have an SVG app (Sketch) that outputs an SVG using transform attributes (if you make any adjustments to the path), but in my web app I need to actual path points to already be adjusted, and not use any transform attributes.
Clarification: The goal is to find an app or tool that will allow this to be performed on large SVG files, thus removing any transform attributes throughout the entire file.
Thanks!
There is an Inkscape extension, Apply Transforms, which I have found works well for removing transforms on elements and applying them to the sub-elements (adjusting a <rect>s width and height, for example).