Abstract
Scalable Vector Graphics is everywhere. From funny drawings to great desings this text based way to describe images is one of the most used formats in the graphics and design world. In this seed I explore its coordinate systems.
The Simplest SVG
We can start this journey to the SVG coordenate system by creating the simplest SVG image: an opening and ending svg xml tag with the xml namespace declaration set to the W3C SVG namespace.
<svg xmlsns="http://www.w3.org/2000/svg"></svg>
Saving that text to a file with the svg extension just creates a new svg file. In my computer, that file creates an empty, transparent svg image of size 300x150 pixels because it is the default size of a SVG file when no width or height is defined in the context of inline SVG on HTML5, or using image, object or iframe HTML elements. Now, if the SVG file is opened directly in a new browser tab, that default size changes. The size of the SVG is set to the full size of the viewport: width of 100vw and height of 100vh.
The default coordenate system of SVG is a two dimensional plane with points (x, y) where its origin point is equals to (x = 0, y = 0) and it is the upper left-hand corner on any SVG. As we move to the right from the origin the value of the coordenate ‘x’ increases. As we move downward from the origin, the coordinate ‘y’ increases. So, the width of the SVG is the value of ‘x’, and the height is the value of ‘y’.
The SVG content is drawn
main() {
printf("hello, world");
}