Friday, April 17

SVG (Scalable Vector Graphics) and My Knowledge about it.

Today on my commute to work, I was thinking about life, work and my knowledge and realized how little I know from the Ocean full of knowledge out there. So I asked this question, What is SVG? And I was surprised to learn I knew almost nothing.

What I know about SVG? (Don't read, Posting it below just for my understanding. Read blogposts from css-tricks.com or read from MDN)
It is full form for Scalable Vector Graphics. Literal meaning would for a graphic format. Nowadays it is extensively used on the web, mostly as Icons. Since it is a Vector Graphic, the image can scale on any device, any resolution, almost all browsers without actually getting distorted. For example, If you are using jpeg icons, then for a Apple iPad Retina display, you would need to have the image twice in resolution compared to the one you would use for a Chrome browser in your windows machine. However, with the use of SVG, you wouldn't have to worry about having different resolution images.

Also with SVG, you can animate your icons and it would work across multiple devices.

P.S : Spent some time reading through SVG from good articles out there. Posted it below in my own words for future reference.

What is SVG? (Research from Various Internet Websites)
css-tricks.com has it summarized very well. https://css-tricks.com/using-svg/
It is a image format for Vector Graphics. SVG has a small file size and it compresses well. It scales to any size without loosing clarity. You can have interactivity and filters applied to your SVG image. Wikipedia has a very important point I forgot to mention, that it is in XML format (SVG images and their behaviors are defined in XML text files)

How to use SVG in your web development?
You can use it just like how you would use it in case of jpeg and/or png. For example,
<img src=”main_logo.svg” class=”logo” alt=”Company Main Logo” />
And you can give dimensions to this image and it should work fine. This method does not work for IE8 and below and android 2.3 and below.

You can also use it as a background-image in your css, howeveer you need to have background-size css property defined.

Using SVG 'inline”
You can grab the SVG code, if you open it in a text editor (it is in XML format, remember?) and place it directly inside your HTML document and it should work fine.
<div>
  <!--Your SVG Code-->
</div>
The above method has its own pros and cons. Cons being, bloated code, no caching etc.
One of the advantage can be that since SVG is in XML format, you get tag names, inside this tag names you can provide your own classes and then style them. An added advantage of including SVG inline. 
 
Using SVG as an <object>
<object type=”image/svg+xml” data=”your_svg_image.svg” class=”logo”>
Some Logo <!--fallback image in CSS of I think you can even use fallback <img> tag here-->
</object>
Styling SVG inside an <object>
  1. You can use <style> tag inside your <svg> XML file</svg>
    <svg ...>
        <style>
        <!-- you CSS styles here-->
        </style>
    </svg>
  1. You can use an external Style sheet especially only for the type.
    <?xml-stylesheet type=”text/css” href=”svg.css” ?>

More Theory that I found interesting on MDN
Just like HTML, which has header, nav, body, p etc. tags that define a document, SVG has elements for circle, rectangle, simple and complex curves etc. So a SVG consists of a root element with various shapes to build a graphic. The g element is used to group various shapes together.

The latest SVG version is 1.1

SVG Example
<svg version=”1.1”
        baseProfile=”full”
        width=”300” height=”200”
        xmlns=”http://www.w3.org/2000/svg”>

<rect width=”100%” height=”100%” fill=”red” />
<cicle cx=”150” cy=”100” r=”80” fill=”green” />
<text x=”150” y=”125” font-size=”60” text-anchor=”middle” fill=”white”>SVG Text</text>

</svg>

SVG has a grid or a coordinate system wherein it starts from (0,0) from top left of the document. X axis is from top left towards right and Y axis is towards bottom.

Various shapes that can be drawn in SVG are rect, line, circle, ellipse, path where path being very useful to create complex shapes. All this shapes accepts different attributes such as rect expects a x and y attribute with width and height, circles requires cx and cy and r (for radius) attribute, etc.

Apart from the basic attributes, the shape of elements in path is defined by “d” attribute, and the d contains series of commands. Each command is instantiated by a specific letter, for example, “M” is for “Move To”. The “Line To” ie. “L” command helps draw a line, the “H” helps draw a Horizontal line and similarly the “V” helps draw a vertical line.

SVG Example
<?xml version="1.0" standalone="no" ?>
    <svg width="100px" height="100px" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <path d="M10 10 H 90 V 90 H 10 L 10 10" />
    <!--points-->
    <circle cx="10" cy="10" r="2" fill="red" />
    <circle cx="90" cy="90" r="2" fill="red" />
    <circle cx="90" cy="10" r="2" fill="red" />
    <circle cx="10" cy="90" r="2" fill="red" />
</svg>

These are just the basics to get some understanding on SVG. With SVG you can do a lot of other things such as Styling using CSS, Gradients effect, patters, clipping and Masking, incorporating external images, rotation, skew, animation using Javascript, Interaction etc.

SVG has a very good advantage over other methods of using images on the web, however it requires good domain understanding.

Note to Self : I just had basic knowledge of SVG, not sure if that even counts as knowledge, but spending an hour on css-tricks.com and Mozilla Developer Network, I now have some understanding of SVG.

Be the first one to Comment!!!

Post a Comment