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

html svg adobe-illustrator
tim picture tim · Jul 17, 2012 · Viewed 143.9k times · Source

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?

Answer

Jasdeep Khalsa picture Jasdeep Khalsa · May 10, 2017

Gimp can be used to convert SVGs with primitives (e.g. rects, circles, etc.) into a single path which can be used within HTML5.

  1. First download Gimp: https://www.gimp.org/downloads/
  2. 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
  3. Import the SVG file into Gimp with File -> Open, and the following (or similar) dialog should show up:

Gimp SVG Open Dialog

Check both the Import Paths and Merge imported paths options

  1. Then go to Windows->Dockable Dialogues->Paths
  2. Right-click on the single path which says Imported Path and you should see the following dialog:

enter image description here

  1. Click Export Path... and save this text file to a location of your choice
  2. Locate and open up this file with a text editor of your choice e.g Notepad, TextEdit
  3. Copy the text within the <path d="copy this text here" />
  4. 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

Related questions

Optimal settings for exporting SVGs for the web from Illustrator?

I'm looking to use an SVG logo for a website — to make it look great on a responsive design for all devices. But since there are issues, I want to support as many devices and browsers as possible. Load speed …

Read More
illustrator map to imagemap automatically? or is there a better way?

I have a vector illustrator file with all the counties of California as distinct paths. I need to have these counties be links to other pages online. is there a way to automatically generate an HTML imagemap from this file? …

Read More
Reversing an SVG Path

Is there a simple method for reversing an SVG path? How can I make this start at the top left, rather than the bottom right? <?xml version="1.0" encoding="utf-8"?> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" …

Read More