Is there an advantage of manually creating the graphic with the path element and d attribute (I guess with the help of math?), over using a tool like Inkscape to draw the graphic? Does Inkscape generate more inefficient SVG code?

6 Answers 6


Well, there are two schools here....

  • Ask a print designer if he/she can write postscript code and they'll laugh at you. Print designers have never been interested in learning how to manually code a postscript file for output. They rely entirely on WYSIWYG editors (Photoshop, Indesign, Illustrator, et. all). So the answer would be an emphatic no.

  • Ask a web designer if he/she can write markup or code to create a web site and you'll generally here a "yes". Most WYSIWYG web editors aren't as proficient as a human. Sure they can be faster, but they aren't always as thorough or detailed in some areas. So many well-versed web designers/developers prefer to manually create markup/code. So ask this group and you'll get a general yes.

Now, whether or not directly writing svg code is valuable to you is another matter. I, personally don't give a hoot how the SVG code is written provided it displays as I expect. I also know that I can use a WYSIWYG editor, then manually open the svg on a text editor to "tweak" if needed. So I don't know, and don't care to know, all the ins and outs of svg code. I learn as I need to.

  • A benefit to writing your own svg would be control. Writing manually you can often be far more detailed and structured than any automatic method ever is. See the web bullet above. If you are the meticulous type, you may find a great deal of satisfaction being able to construct svg graphics from a text editor.

  • A deterrent would be time. It is often much faster to use a WYSIWYG editor. Or use the editor then go in and manually alter the svg code.

So it's really your call.

As for benefits to others (employers/clients, etc) that's hard to say and would depend a great deal on your proficiency and speed. If you can create a manually written svg graphic in the same time it takes to open Illustrator/inkscape draw and save, then it may be valuable to some third party. However, if it takes you two or three times longer to write the code, well, I don't know anyone that wants the same thing at twice the price.

  • Interesting point of view. A third way is the way of the developer: SVG is a valuable kind of output for applications because is accurate and simple to generate (and the answer would be an obvious yes). Commented Feb 18, 2016 at 22:59
  • @PaoloGibellini yeah that was kind of what I was alluding to in the "web" bullet. If you want absolute control, there's certainly no better method - just like with markup.
    – Scott
    Commented Feb 18, 2016 at 23:06
  • I agree, but could be interesting even the distinction between the web developer, who uses SVG in a specific context (as images in the web page) and the developer, who uses SVG as output of an elaboration software (as diagram or as element to be put into a report or a research). Commented Feb 19, 2016 at 17:12

SVG isnt terribly hard to write by hand. Its a bit overly verbose for my personal taste, but thats besides the point.

Depends on what yo do

There are several reasons to know how to write a vector file manually.

  1. You have access to some data, and you need to be able to open it in a graphics editor. Dumping the data into SVG, EPS or DWG is relatively easy. You can then process it further in any application.

    This can make you incredibly many times more productive in some instances. But you can never attain productivity if you never bother to learn the format. If your a programmer you definitely should learn for this reason.

    Example question and usecase: import-vector-data-into-illustrator

  2. Your doing something your editor does not do well. There are still things that are easier to do in nongraphics editors. Most notably mathematical typesetting, but sometimes other things like custom halftone generation etc etc.

    One big SVG usecase here is generation of CSS for some interactive use. Or preparation of svg animation. But its not limitted to this only. In many cases a for loop or a simple find and replace, or a few text copypastes can do wonders that would be extremely tedious to do by hand. Being able to compose nested transforms can be used for fractal generation in a way that would be a nightmare in your GUI.

But if you know how to do this then all sorts of weird reasons crop up. Such as:

  1. You need to draw a picture but all you have is a terminal. Besides your descring how a sequence happens so being able to read what I did is a bonus. Example of this kind can be found Here

In General

For most users it is not meaningfull to learn. So no. But it does not hurt to know this so you might spend a few weeks on the subject if you find it interesting. It might pay off bigtime.

Admitteely the need does not raise very often even for me.

  • While valid, your first point is not exactly what I would call “manually”. The important distinction to make here is between generating paths manually and having the knowledge that would be required to generate paths manually. The latter is what is important.
    – Wrzlprmft
    Commented Feb 19, 2016 at 5:43
  • In order to do something automatic you need to do it manually up to some point @Wrzlprmft. So you would probably do 10% manually and then wrap the rest in a loop. Doing manually is the sketching of automatic. And note the user is asking learning how to do it you begin manually in all cases.
    – joojaa
    Commented Feb 19, 2016 at 5:45
  • Not necessarily. I automatically twiddled with Bézier curves a lot, but I never programmed one entirely manually. For my numerics course, I once programmed a Bézier renderer, but when tasked to test it with some data, I got it from Inkscape straight away.
    – Wrzlprmft
    Commented Feb 19, 2016 at 5:52
  • Sure, bit different usecase, but you dont exactly need to go that deep in svg. You still need to populate the points its comparable to search and replace so not really manual even when using a text editor. So in many cases automatic might mean doing search and replace on your data dump.
    – joojaa
    Commented Feb 19, 2016 at 5:55
  • What im getting at is that there is not much that is entirely manual on a computer. YMMV, as far as im concerned everything is the same.
    – joojaa
    Commented Feb 19, 2016 at 5:58

To answer your literal questions:

Is there an advantage of manually creating the graphic with the path element and d attribute (I guess with the help of math?), over using a tool like Inkscape to draw the graphic?

Very rarely. I usually never use WYSIWYG tools, but for designing graphics, I do. Furthermore, you can tweak node positions and similar manually from Inkscape’s interface if you want to.

However, knowing how you would generate paths manually can be very valuable:

  • Knowing what happens under the hood helps you to better understand what you do when using WYSIWYG tools. There is a strong relation to: Is math needed for graphic design?. For an example that is directly about the mathematics underlying curves, I would like to refer to this answer of mine.

  • If you knowing how you would generate paths manually, you also know how you would manipulate SVGs automatically, i.e., with a program. Joojaa’s answer already gave some good example for this.

Does Inkscape generate more inefficient SVG code?

Yes. Inkscape’s code is not aimed at being small. There are specific tools to reduce your SVG’s file size, but they can only go so far, because they do not know what is important. If you need to go further for some reason, you have to manually “golf” your SVG, see this answer for an example. Still, if you do this, you will usually start with a WYSIWYG-generated SVG and not from scratch.


The answer is both. That is why both options exist.

I don’t mean that some graphics are made in a drawing app and some made with code, I mean that with every graphic you create, you have these tools ready:

  • pen
  • vector drawing tool
  • UTF-8 code editor

… because that is the SVG toolkit. And generally speaking, you use them in that order.

For each graphic you create, you might use 99% drawing and 1% code, or 10% drawing and 90% code, or 50:50. But if you want to make the best graphic you can make, it is highly unlikely that you will use just drawing or just code.

The code part may just be optimization, or it may be animation, or it may be taking a simple graphic and creating a complex one with rotations, or it may just be checking to make sure you didn’t accidentally create an SVG that just has an embedded bitmap in it. But ultimately, you are creating and publishing code, so you want to at least sign off on what you are shipping.

And on the other hand, if you want to make an interesting graphic that has some art in it, some life to it, you will gain a lot by using your eyes and visual cortex to at least create a first draft of your final graphic. You may want to import clipart as a starting point, or use previously made graphics as templates. These and other tried-and-true vector graphics production methods don’t get thrown out the window because SVG is stored as a text-editable XML Web document. The XML document is an added feature for vector graphics production, not a replacement for drawing.

In short: use the whole toolkit. Don’t tie one of your hands behind your back.

  • Well actually not really, maybe, or not quite. The reason you have human readable formats is because it makes debugging and programming easier. It was never originally meant for them to replace software. But over the ages the formats started to live a life of their own and became something that the software's couldn't match up with. They became too flexible for GUIs and turned into sort of descriptions that could be used too broadly for the GUI side to keep up. So markup was meant to be good fore the original developers but in the end they surpassed their original purpose.
    – joojaa
    Commented Feb 19, 2016 at 20:27

Here is a page with a bunch of tutorials in SVG, one of them about Paths.

I used it to draw a lot of circles with the help of a program, and to my surprise, there is a core circle definition in SVG which is much more simple, than what Inkscape produces when I draw them by hand.

But Inkscape was fine in reading that format and drew what I expected. Just on saving the file it added its own boilerplate.

So I would recommend to learn from such tutorials and not (just) from the SVG inspector view inkscape offers.


As you are asking in the Graphic design forum, the answer is no.

If you were asking on stackoverflow.com yes.

  • Although I think that's the answer you would get if you asked those two communities what they themselves do/would do - I don't think that is the answer to the question.
    – Cai
    Commented Feb 19, 2016 at 9:15

Your Answer

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.