5 ms·

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 wit

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!

microcolonel 10y ago
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.
- mojuba 10y ago
  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.
  - taivare 10y ago
    I read a Tweet where he claimed Affinity Designer had cleaner SVG then Illustrator . . can anyone confirm this.
    - pault 10y ago
      I don't have Illustrator, but here are two SVGs generated by Sketch and Affinity Designer: Sketch: http://pastebin.com/A1QRW6fT http://pastebin.com/A1QRW6fT Affinity Designer: http://pastebin.com/KxTgGQkN 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.
  - hutzlibu 10y ago
    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 ...
  - mixmastamyk 10y ago
    Save as "optimized svg" helps a lot as a first step.
    - discreditable 10y ago
      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.
Falkon1313 10y ago
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.
- ajstarks 10y ago
  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 http://github.com/ajstarks/svgo [2] https://speakerdeck.com/ajstarks/the-other-side-of-go-programming-pictures https://speakerdeck.com/ajstarks/the-other-side-of-go-progra... [3] https://www.youtube.com/watch?v=nuDO1oQxARs https://www.youtube.com/watch?v=nuDO1oQxARs

microcolonel 10y ago

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.

mojuba 10y ago
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.
- taivare 10y ago
  I read a Tweet where he claimed Affinity Designer had cleaner SVG then Illustrator . . can anyone confirm this.
  - pault 10y ago
    I don't have Illustrator, but here are two SVGs generated by Sketch and Affinity Designer: Sketch: http://pastebin.com/A1QRW6fT http://pastebin.com/A1QRW6fT Affinity Designer: http://pastebin.com/KxTgGQkN 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.
- hutzlibu 10y ago
  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 ...
- mixmastamyk 10y ago
  Save as "optimized svg" helps a lot as a first step.
  - discreditable 10y ago
    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.

Falkon1313 10y ago

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.

ajstarks 10y ago
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 http://github.com/ajstarks/svgo [2] https://speakerdeck.com/ajstarks/the-other-side-of-go-programming-pictures https://speakerdeck.com/ajstarks/the-other-side-of-go-progra... [3] https://www.youtube.com/watch?v=nuDO1oQxARs https://www.youtube.com/watch?v=nuDO1oQxARs