Is it worth learning the SVG path attribute, or should I use a tool for drawing?

Question

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?

Answer 1

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.

Answer 2

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:

3. 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.

Answer 3

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.

Answer 4

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.

Answer 5

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.

Answer 6

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

If you were asking on stackoverflow.com yes.