Take the 2-minute tour ×
Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. It's 100% free, no registration required.

So when you export an Adobe Illustrator file to SVG format, paths are encoded using the SVG path syntax.

If you look at the <path data> element, it's possible to have moveto commands embedded into a path.

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.

share|improve this question

2 Answers 2

As documented, at the WYSIWYG level, there is no functionality in AI that will implement what you're looking for, but apparently there is a way! See Phrogz comment below. Otherwise, it becomes a matter for scripting or hand tweaking (or whipping up some fancy grep!).

share|improve this answer
1  
I'd downvote, but I've no rep here for that. See my answer: Compound Paths in Illustrator export to SVG as a single path with move-to commands jumping between each. –  Phrogz Sep 12 '11 at 16:07
    
That's good to know, because it's entirely undocumented. I'll revise the answer to refer to your comment. –  Alan Gilbertson Sep 12 '11 at 22:32
  1. Create an SVG 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>
    
  2. Open this file in Illustrator. Note that there is a single element named <Compound Path> in the Layers palette.

  3. Choose command Object > Compound Path > Release. Now there are two paths selected.

  4. Choose command Object > Compound Path > Make.

  5. Save as SVG file (I've manually wrapped the output for easier viewing here):

    <?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>
    
  6. Cheer as you see a single <path> with absolute Move commands in it!

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.