Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 4 years ago.
Improve this question
does anyone know of a tool that can take an SVG file, and convert it into an HTML 5 SVG path? you know, the d="M 0 0 L 20 134 L 233 24 Z" fill="#99dd79" part?
I head here: Use Adobe Illustrator to create SVG Path using "move to" commands
But not sure. Does this mean Illustrator can take any line drwaing and save it as an SVG path?
Note:
Yes there is inkscape, but I'm looking for gradient and masking support, if that's possible. I'd like to be able to utilize .ai files and export them using illustrator or Acrobat or something... is there something out there? Or is it built in to Illustrator or Acrobat as an output format?
Gimp can be used to convert SVGs with primitives (e.g. rects, circles, etc.) into a single path which can be used within HTML5.
First download Gimp: https://www.gimp.org/downloads/
Export your SVG as a .svg file with any tool of choice e.g. Illustrator. Don't worry if the SVG output is messy for now, Gimp will clean it up
Import the SVG file into Gimp with File -> Open, and the following (or similar) dialog should show up:
Check both the Import Paths and Merge imported paths options
Then go to Windows->Dockable Dialogues->Paths
Right-click on the single path which says Imported Path and you should see the following dialog:
Click Export Path... and save this text file to a location of your choice
Locate and open up this file with a text editor of your choice e.g Notepad, TextEdit
Copy the text within the <path d="copy this text here" />
Since Gimp formats the text with lots of spaces, you may need to re-format it, by removing some of the spaces to paste it into your HTML in a single line
Open the SVG with you text editor. If you have some luck the file will contain something like:
<path d="M52.52,26.064c-1.612,0-3.149,0.336-4.544,0.939L43.179,15.89c-0.122-0.283-0.337-0.484-0.58-0.637 c-0.212-0.147-0.459-0.252-0.738-0.252h-8.897c-0.743,0-1.347,0.603-1.347,1.347c0,0.742,0.604,1.345,1.347,1.345h6.823 c0.331,0.018,1.022,0.139,1.319,0.825l0.54,1.247l0,0L41.747,20c0.099,0.291,0.139,0.749-0.604,0.749H22.428 c-0.857,0-1.262-0.451-1.434-0.732l-0.11-0.221v-0.003l-0.552-1.092c0,0,0,0,0-0.001l-0.006-0.011l-0.101-0.2l-0.012-0.002 l-0.225-0.405c-0.049-0.128-0.031-0.337,0.65-0.337h2.601c0,0,1.528,0.127,1.57-1.274c0.021-0.722-0.487-1.464-1.166-1.464 c-0.68,0-9.149,0-9.149,0s-1.464-0.17-1.549,1.369c0,0.688,0.571,1.369,1.379,1.369c0.295,0,0.7-0.003,1.091-0.007 c0.512,0.014,1.389,0.121,1.677,0.679l0,0l0.117,0.219c0.287,0.564,0.751,1.473,1.313,2.574c0.04,0.078,0.083,0.166,0.126,0.246 c0.107,0.285,0.188,0.807-0.208,1.483l-2.403,4.082c-1.397-0.606-2.937-0.947-4.559-0.947c-6.329,0-11.463,5.131-11.463,11.462 S5.15,48.999,11.479,48.999c5.565,0,10.201-3.968,11.243-9.227l5.767,0.478c0.235,0.02,0.453-0.04,0.654-0.127 c0.254-0.043,0.507-0.128,0.713-0.311l13.976-12.276c0.192-0.164,0.874-0.679,1.151-0.039l0.446,1.035 c-2.659,2.099-4.372,5.343-4.372,8.995c0,6.329,5.131,11.461,11.462,11.461c6.329,0,11.464-5.132,11.464-11.461 C63.983,31.196,58.849,26.064,52.52,26.064z M11.479,46.756c-4.893,0-8.861-3.968-8.861-8.861s3.969-8.859,8.861-8.859 c1.073,0,2.098,0.201,3.051,0.551l-4.178,7.098c-0.119,0.202-0.167,0.418-0.183,0.633c-0.003,0.022-0.015,0.036-0.016,0.054 c-0.007,0.091,0.02,0.172,0.03,0.258c0.008,0.054,0.004,0.105,0.018,0.158c0.132,0.559,0.592,1,1.193,1.05l8.782,0.727 C19.397,43.655,15.802,46.756,11.479,46.756z M15.169,36.423c-0.003-0.002-0.003-0.002-0.006-0.002 c-1.326-0.109-0.482-1.621-0.436-1.704l2.224-3.78c1.801,1.418,3.037,3.515,3.32,5.908L15.169,36.423z M25.607,37.285l-2.688-0.223 c-0.144-3.521-1.87-6.626-4.493-8.629l1.085-1.842c0.938-1.593,1.756,0.001,1.756,0.001l0,0c1.772,3.48,3.65,7.169,4.745,9.331 C26.012,35.924,26.746,37.379,25.607,37.285z M43.249,24.273L30.78,35.225c0,0.002,0,0.002,0,0.002 c-1.464,1.285-2.177-0.104-2.188-0.127l-5.297-10.517l0,0c-0.471-0.936,0.41-1.062,0.805-1.073h17.926c0,0,1.232-0.012,1.354,0.267 v0.002C43.458,23.961,43.473,24.077,43.249,24.273z M52.52,46.745c-4.891,0-8.86-3.968-8.86-8.858c0-2.625,1.146-4.976,2.962-6.599 l2.232,5.174c0.421,0.977,0.871,1.061,0.978,1.065h0.023h1.674c0.9,0,0.592-0.913,0.473-1.199l-2.862-6.631 c1.043-0.43,2.184-0.672,3.381-0.672c4.891,0,8.861,3.967,8.861,8.861C61.381,42.777,57.41,46.745,52.52,46.745z" fill="#241F20"/>
The d attribute is what you are looking for.
Open the svg using Inkscape.
Inkscape is a svg editor it is a bit like Illustrator but as it is built specifically for svg it handles it way better. It is a free software and it's available # https://inkscape.org/en/
ctrl A (select all)
shift ctrl C (=Path/Object to paths)
ctrl s (save (choose as plain svg))
done
all rect/circle have been converted to path
(In reply to the "has the situation improved?" part of the question):
Unfortunately, not really. Illustrator's support for SVG has always been a little shaky, and, having mucked around in Illustrator's internals, I doubt we'll see much improvement as far as Illustrator is concerned.
If you're looking for DOM-style access to an Illustrator document, you might want to check out Hanpuku (Disclosure #1: I'm the author. Disclosure #2: It's research code, meaning there are bugs aplenty, and future support is unlikely).
With Hanpuku, you could do something like:
Select the path of interest in Illustrator
Click the "To D3" button
In the script editor, type:
selection.attr('d', 'M 0 0 L 20 134 L 233 24 Z');
Click run
If the change is as expected, click "To Illustrator" to apply the changes to the document
Granted, this approach doesn't expose the original path string. If you follow the instructions toward the end of the plugin's welcome page, it's possible to edit the Illustrator document with Chrome's developer tools, but there will be lots of ugly engineering exposed everywhere (the SVG DOM that mirrors the Illustrator document is buried inside an iframe deep in the extension—changing the DOM with Chrome's tools and clicking "To Illustrator" should still work, but you will likely encounter lots of problems).
TL;DR: Illustrator uses an internal model that's pretty different from SVG in a lot of ways, meaning that when you iterate between the two, currently, your only choice is to use the subset of features that both support in the same way.
Surprised no one mentioned Illustrator's Save As > Format dropdown > .svg option.
Outputs an .svg file that contains the path (and the rest of the svg definition) within an .svg (xml) file.
The path itself is within <path d>.
Some time ago I have written an XSLT "program" that converts Eagle (PCB CAD) files to SVG. It runs on Firefox and Internet Explorer.
However, on current version of Chrome and Chromium, it will sometimes not work.
This one works and shows the schematic as SVG:
http://www.tu-chemnitz.de/~heha/enas/STS%20Multiplex/MFC-Verteiler.zip/MFC4.sch?as=SVG
Although very similar and even shorter, this one will show a blank screen:
http://www.tu-chemnitz.de/~heha/enas/UDX5114N.zip/sm5.sch?as=SVG
Both example URLs download genuine Eagle XML schematic files and let the browser do the conversion to SVG without Javascript.
Does someone has a clue how I can track down the problem, if even possible? (Is there something like an XSLT debugger for Chrome?)
In case of importance, I use Windows 7 64 bit German.
I am not sure it is a problem with Chrome, it seems your stylesheet sometimes generates HTML with embedded SVG and sometimes tries to output an SVG document but only gets the SVG namespace right on the root element and some container elements, the content elements are then created in no namespace e.g. end up as <text font-size="2.1336" transform="translate(13.97,154.94)scale(1,-1)" text-anchor="end" fill="#088" xmlns="">black</text>. So wherever you want to output SVG elements with XSLT you should make sure you output them with the right namespace, either using literal result elements with e.g. <text xmlns="http://www.w3.org/2000/svg">..</text> where the namespace could also be present on an ancestor of the literal result element in the stylesheet or by using <xsl:element namespace="http://www.w3.org/2000/svg" name="text">...</xsl:element>, where the namespace declaration could also be present on an ancestor element of the xsl:element in the stylesheet. Putting the namespace on an ancestor element of the result tree you generate in a different template causes the creation of element in no namespace.
For Firefox your stylesheet works differently and inserts a prefix (name="{$svgpre}g") for those SVG elements where the prefix together with the existing namespace declaration on the root puts the elements in the right namespace. Not sure why IE and Edge render the result, other than they seem to put everything into an HTML wrapper and ignore the namespaces in HTML5 fashion.
I know my XSLT: Generating SVG namespace for Firefox and not generating SVG namespace for Internet Explorer was the one and only way to bring it to work on both browsers. Moreover, as the first given example works well in Chrome (and most of my schematics), Chrome seems to have no problem with the missing name space, it's IE compatible, and I expect there is another reason why the second example won't work.
Either with a headless browser, google filesytem API, or some other way.
This question says you can, but not how.
Converting d3.js SVG code to a standalone program -- any suggestions?
google groups has more hints, but no examples.
I've spent a bunch of time playing with the node-canvas example, as well as the phantomJS svg example. I can't figure out how to make them play together. Apparently in Linux, the x-windows Javascript rendering engine isn't very good anyway.
My API reading list of JavaScript, d3.js, SVG, CSS, and other HTML stuff is already mountainous - all I want to do is save a .svg image that I generate with d3.js.
Help, please.
This will neither be easy nor overtly complicated. Main reason being is that a web browser alone cannot save an SVG file from a DOM rendering, unless it's Chrome version 12.
Thing is that an SVG image is just a plain text file with a bunch of rendering instructions. The solution you point to basically says you would have to do this server side. Though they suggest node.js, you can do this in any server-side language you'd like.
Trick is to take your JavaScript/HTML interface, make it either keep track of all objects you create, or otherwise be able to serialize all of them, and then send that data (ex: via ajax) to a server-side program which would reconstitute that to an SVG file and offer it to be downloaded.
The challenge is that both your programs (client-side, javascript and server-side: php/etc.) will more or less have to re-implement SVG specifications to make this work and have common understanding as to how you serialized it for the transmission. There are virtually no stock components that do this for you.
There are some examples of using node().parentNode.innerHTML with 64B encoding, but I couldn't figure out how to use it.
https://groups.google.com/forum/?fromgroups#!topic/d3-js/aQSWnEDFxIc
The easiest solution I've found so far is FileSaver.js demo here:
http://eligrey.com/demos/FileSaver.js/
It uses the HTML5 filesaver interface.
I came across this today, I've not tried it but perhaps someone will find it useful:
https://github.com/d3-node/d3-node
const D3Node = require('d3-node')
const d3n = new D3Node() // initializes D3 with container element
d3n.createSVG(10,20).append('g') // create SVG w/ 'g' tag and width/height
d3n.svgString() // output: <svg width=10 height=20 xmlns="http://www.w3.org/2000/svg"><g></g></svg>