Inkscape
In this lesson, we explore a branch of computer graphics called vector graphics, and its main implementation, SVG files.
There are two main types of images in computer graphics:
The main advantage people normally talk about when using vector graphics is that no matter how much they are zoomed in, they still maintain high quality, because the computer can draw the image again at the new zoom level. (Hence the scalable in SVG.)
Hover over the images below to see what happens when you zoom in on a raster image and a vector image.
The main applications that allow you to draw in vector graphics are:
But SVG files are also text files, which means you can open and edit them with any text editor!
SVG files are written in a format called XML.
Everything in XML is a <tag> that can have other <tag>s inside it,
(in which case it is closed with </tag>), and each tag can have any number of attributes
in the form key="value".
Here is an SVG file that has a width of 600 units, a height of 400 units, a circle with radius 100 and centre at (150,150), and a rectangle with a width of 250 and height of 150 with the corner at (300,200).
<svg width="600" height="400"> <circle cx="150" cy="150" r="100"/> <rect x="300" y="200" width="250" height="150"/> </svg>
You might notice that the coordinates start at the top left corner,
which means y goes in the opposite direction to what is typical in mathematics.
This is common in computer graphics, because of the way pixels are listed from start to finish in raster files.
All shapes in SVG have a fill colour for the body of the shape
and a stroke colour for the edge of the shape.
As well as the colour, additional properties like the stroke width, paint order, and sharp or smooth corners can be controlled in other XML attributes.
<svg width="600" height="400"> <circle fill="gold" stroke="blue" stroke-width="5" cx="150" cy="150" r="100"/> <rect fill="red" stroke="green" stroke-width="10" x="300" y="200" width="250" height="150"/> </svg>
But what if you want to draw something more complicated than a circle or rectangle?
Most custom shapes in SVG are made using paths,
which have their own custom mini-format for defining path data (d).
Writing path data is like giving instructions to somebody who is holding a pen.
<svg width="600" height="400">
<path d="M 120,182 C 129,175 198,165 198,164...
</svg>
Path data always starts with M x,y, which means “move-to the point x,y”.
To draw straight lines, this is followed by L x,y, which tells the pen to draw a “line-to the point x,y”.
Drag the circles in the path below to see how they relate to the path data in d.
<svg width="600" height="400">
<path d="M 50,150 L 300,350 L 550,200"/>
</svg>
To draw a simple curve, the pen needs to be given two points - the end of the curve, and a control point. The computer draws one imaginary line from the start to the control point and another imaginary line from the control point to the end. Then it draws what would happen if the pen slowly changed from following one line to the other.
(This is called interpolating between the lines.)
<svg width="600" height="400">
<path d="M 50,150 Q 300,350 550,200"/>
</svg>
Most curves in SVG are actually defined using the C command,
which is just like what we did above, but it uses two control points,
and draws two simple curves. Then it imagines what would happen if the pen
slowly changed from following one curve to the other curve.
<svg width="600" height="400">
<path d="M 50,150 C 300,350 550,200 400,50"/>
</svg>
View the above image in handles mode to see what this normally looks like in image-editing software.
One useful consequence of the way the computer makes these curves is that the curve will always be contained between the four boundary points (called the hull). View the image in bounds mode to play around with this yourself.
Of course, SVG can do much more than just draw blocks of coloured shapes.
Most of the more complex features, such as clipping, filters, and gradients,
need to be defined in a section called defs first, and then
referenced elsewhere in the SVG file by their id.
SVGs can also import external images and fonts from different URLs.
<svg width="600" height="400">
<defs>
<clipPath id="shape" … />
<filter id="blur" … />
<linearGradient id="gradient" … />
</defs>
<g clip-path="url(#shape)">
<circle … />
<rect … />
</g>
<path filter="url(#blur)" … />
<rect fill="url(#gradient)" … />
<image href="cat.png" … />
<text … > Hello! </text>
</svg>
Check out the Inkscape community gallery for some examples of how to make cool images with SVG!
Maintaining a high quality image is not the only benefit to SVG files. A lot of real-life tools can benefit from a format that contains instructions for how to move a pen across a page.
Here it is being used to reproduce the RSA-style animation made popular by tools like VideoScribe.
It is also used by a number of cutting machines to tell the machine how to perform the cut, such as
For these tools, an extra consideration has to be made about the order and direction that the pen travels. The images below look identical, but the lines have been drawn in a different order. Can you see why one of them would take longer for a machine to cut out than the other?
Because SVG is written in XML, applications can interact with it in many different ways. Here is a family tree of files that are written with XML:
One thing you might notice about it is that all the file types besides SVG are typically thought of as documents.
An important aspect of digital documents is that, as well as containing text, they contain metadata, which means extra information about the document, such as its author, where and when it was published, what language it is in, how to navigate quickly to the headings and subheadings, and a description of what it is about.
Because SVG is written in XML, it can contain all that extra information, which makes it easy for search engines to interact with it, and makes it easy for programs and scripts to manipulate it.
Here is an SVG map of the Earth. Each country is a path, and the paths contain metadata about the country’s name, continent, and flag. When you hover over each path on the map, your browser is able to display this extra information.
Because the Earth already uses a system of coordinates, all the path data can be defined using its real-life latitude and longitude values, and the map is then translated so that it starts at (0,0) instead of (-180,-180). That means that any location can be easily added to the map at its latitude and longitude.
You might notice that a lot of islands and smaller details are missing from this map. Even though SVG files can contain detailed levels of information, this information still increases the file size, and the computer still has to render all the details it is told about, even if they are too small to see. SVG files often have smaller file sizes than raster graphics, because raster graphics increase in file size the more pixels they need to define. But a map of the world with enough detail to render small countries still results in a large file. You can click here to see a more detailed map, but you might notice your browser slow down as it struggles with the level of detail in the image.
As well as maintaining higher image quality when scaled, Scalable Vector Graphics are good for sending instructions to a machine, and they can contain searchable and scriptable metadata.
This is because they are written in XML, and because they describe how the computer should draw an image, rather than being a list of coloured pixels.
Here is a nice animation showing a link between bézier curves and stars.