Scalable Vector Graphics are here, and they aren’t going away – so learn how they work with an excellent Free Software tool.
Why do this?
Discover a simple, multiplatform graphic editor that is a great self-training tool.
Learn a graphic format that is finally ready to take over the web.
Add images to your website that will look great at any size.
Vector graphics are digital images that computers render by executing drawing statements, instead of just copying huge arrays of coloured pixels to the screen. The second method, called “raster” graphics, is the one used by traditional image formats like GIF, JPEG and PNG. The first part of this tutorial explains how vector graphics work and what their advantages are. The second presents a basic, but ubiquitous open source editor to produce and study these graphics.
So what are vector graphics anyway? Have you ever considered how JPEG digital photographs work? Apart from metadata like timestamps and author names, such files just contain an ordered list of all the points (pixels) that compose the picture, each complete with its colour and coordinates. This structure is simple and has one big advantage but even bigger drawbacks. When you use pixels, you can describe any image, from portraits and charts to tropical landscapes, with as much detail as you want. To add more detail, just add more pixels.
Of course, since compression can’t do much on images without regular patterns, this greatly increases the file size, which is really bad in this wireless age of often slow connections. Besides, no matter how many pixels a raster image contains, they are never enough to avoid deformations when the image is zoomed, or displayed on screens with different form factors.
Vector graphics completely avoid these problems for all images that are drawings rather than “photographs”: this includes charts, diagrams, logos, comic-like illustrations and most clip art. Vector graphic files are lists of textual instructions like “let’s have a blue five-pointed star on a red background, in the right half of the image, with a height 80% of the total height”.
See the trick? A set of descriptions like that couldn’t care less about the size and form factor of the screen: if executed properly, it will always produce a 100% sharp image, everywhere. Want 100 stars instead of one? Just repeat that one command 100 times. And you get all this from a tiny file that only contains plain text, which can be generated by software.
Vector graphics were already great for non-photographic images on the web when they first appeared, more than a decade ago. The arrival of HTML 5, even on mobile terminals, has made them even more interesting. The reason is that HTML 5 pages and applications can directly embed vector graphics inside themselves (it’s all text, remember?) and also quickly manipulate them in real time, reacting to user input, with JavaScript.
The first thing to do in SVG-edit: study its simple (but important) preferences panel and test it until you find the combination that works for you, because it can greatly impact usability.
Your first vector graphics editor: SVG-edit
The only format we need to care about in this tutorial is called SVG, that is Scalable Vector Graphics. While the undisputed king of SVG design with free software is Inkscape, here we present another editor, called SVG-edit (https://code.google.com/p/svg-edit).
We are doing this because we feel that SVG-edit is a better application for beginners to learn about vector graphics, and also flexible and “web-ready” in ways that Inkscape cannot match.
SVG-edit has far fewer buttons and menus than Inkscape, but still enough to do useful work. You can quickly practice all the essential operations without getting confused by too many options. At the same time, since the user interface has the same general structure as Inkscape, it will prepare you to use it.
From a technical point of view, SVG-edit is a mix of HTML pages and JavaScript code that runs in any modern browser. There’s nothing to install; just load the web page that contains the stable version at http://svg-edit.googlecode.com/svn/branches/stable/editor/svg-editor.html.
To begin with, it is very easy to embed SVG-edit in your own website with one line of HTML code like this:
<iframe src=”http://svg-edit.googlecode.com/svn/branches/stable/editor/svg-editor.html” width=”750” height=”600”/>
You can use SVG-edit without internet access. Just download the current version from https://code.google.com/p/svg-edit/downloads/list, install it on your local network, and all your relatives, students or colleagues will be able to use it, as long as you also made a local copy of the JavaScript libraries that SVG-edit needs, and patched its source code to point to them.
This simple, more or less self-contained architecture also makes it easy to integrate SVG-edit in desktop applications. The most popular example is the HTML editor BlueGriffon, which uses SVG-edit for vector graphics design.
This is what SVG-edit looks like while you work. Notice the context-sensitive top toolbar, the many handles available to move an object and the available gradients.
Let’s draw with SVG-edit
Being an in-browser application, SVG-edit is slower than a real desktop application. Keyboard shortcuts for certain functions will be available only if your browser hasn’t already mapped them to some of its own functions, and some combinations of size, shape and zoom level of the browser window in which SVG-edit runs may make some buttons in the top bar overlap. You may, however, change the size of all the icons in the program configuration panel, accessible from the top-left main menu.
The first time you start this program, it will ask you if you want to store preferences and SVG content on your computer. Accepting is, of course, the only way to not restart from scratch every time.
The user interface of SVG-edit is relatively simple. The central drawing area (the canvas) is framed by an edge that hosts one set of functions per side.
At the top there is the main menu, with some “always-on” buttons and a context-sensitive toolbar. Two of the constant buttons are for Undo and Redo; there’s one to edit the XML source, and another two to show or hide the drawing grid and the wireframe structure of the graphics.
The bottom area is mainly devoted to colour management. The buttons for all the main tools (cursor, pen, shape library, insertion of text or circles, rectangles and other geometric figures) sit on the left side. Since they are quite intuitive, and equipped with tooltips, we won’t spend much time describing them. Finally, the right-hand side hides the menus for layer management, which we will cover in a moment.
It is possible to load SVG graphics, or include raster images, in the current canvas. Saving your work in either SVG or PNG format is also possible, but works a bit differently than in native desktop applications. When you tell it to save or convert the content of the canvas, SVG-edit will open it in a new tab of the browser. You will have to save the content of that tab, as one file with a .svg or .png extension, by yourself.
Basic operations
In vector graphics, simple geometric objects are defined by their formulas and/or core properties such as radius and centre position for a circle, number of points for a star and so on. To create such objects, click on the corresponding button on the left, then check the drawing parameters that will appear in the top bar. If you don’t like their default values (for example if you want a star with 10 points instead of 5), change them as you wish, then drag the cursor on the canvas, to define the area where you want them to appear. SVG-edit will do the rest.
Depending on the version you use, and on how you configured it, SVG-edit may also offer some ready-to-use vector clip art when you click on the library button.
Text? In SVG-edit it’s just another object. Click on the “A” button, change the default face, size and so on in the top toolbar if necessary, then place the cursor where needed, and type.
Once you have created objects, you can associate hyperlinks to them. You can also move and resize objects as you want just by dragging the whole box that appears around them when they are selected, or any of its corners. The main handle on the top of that box is used to rotate the object. If turning that handle isn’t precise enough for you, type the rotation angle you want in the top toolbar. If your goal is relative alignment of objects to one another, use the alignment menu on the right of the top toolbar.
The stamp button is used to clone (only one clone per click, unfortunately) the current object. To move an object from one layer to another, select it and then choose “Move Elements To” in the Layers panel.
There are two ways to do it: the lens on the left enlarges whatever was selected until it fills the whole canvas. The “zoom level” menu at the bottom enables you to zoom in (or out) in more gradual steps.
Please note that we have used the term “object” in the most possible generic sense here. In fact, any group of objects can be bundled to form a composite object. The button that groups all the selected objects is the one with the two overlapping rectangles.
Layers are essential in a vector graphic editor, to avoid errors and work faster, without losing track of some object. Remember to name your layers properly!
Layers
Using layers in vector graphics is a must, in at least two very common cases. One includes all the times you end up with so many objects that having them all as one bundle makes it hard to see or select the one you want to edit in any given moment. Defining more layers, and placing only a few objects in each of them makes you work faster, and is also safer, because only the objects in the current active layer are editable.
The other reason to use layers is when you need animated images, or images in which some group of elements cover other groups only partially.
When you drag the “Layers” vertical label on the left, SVG-edit opens the Layers Management boxes shown left. As with the rest of the interface, the buttons here are simple: they create, delete, name or reorder layers as you wish. One bit of advice: always use the naming function to give all your layers descriptive names. You and any other future editor of your graphics will be grateful. If you need to change the way in which several objects inside the same layer overlap, just select the one you want to place on top (or bottom) and click on the stacking buttons in the top toolbar.
The power of scalable vector graphics for the web
Version 1.0 of the SVG standard was published in 2001, but remained largely ignored for years. The reason is simple: there were very few applications that could create such files, and even fewer browser plugins to display them. This situation only started to change in 2008, when Firefox and Safari gained native SVG support.
Today, SVG isn’t yet fully supported as well as a 14-year-old open standard really should be. However, it is already usable for a bunch of very cool and useful applications.
What happens when, thanks to SVG, all the text inside all the graphic elements of a web page is actual plain text, instead of bunches of pixels? Easy: search engines can finally analyse that text too, without errors and with the same accuracy as they already do with the page content. You can place a long, complex explanation exactly where you want in a graphic, and they will still be recognised as food for their indexes by Google and friends.
At another level, when combined with CSS (Cascading Style Sheets), SVG can give websites backgrounds and decorations that look consistent at any resolution and with any kind of screen, because they can be redrawn on the fly.
The last SVG cool technique we suggest that you learn, after you have mastered the basics, is sprites: single files that contain many independent graphic elements, formatted in a way that a browser can easily extract and use each of them separately. Sprites can make the rendering of complex web pages much faster, and can be used to create simple animations.
Object groups, crisp lines, rotated text… here’s an example of some of the functions of SVG-edit.
Paths and path editing
Sometimes there is no combination of straight lines and geometric shapes that will exactly draw the object you want. The solution to this problem is to convert lines to paths, or draw them from scratch. Paths are combinations of short elementary segments that can be either straight, or sections of regular curves expressed by mathematical functions. Paths can be built and edited in several ways. You can draw freehand and then convert the result to a path, for example. The curved segments of a path may be modified by dragging their constituent nodes.
When you click on the Path tool in SVG-edit, the top toolbar will add fields to change the coordinates of each “node”, which is a junction of elementary segments. Another path operator that deserves explanation is the one for “linking control points”: this expression indicates the modification of two segments that connect at the same node (the control point) in such a way that they both have the same tangent in that point. The practical effect of this operation is to make that part of the overall path look smooth, without apices or other discontinuities.
Colours and gradients
Colour assignment in SVG-edit works pretty much like in any other basic graphic editor. You can define the fill colour and the border colour of each object from a predefined palette, or by typing a valid HSB or RGB value in the associated input box. To make this change, you must click on the bucket icon first; the eye dropper button changes both the active filling and line (stroke) colours of the current object(s).
The funkiest colour-related functions of SVG-edit are the ones that”mess” with colours: you can fill an object with a pattern varying between two colours, from one extreme to the other (linear gradient) or from centre to borders (radial gradient). The panels to do this open when you click on the bucket icon at the bottom of the screen. The Gaussian Blur input box on the top, instead, applies a user-configurable Gaussian blur to an object, which is Math lingo for “make this object look as if we were seeing it through thick fog”.
Under the hood, all SVG graphics are plain text like this, that you can easily study or tweak with any editor – check for yourself.
Use the source!
The great power of SVG graphics is accessible from the Show Source button of the main SVG-edit toolbar: you can see and edit, or just copy and paste in other editors, the whole source code of the current drawing. We strongly suggest that you use this feature to look inside every SVG graphic you draw by yourself, or find online. Even if you are 200% sure that you will never want or need to edit SVG sources by hand in your whole life, looking at that code (which is verbose, but much easier to understand than you may think) will teach you more about vector graphics than thousands of mouse clicks.
Is it possible to extend the functionality of SVG-edit? Yes, of course. You can add buttons made of SVG graphics to the left or top toolbars of SVG-edit, and bind them to generic JavaScript code, saved in the SVG-edit sources, or (much better) in a separate file.
Advanced configuration
An extension saved in a single JavaScript file, placed in the extensions subfolder of the SVG-edit installation, will be loaded if you add the name of that file to the URL of the editor, as in this example:
http://example.com/my-svg-edit/svg-editor.html?extensions=my-extension.js
Calling SVG-edit in this way is extremely simple. However, it disables all the other extensions that the program may have otherwise loaded. Depending on your needs, this may be a bonus or something to avoid at all costs. Luckily, there is a way to load only the extensions you want out of those placed in the extensions subfolder of SVG-edit: list them in the array of the same name that is defined in the source file called svgedit.compiled.js.
Other options, like the default size and background colour of the canvas, can be set in two ways. You can add all of them to the URL:
http://example.com/my-svg-edit/svg-editor.html?dimensions=800,600&&initFill[color]=FF0000
or write them in a file called config.js, in the root folder of SVG-edit, inside a JavaScript hash called setConfig:
svgEditor.setConfig({ dimensions: [800, 600], initFill: { color: ‘FF0000’ } });
What to read next
The best sources to learn the insides of SVG and understand its full potential are, in our humble opinion, one website and one book. The website is the SVG home page (www.w3.org/Graphics/SVG), which hosts the official specification and other useful material. The book is SVG Essentials, Second Edition, by JD Eisenberg & A Bellamy-Royds, published by O’Reilly, 2014.
If you want to extend or customise SVG-edit, go to the official wiki (https://code.google.com/p/svg-edit/wiki) and read the pages titled “Extension Docs” and “Config Options”. The first has a simple, but complete example of how to write an extension. The second lists plenty of options to make the program work just like you want.
Finally, there’s one application of SVG for the web that we haven’t covered here but that deserves a whole tutorial: embedding interactive, spreadsheet-like charts in web pages. Visit http://pygal.org to see what we mean.
From Linux Voice issue 14. Click here to subscribe for more top-quality Linux learning every month!