I am very new to the design world and I find websites such as Splitwise fascinating!
Now I want to dip my toe's in but I want to know. For more complex SVG's what do you use to build them? what is your process?
For further actions, you may consider blocking this person and/or reporting abuse
Oldest comments (8)
Well i work better with corel draw. So i just create the graphics in corel and export it as SVG. Once I copy the svg code from the saved file to the HTML document, i can easily view the svg codes and how each part of the code affects the graphics using the browser's (most preferably chrome) console.
Hmm never heard of corel draw. Will check it out! thanks for the comment!
👍👍
I use illustrator, though I’m looking for a newer alternative, possibly Affinity, although I haven’t tried it.
I also use Sketch, though mostly for layout design.
SVG’s exported from illustrator are pretty clean, but those exported from Sketch tend to be bloated in groups and class names.
Another point pro-illustrator is that you can just copy a shape and paste it into an html file, without having to save it as an svg file and then open it with your IDE.
Unlike HTML (which you absolutely should be writing by hand from the beginning so that you don't get tons of crap in the code from an editor), vector graphics (all types, not just SVG) are best started using a dedicated vector graphics editor. HTML layout is easy to follow from the code because the exact markup correlates directly to the structure it's creating (IOW, it's structured just like the resultant document will be), but the same is not true of SVG, so it's easiest to just work with it graphically.
Personally, I'm fond of Inkscape for this, but Corel Draw and Adobe Illustrator are both very widely used in this area (given the minuscule amount of design work I actually do, I can't justify shelling out the money for either of them, so I use Inkscape).
Depending on the exact type of SVG you're going for though, you might find a specific program dedicated to the particular type of image you're creating easier to use (for example, if you're doing diagrams or flow charts, Dia or Visio might be worth using as a starting point).
Once you've got the initial image, you should generally clean it up a bit by hand before using it. This brings up one of the things I like about Inkscape, namely that it lets you directly edit the SVG markup and then see the results directly without having to save the image as a file first.
I would, however, encourage you to learn to read, understand, and ideally write SVG markup directly. Having a solid understanding of how the markup itself works will make it easier to work with at a high-level too.
And Inkspace is open source, which means you support free software.
I'm late to the party here, but it depends on what kinds of graphics you need. If you need to generate complex artwork, then you will likely need an editor as others have suggested. Definitely recommend using svgomg.firebaseapp.com to clean them up.
But if you're making graphs, ui elements, etc, those can (should?) be done programmatically.
There's also a hybrid approach. Load your svg then alter it with code. This is common with :hover to change colors. Also common for dynamic icons that are modified based on context (ie a new message alert).
Use the Online SVG Editor that I'm designing:
artdraw.org/svg/app.html