How to add SVG to a website.
I have been working with vector graphics in Abobe Illustrator and now am excited to learn on how to apply vector graphics into a web. Scalable Vector Graphics (SVG ) is an XML based markup that can contain two-dimensional vectors. With SVG you can do basically anything you are able to do with a vector graphics in Illustrator. The vectors can be simple shapes, paths, or well just about anything you can do in Illustrator. What makes SVG more powerful in the context of the web, compared to other forms of images, is the fact that we can manipulate them with code.
One of the main reasons why I think developers need to use SVG is image sharpness. Unlike other raster-based image formats such as JPG which make reference to pixels, Vector images are mathematical calculations from one point to another that form lines and shapes. As screen sized and resolutions are dramatically increasing it is important for pages to appear appealing to users. In addition, SVG provides us with the power to animated vector images with CSS and javascript.
There are two main ways to add SVG into our websites.
Write the actual code in our text editor to create SVG images.
In your favourite text editor, we need to create a new page with SVG extension.
We will write code inside the demo1.svg file to create vector graphics. Before writing the code to create the graphics we have to declare the version of svg and give the width and height the picture will display on.
Inside the svg tag we can write the code that will actually add graphic illustration to our page.
The rect tag will create a rectangle and we can add the attributes of width and height to declare how the rectangle will use the size of the svg and we can also specify the fill colour.
When inserting the svg file to html it can be referred to as <object>, <iframe> or <img>, they all have advantages and disadvantages, and need to be planned carefully. For the purpose of this example, we will user <object> element.
As you can see right after the end of p tag I have added the svg file as an object element. If we check the index page on the browser, the rectangle will be displayed after the paragraph.
In the example above you saw the usage of the rect element. SVG has a lot of different elements.
The most used ones are
text: creates a text elementcircle: creates a circlerect: creates a rectangleline: creates a linepath: create a path between two pointstextPath: create a path between two points and a linked text elementpolygon: allows creating any kind of polygong: groups separate elements
Let’s add more elements to create a shape.
If we check this in the browser.
We can manipulate the x and y-axis attributed to achieve the desired shape or form.
Exporting from Adobe Illustrator
Another way to use svg which is my favourite is to design the vector in design software such as Adobe Illustrator and export the work as svg file. For demonstration purposes, I will export a vector from illustrator and add it to the index page.
The exported file type is svg and can be opened with your text editor. This is how thesvg looks if opened with a text editor.
Now we can link this svg the index page to see the display the vector in the browser.
We can now easily target each element of the vector graphics with CSS or Javascript for styling or animating purposes.
I like the following websites on their use of SVG.
For more learning materials you can refer the following sources.
