Intro/Histrory
Creating SVGs
SVG "Code"
SVG's in the Web

Vector Images

        Vector graphics are created from mathematical formulas. Those mathematical formulas can create lines, curves, shapes, and text. This differs a bitmap image, which contains each and every pixel's color.

        The mathematical formulas are instructions that control where and how those lines, curves, and text are placed which are combined all together to create the desired image. A few examples of vector graphic formats include The PostScript font, PICT, and EPS.

Bitmaps Images

        A bitmap is a graphic which forms an image created out of rows which make up a grid of different colored pixels. The more complex a bitmap image is, the more pixels and colors it takes to make it. Here is a list of some common bitmap graphic formats: Fonts, BMP, PNG, JPEG, and GIF.

        Bitmap images are the most common images on the web. Bitmap graphics can be created in many different ways such as cameras and many computer softwares like photoshop and other graphic design softwares. Bitmap graphics are also sometimes called “raster” graphics.

History of Vector Images

        After the first computer was created In the mid-1940 early computer programmers began theorizing out different ways to create high quality crisp digital images. Computers of that time period could not display bitmap images because of their extremely limited memory which was the leading cause for vector graphics to be developed.

        The inventor of vector graphics is a man named Ivan Edward Sutherland who is known as one of the pioneers of computer-aided graphics. He is most well known for creating the graphics software called Sketchpad.

        At the start, vector graphics mainly consisted of straight lines until a French engineer named Pierre Bezier figured out a way to mathematically define curves. He then figured out a way to scale those curved lines using control points. Those points are attached to a mathematical equation which keeps the points in place as the size changes to perfectly maintain a vector line's proportion.

Ivan Edward (source)
Ivan Edward coding Vector Graphics (source)

        At the start, vector graphics mainly consisted of straight lines until a French engineer named Pierre Bezier figured out a way to mathematically define curves. He then figured out a way to scale those curved lines using control points. Those points are attached to a mathematical equation which keeps the points in place as the size changes to perfectly maintain a vector line's proportion.

        One of the earliest users of Vector images was the US Department of Defense which used vector graphics to create high-quality maps and also model interactively.

        As Vector graphics became more advanced and became easier to use, early game developers saw its potential because of the extremely small file size, greater detail, and smoother lines that vector graphics could provide.

Atari Asteroids Game (source)

        Sometime in the 1970's Atari released the game Asteroids,”image above” which was created using vector art. A Lot of other game creation companies jumped on the vector art bandwagon and thousands of games were created. Some of the most popular and well known vector art games are Star Wars Atari-1983, Tail Gunner Vectorbeam-1979, Star Trek: Strategic Operations Simulator Sega-1983, and Space Duel ”original Asteroids direct descendant” Atari-1982.

Differences Between Bitmap and Vector Images

Bitmap images are far better at replicating the real world than vector images

        Vector graphics contain instructions which tell where to place all of the components of the vector graphic, while bitmap images store the data about each and every pixel and its color which when put together make up an image.

        Vector graphics are not affected by a computer changing resolution. A vector graphic will look just as clear and crisp at 800 x 600 as it will look at 3240 x 2160. The reason vector graphics are not affected by resolution changes is that the vector graphic components are automatically redrawn to look the same on any different resolution. Bitmap graphics are affected by a computer changing resolution.

        If you look at a bitmap graphic at a smaller resolution then the graphic was created for, it will look sharper and higher quality but small, and if you look at that same bitmap graphic at a higher resolution then it was created for, it will look blocky, jagged and large.

        Bitmaps are easy to display and modify because they can be opened and understood by most paint programs. Vector graphics are easy to modify because they are made out of shapes and lines which can be easily altered, but finding a program that supports vector graphics can be challenging, in comparison to the many programs that support bitmap graphics, there are hardly any programs that support vector graphics.

A vector graphic can easily be converted into a bitmap graphic while a bitmap graphic is very difficult to turn into a vector graphic.

Bitmap High to Low Quality (Source)

SVG Vector Art Creation Software

        The most common and practical method to create SVG Vector art is to use one of the many different Graphic Design Softwares in which you easily create SVG vector images. The main benefit to creating your SVG vector image in these types of software is the ability they give you to pick from a premade selection of simple SVG vector objects which you can then place wherever eand however you want to make up your image. You can also stretch and scale those premade simple SVG vector objects however you want.

        One of the most popular Graphic Design Software is Adobe Illustrator which requires a subscription, in which you can create SVG vector art yourself or use artificial intelligence to generate a SVG vector image.

There are other free options which include SVGator and Vecteezy Online Editor. Vector.

Adobe Illustrator (Source)
SVGator (Source)
Vecteezy Online Editor(Source)

After SVG vector graphic images have been created they are saved as an XML text file. This text file format maintains the proportions of the image and its scale.

        In the modern world SVG vector graphic images created in these many different softwares are used in many different ways, most notably fashion, animation, comics, web design, engineering, and many different types of advertising.

Shapes and their basic formats

rect:

The rect tag is a tag meant to create a rectangle that can be manipulated through various attributes

  • x: Sets the x position of the top left of the rectangle.
        A higher value moves the shape right. A Lower value moves it left.
  • y: Sets the y position of the top left of the rectangle.
        A higher value moves the shape downwards. A Lower value moves it upwards.
  • width: Sets the width of the rectangle
  • height: Sets the height of the rectangle
  • rx: Sets the curve of the edges of the rectangle
  • fill: Sets the color of the rectangle

circle:

A tag meant to create a circle that can be manipulated through various attributes

  • cx: Sets the x position.
        A higher value moves the shape right. A Lower value moves it left.
  • cy: Sets the y position.
        A higher value moves the shape downwards. A Lower value moves it upwards.
  • r: Sets the radius of the circle
  • fill: Sets the color of the Circle

line:

A tag meant to create a line that can be manipulated through various attributes

  • x1: sets the x position of the starting point.
        A higher value moves the shape right. A Lower value moves it left.
  • x2: sets the x position of the ending point.
        A higher value moves the shape right. A Lower value moves it left.
  • y1: sets the y position of the starting point.
        A higher value moves the shape downwards. A Lower value moves it upwards.
  • y2: sets the y position of the ending point.
        A higher value moves the shape downwards. A Lower value moves it upwards.

The Stroke property explained in a paragraph below is the only way to change the color and width of the line

ellipse:

A tag meant to create a ellipse that can be manipulated through various attributes

  • cx: sets the x position.
        A higher value moves the shape right. A Lower value moves it left.
  • cy: sets the y position.
        A higher value moves the shape downwards. A Lower value moves it upwards.
  • ry: sets the y-axis radius of the ellipse
  • rx: sets the x-axis radius of the ellipse
  • fill: sets the color of the Ellips

Path:

A tag that can be used to create any one of the basic shapes, and is more equivalent to drawing a shape yourself than having it be pre-programmed in a format. Instead of having a variety of attributes that can change a path, there is only one attribute that uses letters along with coordinates to determine the type movement.

  • d: represents a letter to coordinate system; some of the more commonly used letters are M(sets the starting position), H(moves exclusively horizontal in reference to the starting point), V(moves exclusively Vertical in reference to the starting point), and z(returns to the first point in a path)

Though this is a small snippet of path, and as you do more research you will find that there are more and more complex shapes that are available to you.

There are other tags then what has been listed but these are some of the main ones that you might see more commonly.

"Universal" Attributes and SVG Tag Bounds

Stroke:

The stroke attribute creates a stroke or a "border" around said object. There are two main attributes relating to stroke:

  • stroke: sets the color of the "border".
  • stroke-width: sets the width of that border out of the shape.

The line tag uses stroke for its color and width entirely as it has no fill property of its own.

SVG Bounds:

When using SVG's they exist on a plot or a map and whatever is not on the map is not in view. The Width and Height property of the SVG tag specify the bounds of the svg. You can still move the svg object out of the bounds however they will no longer be in view.

  • Width: Sets the width bounds of the SVG
  • Height: Sets the height bounds of the SVG

Animation

Animate tags:

Animate: animate allows for you to modify attributes of basic shapes, and have them smoothly transition between each other or repeatedly go back and forth between themselves. Unlike most tags in vector graphics, this is one of the few tags that needs to be inside another tag.

AnimationMotion: animate and animate motion are both formatted similarly, but one requires you to use a path to determine how to move the shape in the specified motion

Animation Examples

SVG's in the Web

When using SVG's in the web there are two main ways to use them and implement them into your websites

SVG - TAGS

        In HTML there is actually an SVG tag. This tag allows you to place your SVG in as the text from the text file. All the properties work exactly the same and can be manually changed in the html. By linking your SVG in through the SVG tag it also allows you to edit parts of that SVG using javascript. We used this ourselves in our interactables page The one pain with linking the SVG using the SVG tag is that scaling the image becomes a bit of a pain. The option below makes that process a bit easier.

SVG tag Example

.SVG Files Through IMG tags

        The more typical way to put an SVG image in your webpage is to link it with an img tag. Instead of the SVG text existing in the HTML on your website it is stored in a .svg file in the website's. storage. This makes it a l bit easier to change the properties and actually scale the image. This does however make it so that you lose the ability to edit the parts of the SVG using Javascript.

Img Tag Example