SVG — a dream has come through

I have been using computers since 1981. I had a Sinclair ZX-81 “computer” which had 1Kb of RAM (!). Programming it was fun, but you had not all the control your imagination could dream of (of cause).

Sinclair ZX-81 with 1Kb of RAM (from 1981)

All the time I have been working with computers I have always enjoyed generating graphics. For instance with my TI-99/4A computer, graphics was almost non-existing. You could not manipulate a single pixel so you had to do many crazy things trying to draw something on the screen.

The Texas Instrument 99/4A personal computer

Each character in the Ascii charset had a unique representation in a 8 x 8 matrix. So that was a way to create drawings: redefining a grid of chars and placing the characters in the right place.

This is an example of creating graphics by redefining an ASCII char on TI-99/4a

It was hard work — you would often first drawn the graphics on a paper with a grid on, and then convert the drawing to a set of hexadecimal values, hoping that you could create the drawing with the available ascii characters.

It was useless in other places than in that specific domain.

Domain specific methods

At that time many different computer systems existed. I remember that almost every month a new computer entered the scene. Personal computers was riding on a wave and each new computer had its own idea of how things should be. Many domains started forming, where each one was a closed world — even things like the character sets was not 100% shared.

Graphics was no exception. Even if concepts like a circle, an ellipse or a line was a generally accepted concept, you could not expect each computer to have commands in its OS or programming language to support a command like:

<circle cx=”0" cy=”0" r=”123" fill=”red”/>

Usually you had only an option to create a pixel based drawing. It would often not be using commands like:

var line = new Line(0,0,200,200);

You probably had to do a lot of “pokeing” data into RAM. Often in unfriendly raw data format like hexadecimal or octal values.

One of the most popular computer of that time, the Commodore 64, had the most ugly pattern where you did a lot of poking around and then suddenly things happened.

Commodore 64 BASIC BASIC language — pretty ugly

The answer came with the web

Jumping ahead to current time. We now have a limited number of computer systems (compared to the 80-ties). They all share a lot of methods. One of the most important is the web.

With web the need to draw on the screen was finally standardized. Through HTML canvas and SVG elements you now have a uniformed way to manipulate graphics using javascript in the browser.

I prefer SVG

Personally I prefer the vector based SVG path. Scalable Vector Graphics is a successor to VML (Vector Markup Language). VML was actually implemented by Microsoft, as they needed a way to make scalable vector graphics for their Office package. They had high goals when they wanted you to be able to view office documents in the browser, which could include graphics. They implemented VML for that, but W3C decided to go for a “version 2” of VML called SVG.

SVG shares many things with the de-facto standard language for printed graphics: PostScript. PostScript which was created by Adobe and which is also used inside PDF. PostScript is actually a programming language by the way.

The web was ahead of desktop based methods

As the web started to rule the world, desktop based apps are now starting to accept that. They start to focus on what is going on in the world of www. That has now opened a way for desktop systems to start being a more conform standardized collection of systems.

That is my dream come through! SVG is now a valid path for graphics on multiple platforms and in multiple applications. I find that now you can work with SVG anywhere. In the browser, in desktop apps and even within various coding environments. I can finally create a circle which can be used in a browser, in a desktop drawing or for a print.

An example: Generate beautiful SVG polygons

I love math based graphics. So I created a “pen” — an online web application which can generate random polygons using HTML, javascript and SVG.

Screenshot of my pen “Generate beautiful SVG polygons” at CodePen

The beauty of it is not only the various polygons generated, but in fact the option to get the generated SVG which can then be imported into desktop apps like Affinity Designer or Adobe Illustrator for further manipulation.

In my pen you can click “Get SVG” which will open a new tab where you can select and copy the SVG which is needed to draw the polygon:

The not so pretty window allowing you to copy the SVG needed to generate a polygon

Affinity Designer actually uses SVG as it clipboard format (!). This means that after you have copied the SVG code for the polygon, you can just paste inside Affinity Designer and voila you have the polygon in your vector application to work with:

The polygon generated in the browser now in Affinity Designer vector based application on Mac

It gives you not only a lot of options to use languages to generate or manipulate graphics, but it is also a generally accepted standard file format for sharing graphics across different domains, platforms and computers. Files with “.svg” extension can be shared and rendered anywhere.

It is human readable, xml based and allows you to include interactivity and animation. It shares CSS with HTML, meaning that you can used standardized ways and methods to style your graphics. Learn CSS, and you can easily style even a SVG based drawing.

Desktop to web — very easy with SVG

As I mentioned, desktop application has accepted the web as a player, so of course you can also copy a drawing from a desktop application and either paste it to HTML or export it as SVG so you can use it easily in a web document.

Not really any need for converting anything — though of course you can sometime first process the SVG to optimize things like file size.

As it is a generally accepted format, there of course also comes a lot of players offering many utilities and methods for using and working with SVG.

Javascript embedded in applications

If you want to make applications which use SVG, for instance in the most popular language: Javascript. You can find lots of resources.

For instance, if you search one of the largest programming package libraries — NPM, for SVG, you (at the time of writing) will get 15154 hits (!). That is a big number of packages which will help you working with SVG.

It does not even stop here. Vector applications like Sketch has taken the choice to use a web rooted programming language for its macros: Javascript. That makes it even more standardized when you create methods for working with SVG graphics.

My simple javascript macro running in desktop app Sketch

I did a simple one, which will prompt you for a comma separated list of numbers, which will then generate a simple diagram right there in your drawing, which can then be copy and pasted into your browser as a SVG document — which will render almost anywhere!

No need to learn more than one language. No need to learn more than one graphics domain. That is a dream come through for me. Thanks!

Related information — some of my examples of working with SVG in the browser

Like what you read? Give netsi1964 a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.