1

Working with SVG files, exporting from Illustrator CS6 Extended.

https://jsfiddle.net/ustn9zp4/

The SVG is ok but the main thing is that I want to change the "d" value, to be more like this:

d="M0 0L0 18.8 141.8 4.1 283.5 18.8 283.5 0z"

Trying to optimize it as much as possible, not sure how to do it. Will be thankful if someone will point me how to do that.

Madizm
  • 381
  • 1
  • 3
  • 9

2 Answers2

4

There are several optimizations possible, depending on your path data. Duopixel's answer is the simplest and most effective size reduction. I'd accept his answer. But here are some other transformations you can apply to path data that may help. You'd need to try all these variations on a per-command basis and see if they save a byte or two:

  • For a polygon/polyline, omit the initial L; it's implied after a M command, and may save a byte if your first X coordinate is negative.

    Old: M0,0L-7,10
    New: M0,0-7,10
    
  • For a polygon/polyline, replace horizontal and vertical segments with H and V commands.

    Old: L10,20 10,30 20,30
    New: L10,20H30V20
    
  • For most commands, replace the absolute version of the command with a relative version. Depending on your number values and point variation, it may result in smaller numbers (a few bytes saved).

    Old: L120,200 127,208
    New: L120,200l7,8
    
  • For cubic C and quadratic Q curves where the 'handles' are mirrored across the point, replace with a shorthand (S and T) version.

None of the above are available as export options out of Illustrator (though depending on the version it may do some by default). They generally require custom code analysis of the path data. To this end, you may be interested in the svg-parser JavaScript library. I wrote a little one-off function that produces path data from the parse results; by manipulating the parse results yourself and repeatedly calling this you could implement the above.

Phrogz
  • 296,393
  • 112
  • 651
  • 745
3

In the save dialog select more options, then choose 1 decimal place.

Illustrator settings

methodofaction
  • 70,885
  • 21
  • 151
  • 164