Hacker News Reader

Comment by formula1 | Hacker News Reader

I am using svgs in a project now.

- The first issue was the designer Im working with didnt know how to export to svg.

- Second problem is my svgs ended up with very weird numbers and groups. Such as the main groups offset was -60, 190 then another group to dlightly compensate. Then the paths themselves compensated further.

- Another issue is "cutouts" are nonintuitive for designers and also complex to reverse when they are curves.

- Another issue is linking and styling to an external svg. Despite you can put them in an image tag, it cannot be styled this way. If you put it inside a use tag, styling externally requires targeting ids.

- anothwr issue is that they dont follow the normal rules of width/height. By default they are 300x150 and takes a bit of patience to ensure they exist as 100% width (which I assumed was default)

Other than that, I am quite pleased with the format and am expecting great things for it!

View on HN

Hand-written SVG, treated as elements of the markup (rather than an external black-box object or image), usually works well. It's easily* styled, scripted, and has good clean structure and values. There are, however, a couple of problems.

Hand-writing a complex graphic is difficult! (ex: editing coastlines on a map) Unfortunately, current WYSIWYG editors produce bloated, illogical output full of bizarre measurement schemes, unnecessary translations, and incompatible proprietary garbage - sort of like the bad old days of Frontpage and Dreamweaver.

*There are also some quirks in both styling and scripting them (as others have mentioned, height is one, another is having to use NS versions of DOM functions instead of normal ones - but only sometimes).

Maybe by the time SVG turns 21, those things will be mostly sorted out. It's still in its awkward teenage years.

An alternative to to hand-written SVG is to use a (Go) library like svgo [1] to generate the markup programmatically. More info is also at [2] and [3]

[1] http://github.com/ajstarks/svgo [2] https://speakerdeck.com/ajstarks/the-other-side-of-go-progra... [3] https://www.youtube.com/watch?v=nuDO1oQxARs

Yeah, currently WYSIWYG tools generate pretty terrible SVG. Sketch is especially awful, Adobe almost as bad, Inkscape the least but still somewhat bad. SVGO helps sometimes with this, but it also sometimes chews up your document and spits out an empty SVG.

To my eye Inkscape was the worst, while Illustrator and Sketch were both OK'ish. Inkscape can create pretty complex transformations on groups that are not necessary. It can also easily screw up integer coordinates and somehow add fractions to them. It's a real shame. On one occasion I rewrote an SVG file generated by Inkscape and made it literally 20 times smaller. Something like from 200k to 10k. Never used the poor thing again.

I read a Tweet where he claimed Affinity Designer had cleaner SVG then Illustrator . . can anyone confirm this.

I don't have Illustrator, but here are two SVGs generated by Sketch and Affinity Designer:

Sketch: http://pastebin.com/A1QRW6fT

Affinity Designer: http://pastebin.com/KxTgGQkN

I'm in the middle of building my first production app using SVG, and I've had less trouble from Affinity than Sketch.

Yes, it is a real shame, because Inkscape in itself is really awesome. For me the best vector drawing tool available ...

But I also gave up trying to use the output for scripting. It would have been a way straight to madness ...

Save as "optimized svg" helps a lot as a first step.

Discovering this has helped me a lot. SVGO is great, but sometimes it breaks my SVGs. Saving as Optimized SVG from Inkscape has never caused problems and the file sizes are very close.

Reply on news.ycombinator.com