How to Create SVG File Correctly for drawSVG?

[benjino]

I can't find anything on how to create the SVG file for drawSVG strokes. I have it in Illustrator, I know how to output SVGs, but the file code is different from what your tutorial shows. What is the way to setup your SVG file from Illustrator?

See the Pen vJByKz by benjino (@benjino) on CodePen

[mikel]

Hi ,

 

I´m not sure what your problem is.

 

Perhaps this comment could help:

 

Otherwise it would be great to see a reduced CodePen with your SVG.

 

Kind regards

Manfred

 

[benjino]

I added the pen of my SVG. It was saved at SVG from Illustrator. Illustrator > File > Export > Export as…

[Carl]

Thanks for the sample SVG.

 

The issue isn't how you are saving but how you are creating the shapes.

DrawSVG can only animate strokes. The artwork you are creating are paths filled with solid colors but they have no stroke.

 

I added a little css to give each path a stroke so you can see what is happening

 

path {
  stroke:red;
  stroke-width:1px;
}

 

and just a little TweenMax tween to animate the stroke of every path

 

TweenMax.to("path", 3, {drawSVG:0, repeat:10, yoyo:true});

 

 

See the Pen brbBaN?editors=0110 by GreenSock (@GreenSock) on CodePen

 

[benjino]

Ok, got it. I see what is different. I need to recreate these as strokes. Thanks.

[PointC]

When exporting from AI, I find it much easier to copy the code rather than do a full export/save. When you click the 'export as' button you'll get to the final export screen options which will show a button that says 'Show Code'. Click that and copy the data for direct pasting into your code editor. Just my two cents worth. 

 

Happy tweening.

[benjino]

I updated the graphic to be strokes, not a fill, and updated the pen with the new SVG code and nothing is happening. I've tried using rect as the element, currently it's path, and not sure which to use. I think path?

 

Another thing, I'm not super experienced with codepen and am wondering why there is no Run button in my pen. Is that a feature that comes with a Pro level codepen account?

[mikel]

Hi Benjino,

 

It is a problem how the SVG, the path is generated. I´m not familiar with Illustrator - I work with Inkskape:

rects, stroke-color, no fill, at least all converted into paths ...

 

Then it could look like this:

 

See the Pen KvPxdx by mikeK (@mikeK) on CodePen

 

Hopefully a little step forward.

 

Mikel

[benjino]

Thanks for your input Mikel. I've finally got something working from output to SVG. I'm learning about SVG code as I go here, so far with SVGs I've only ever output them for web as static (non-animated). My artwork had to be completely reworked.

1. Initially I had fills from creating outlines from typeface, of course those don't work at all.
2. Then from the fills I deleted the inner outline of the inner & outer outlines, and used the 'Align Stroke to Inside' as the stroke which created 'path' elements in output to SVG code. Still didn't work. Must not have liked Align Stroke to Inside.
3. Then I completely reworked the artwork with stroked shapes (no fill) with Align Stroke to Center, and that finally works. I created each stroked shape the same way, however the smallest shape is a 'path' and not a 'rect' for some odd reason. In the output to SVG it made the two bigger shapes 'rect' elements and the smallest one a 'path' element. Quirky. Is there a 'path' to 'rect' element converter? I can choose "rect, path" as the elements but I'd rather have the smallest shape a 'rect' as well.

Anyone have this problem with output? Is there a problem with it the way it is in the current pen?

 

Also, why don't I have a Run button in my Codepen account? It will show here in this forum, but not on the pen in Codepen. Just refresh the page to see the animation again for the time being.

[mikel]

Hi Benjino,

 

Run-button:  go to SETTINGS, Behavior, Auto-Updating is to disable ...

 

And good luck for a suitable SVG.

 

Mikel

[benjino]

How do you change the position of the start point of each shape? Any clue on how to do that?

 

I changed the drawSVG to 100% 100% and can get it to go backwards, but how do you pinpoint where you want to have a starting point? Is there a way to do that?

[PointC]

Aligning strokes to 'inner' works in AI, but is not part of the SVG spec yet. That may appear in SVG 2, but we have to wait and see. For now, all SVG strokes are middle aligned. That is something to keep in mind when creating artwork. Say, for example,  you have a 100x100 SVG in which you create a 100x100 rectangle. If you now add a 10 unit stroke to that rectangle, only half of it will show. It'll be aligned to the middle so the outer part part will be cut off by the SVG viewBox effectively giving you a 5 unit stroke.

 

As to why your last rect was converted to a path before export - I'm not sure. If you added something to the rectangle in AI that won't work with a rectangle, AI may have automatically converted it to a path for you at export. Normally, you can right click any primitive shape in AI and choose 'Make compound path'. Paths are sometimes more desirable to work with than primitives. That being said, creating rectangles is quite easy in the code editor - no real need for vector software. You just need an x/y start point and a width and height. (& a radius in some cases). It's easiest to copy and paste one of the existing rectangles and simply change the attributes to what you need.

 

Starting point is a different matter. Rectangles will start drawing at their x/y origin. Paths will depend on how you create them in AI. One way to come up with interesting start points is choose a different starting percentage with drawSVG and draw to completion. Here's a fork of your pen with that option:

See the Pen mMbaEm by PointC (@PointC) on CodePen

Hopefully that answers some of your questions and keeps you moving towards your goal. Happy tweening.

[benjino]

Thanks Craig, that's helps a lot!

[benjino]

rect is clearly less code and that's cool, but is there any difference with rect or path, is one better than the other for performance, cross-browser compatibility, etc.?

[PointC]

I don't think you'll see any performance difference either way. Paths are nice because they're ready to morph or create a motion path. But even if you have primitives, you can easily turn them into paths with the MorphSVG plugin and its convertToPath() method.

 

My personal recommendation would be to do whatever makes the most sense to you right now. Once you get more comfortable with SVGs, you'll find a workflow that you like and start developing personal preferences for certain animations. When your SVG animations start to get complex and you're worried about performance, you'll probably start looking at canvas.

 

Happy tweening.

[AppicSandbox]

I also struggled with this issue, but it definitely is possible to use an Adobe Illustrator exported svg right away. I also used text to generate my paths in Illustrator via converting to 'outline'. Then i just use tweenMax to select the svg 'path' classname 'cls-1', and not the svg itself. See pen (changed classnames 'cls-1' to 'appicLogoPath'):

See the Pen OvPXaJ by appicsandbox (@appicsandbox) on CodePen