is there a tool to create SVG paths from an SVG file?

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?

inkscape supports gradient and masking. Plus it uses xml for its inner core while illustrator can save svg but with really bad results — frenchone, Dec 10 '13 at 00:19
It wasn't around when this question was asked, but nowadays we can ask things like this at http://softwarerecs.stackexchange.com/ — Mawg says reinstate Monica, Feb 27 '17 at 10:00
There are online tool to create SVG Path from different file formats like: https://image.online-convert.com/convert-to-svg — Narayan Yerrabachu, Mar 16 '18 at 10:21
I'm very late to the party, and since it's closed I can't add this as an answer, but https://webdogs.com/blog/export-svg-web-using-adobe-illustrator/ explains how to do it with Illustrator. — OsakaWebbie, Mar 30 '19 at 03:25
You could open the file in your browser, open up Inspect Element, and copy the SVG element. — Nanoo, Jul 01 '20 at 14:43
Use Adobe XD or Illustrator, right click on the vector object, click on 'Copy SVG Path'. If you, have a font object you have to convert it to a path first. — Matthew C, Feb 07 '21 at 13:52

score 95 · Answer 1 · answered May 10 '17 at 15:40

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

This worked out fine at my first try. Naturally it is only the paths, and no fill. I have a complicated loggotype, and it looks very much like the original. It has text and probably at least something like 5 different bent curves to make a sylistic crown and two keys. I replaced my HTML-code for my SVG-object with the SVG file exported from GIMP, exept the very top information. Worked great, thanks, voted up ofcourse! — Michael Larsson, Aug 24 '20 at 08:39
I put Fill="True", and it filled the curvs in perfectly (first try), this is to good to be true :) — Michael Larsson, Aug 24 '20 at 08:43
I have a to low reputation to show an image of what it did but I think it came out realy nice. — Michael Larsson, Aug 29 '20 at 14:29

score 76 · Answer 2 · answered Jul 05 '16 at 15:11

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.

this is not a solution with autogenerated complex svg's, take a look at the gimp solution — code4jhon, Aug 15 '18 at 11:55
It is worth giving it a try before going for more complex solutions! — Augustin Riedinger, Jan 06 '22 at 08:39

frenchone · Answer 3 · 2018-12-10T10:26:56.087

44

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

edited Dec 10 '18 at 10:26

answered Dec 10 '13 at 00:24

frenchone

1,547
4
19
34

1

Does this work only with rect/circle, or also with other polygons? – Mawg says reinstate Monica Feb 27 '17 at 10:02
2

It works with polygons too. – frenchone Feb 28 '17 at 09:43
1

looks like a good answer to me – Shanimal Nov 22 '17 at 07:57
Thank goodness! Finally a robust application that is free and open source. Finally got to do what I wanted to after a very long and unsuccessful search. Love this! – Ragav Y Dec 09 '18 at 11:19
9

If you have a complex svg (i.e. one with many objects in it), use `CTRL` `A` to select all, `SHIFT` `CTRL` `C` to convert any objects to paths, then use union `CTRL` `+` and / or combine `CTRL` `K` to merge them into a single path. – mcmurphy Jan 15 '20 at 02:10
2

I used this one, and for me its woking: https://www.ofoct.com/image-converter/svg-optimizer.html – Isabella Monza Nov 04 '21 at 21:25

accidental_PhD · Answer 4 · 2017-03-14T22:12:00.980

(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.

score -2 · Answer 5 · answered Jul 05 '13 at 23:05

-2

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>.

answered Jul 05 '13 at 23:05

ericsoco

24,913
29
97
127

11

If I understand correctly the question is about converting primitives to paths as well. Illustrator will keep rects, circles, etc so this answer isn't correct. – Pickels Jan 13 '14 at 15:25

is there a tool to create SVG paths from an SVG file?

5 Answers5

Linked

Related