38

I am seeking recommendations of a program that

  • allows creation, editing and saving of files in .svg format
  • allows standard editing including
    • drawing lines and shapes
    • filling areas with color
    • cropping
    • opening files saved (perhaps in only a few colors) as .jpg, .gif, etc. for pasting into the file being edited
  • is not limited to the creation of diagrams
  • can run standalone rather than on top of a web browser or otherwise online
  • is free or at least shareware
Improve this question
4
  • 7
    Interesting that this question was never asked before.
    – Thomas Weller
    Commented Oct 12, 2017 at 11:41
  • Not free (which is why this is a comment), but both illustrator and sketch can work with svg and have all professional features you'd expect like layers, masking, custom shapes etc
    – LocustHorde
    Commented Oct 13, 2017 at 9:37
  • 3
    @ThomasWeller Maybe because Inkscape is the very first result when you google "vector graphic editor". There even is a list of vector graphic editors above the results. Inkscape is the very first one in that list, too.
    – UTF-8
    Commented Oct 14, 2017 at 19:10
  • For which operating system?
    – unor
    Commented Oct 14, 2017 at 20:52

5 Answers 5

Reset to default
81

How about Inkscape? It is:

  • free and open source,

  • has a perfectly compliant SVG format file generation and editing,

  • can open a number of other vector formats, with the help of extensions,

  • can natively import most raster formats (JPEG, PNG, GIF, etc.) as bitmap images, but it can only export PNG bitmaps,

  • as it is a downloadable software, it runs standalone.

Sounds like it could fit, so maybe worth giving it a try.

Improve this answer
9
  • 9
    I wanted to give an addendum to the answer of Inkscape: I use it all the time for my vector use. There are a Lot of handy features and panels to edit SVG. There is even a pane where you can view the underlying XML tags and edit attributes from there. This is great to doublecheck the stacking order of elements, see what objects are included in a Group, and even add JavaScript interaction as well. I wish you luck with it!
    – Alexander Kramer
    Commented Oct 12, 2017 at 16:13
  • 3
    if your concerened about eth resulting output.. you could always run it through a SVG optimiser.. see petercollingridge.appspot.com/svg-optimiser or www.svgminify.com/ as examples
    – ShoeLace
    Commented Oct 13, 2017 at 0:45
  • 6
    @ShoeLace Note that for some sectors and companies, uploading any files to external services is considered a big no-no for security and confidentiality reasons and can very well result in you getting reprimanded or even fired.
    – Nzall
    Commented Oct 13, 2017 at 14:04
  • 2
    Indeed. Making that kind of application as a remote service is just irresponsible and user-hostile. If it really needs to be on the web (and have the nice features like being cross-platform, sandboxed), it could be a JS application that runs entirely client-side in the browser rather than asking you to upload your private data (or your client's/employer's/friend's/etc. private data) to some sketchy third party.
    – R.. GitHub STOP HELPING ICE
    Commented Oct 13, 2017 at 15:16
  • 7
    @AustinHemmelgarn regarding the creation of space efficient SVG files in Inkscape: its "native" SVGs are indeed quite fat (e.g. they include several Inkscape-custom tags), but there is an option to save "Optimized SVG" (it's another format in the Save As dialog) which produces much smaller output with a variety of options for further space saving. I've no idea how favourably it compares to external SVG optimizers though
    – Dave Jones
    Commented Oct 13, 2017 at 16:03
10

As already mentioned I would go with Inkscape if you want a full featured SVG editor with great design capabilities and powerful tools.

If you want something simpler however, are looking for a web based solution or Inkscape is not available on your desired platform there is also SVG Edit.

SVG Edit is a JavaScript browser based editor, that can be used both online or downloaded for offline use

enter image description here

It is admittedly less feature complete than Inkscape, but for simpler works it may suffice and be lighter on resources and more forgiving in terms of platforms.

There is also Boxy available for the Mac App store, Windows 10 Store, and as a Chrome App

Improve this answer
4

Any semi-decent vector editing application should fulfil your requisites (except being free). In addition to the already mentioned Inkscape, Gravit Designer is a good choice (you can use it both in the browser or as a standalone app).

Improve this answer
4
  • Inkscape doesn't require X Windows. It's multiplatform.
    – user34608
    Commented Oct 13, 2017 at 21:07
  • 2
    @BenCrowell It still requires XQuartz on macOS, which is no small bother.
    – user137369
    Commented Oct 14, 2017 at 0:17
  • 5
    @user137369: There is an Inkscape branch (osxmenu) which doesn't require XQuartz.
    – 0x2b3bfa0
    Commented Oct 14, 2017 at 14:52
  • Inkscape no longer requires X (as of 1.0), so I’ve removed that from the answer.
    – user137369
    Commented Jun 23, 2020 at 23:10
2

Just use any plain text editor. I use mousepad. SVG is just an XML file with a well defined and stable DTD, analogous to HTML. If you really want to be able to control your images, manually editing the XML is the only way to go.

Download and read the SVG specification, available here:

https://www.w3.org/TR/SVG11/

That's the online version - the download links are in the first paragraph.

To view your edits, use a simple image viewer. I use geeqie.

Alternatively, open the file with a browser using file:///path/to/your.svg for the URL. A civilized operating system will give you the option to open with a browser by right clicking on the file. Then, every time you save, click reload in the browser. This is all offline - the browser does not need a network connection to view local files.

A browser is handy, because if you make a typo, the browser will tell you where it choked when parsing your file. If you look at your text near that place there will be something obvious e.g. a missing close tag.

I use a composition cycle that works like this:

1) Copy/paste the basic SVG header and opening and closing tags - in the beginning, you can crib these from any .svg file - there are variations, and eventually you'll want to understand the differences, but to start it doesn't matter much.

2) Add some elements and save.

3) See if they look how you wanted - if not, adjust the data and/or the elements.

4) Repeat until you are happy.

Another tactic is to start with a .svg you found on the web that is close to what you want and modify it using a similar workflow. When you do this, you will undoubtedly encounter files that were created with inkscape.

Files created by inkscape are cluttered with all manner of unnecessary rubbish. You'll soon learn what is needed and what is not and be able to scrub an inkscape file with a few minutes of deletion editing.

Many .svg files from the web have the formatting removed. There are many XML tidy programs that can restore readability. I usually do it manually since SVG files are usually quite small - a single editing pass removes the clutter and restores formatting, seldom taking more than ten minutes.

The other activities you require are pre or post processing steps. I use gimp for that. If you can reduce a .jpg or .png to truly only a handful of colors, gimp's SVG export facility does an astonishingly good job. As a post processor, gimp can read your file and export it in any format you desire, and the image manipulation facilities are very complete.

What I'm advocating here is a more professional toolkit approach, in contrast to the usual consumer oriented monolithic program that holds your hand and tries so hard to prevent you from hurting yourself it prevents you from accomplishing what you want. Yes, it is harder to start. Yes, you will need to learn some new things. Yes, you will encounter some difficulties. But in the end, you will get the images you want in much smaller files. You will also acquire valuable skills and deeper understanding along the way.

Improve this answer
0

There is also OMGSVG. That link is the web front-end for testing, but it can also standalone on your pc as a Node application.
How to do this is explained on the README page on github.

This tool is for folks who want to alter the SVG with code (JavaScript programmers)

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.