Have you tried using the SVG image format? Here is an SVG tutorial to help you delve deeper on how to use this image format to your full advantage.
In the past, the only image format that was supported by all browsers was the GIF, an image file developed by CompuServe. Then came the JPEG image file, which offered lousy compression without the loss of details, but the size is really small compared to the GIF file image.
After some time, the aim for advance 2-dimensional vector computer graphics on the Web came into being. With so much competing formats that were submitted to W3C, SVG was finally developed in 1999.
What is SVG?
SVG, which stands for Scalable Vector Graphics, is an XML-based vector image format for the Web. Unlike GIF, PNG and JPEG image file formats, SVG is scalable, which means that no matter how you scale or enlarge the image file, the quality will still look good.
As an XML file, SVG can be created, customized and integrated with other W3C standards such as DOM and XSL using any text editor. SVG images can also be created visually using drawing or vector programs like Adobe Illustrator.
Why Use SVG?
- Can be created and edited with any text editor
- Can be printed with high quality resolution
- Can be used for animation
- Is a W3C recommendation
- Works with other W3C standards like DOM
- Looks great for retina diplays
- Scales to any size without looking stretch out
SVG on HTML Pages
SVG can be easily embedded into HTML using SVG tags. Consider the syntax below.
1 | <svg width=" " height=" "> |
2 | [element code here..] |
3 | </svg> |
As you can see, SVG has its own tags. SVG must have a width and height so as to contain its element. The following are the elements can be used to draw inside its canvas.
- Circle
- Rectangle
- Ellipse
- Line
- Polyline
- Polygon
- Path
- Text
We will discuss all of these one by one in this article. This article will serve as an introduction to SVG. It will give you basic information how to draw SVG shapes using basic XML. If you have not used SVG before, this is a good start for you. So let’s jump in and start this awesome tutorial.
Creating a Circle in SVG
Circle SVGs can be executed by using the circle tag. Here’s an example.
1 | <svg height="300" width="300"> |
2 | <circle cx="60" cy="60" r="50" style="fill: blue; stroke: black; stroke-width: 2px;" /> |
3 | </svg> |
The resulting Circle SVG image will look like this:
In this example, I used the circle tag and then define the cx (x coordinates) and cy (y coordinates) which will determine the center of the circle. Next, I put a value of 50 on the r (radius), which defines the length of a line segment from its center to its perimeter. Finally, I added the styles for fill color, stroke color and stroke-width, which are pretty much self- explanatory.
Creating a Rectangle in SVG
Rectangle can be executed by using rectangle tag and can draw various kinds of height and width. Check out the code below.
1 | <svg height="300" width="300"> |
2 | <rect width="250" height="100" rx="11" ry="11" style="fill: yellow; stroke: green; stroke-width: 4px;"/> |
3 | </svg> |
The resulting Rectangle SVG image will look like this:
Using rectangle tag, I define the width and the height of the rectangle. Then I added rx and ry, which rounds the edge of the rectangle. You can remove this two (rx and ry) if you want to have sharp edges. Next we added the styles for fill color, stroke color and stroke-width.
Creating an Ellipse in SVG
Ellipse SVG can be executed by using the ellipse tag. Ellipses don’t need to have equal height and width and unlike circle SVG the radius (cx and cy) is different. Consider the code below.
Consider the code below.
1 | <svg height="300" width="300"> |
2 | <ellipse cx="190" cy="70" rx="100" ry="50" style="fill:red; stroke:green;stroke-width:2"/> |
3 | </svg> |
The resulting Ellipse SVG image will look like this:
The cx and cy define the center of the ellipse while the rx and ry define the radius of the ellipse. As you can see, the rx describes the wideness of the ellipse while the ry describes how tall it will be. Then we put up the styles for fill color, stroke color and stroke width.
Creating a Line in SVG
Line SVG can be executed by using the line tag. From the name itself, the tag is used to draw lines. Check out the example below.
1 | <svg height="300" width="300"> |
2 | <line x1="0" y1="0" x2="100" y2="150" style="stroke:#000; stroke-width:5" /> |
3 | </svg> |
The resulting Line SVG image will look like this:
On this example, x1 (x-axis) and y1 (y-axis) define the starting point of the line. While x2 (x-axis) and y2 (y-axis) define the ending point of the line. Using the style attribute, I put a stroke color of black and a 5px stroke width.
Creating a Polyline in SVG
A polyline SVG can be executed by using the polyline tag. It is used to draw shapes which are composed of straight lines. Here’s an example.
1 | <svg height="300" width="300"> |
2 | <polyline points="60,50 150,120 100,220 200,170"style="fill:none;stroke:black;stroke-width:3" /> |
3 | </svg> |
The resulting Polyline SVG image will look like this:
Using x (x-axis) and y (y-axis), you can set the each individual points of the lines to create a specific shape you want. As you can see here I have 4 set up points joined by lines. I also added a stroke of black and a stroke-width of 3px.
Creating a Polygon in SVG
Polygon SVG can be executed by using the polygon tag. This element will draw shape that has more than 3 sides. Check out the code below.
1 | <svg height="300" width="300"> |
2 | <polygon points=" 60,20 100,40 100,80 60,100 20,80 20,40"style="fill:cyan;stroke:red;stroke-width:1" /> |
3 | </svg> |
The resulting Polygon SVG image will look like this:
In Polygon SVG, points are being defined by the x and y axis for each side of the polygon from the last point to last one. In this example, I created a hexagon with 6 sides. As you can see, there are 6 points that connects together defined by x and y axis. Then I put fill color of cyan followed by stroke color of red and stroke width of 1px.
Creating Paths in SVG
Path SVG can be executed by using the path tag. This element will draw advance path and shapes which consists of curves, lines, and arcs. Among the entire SVG elements, this is one of the most functional yet hardest to learn and manipulate. Path SVG uses the following commands:
- M move to
- L line to
- V vertical line to
- H horizontal line to
- C curve to
- S smooth curve to
- T quadratic Bézier curve
- A elliptical arc
- Z close path
Uppercase letters mean the position will absolutely position while lowercase letters mean relative positioning. See the example below.
1 | <svg height="300" width="300"> |
2 | <path d="M 30 40 C 140 -30 180 90 20 160 L 120 160" style="fill: none; stroke: black; stroke-width: 6px;" /> |
3 | </svg> |
The resulting Path SVG image will look like this:
From the code above, you can see that I used the letter d. This d attribute will always be a move command. Next, I use M which means move to. Before you can draw anything, you must move the virtual cursor to your preferred location. So for this example, I move the x-axis to 30 white the y-axis to 40. The curve begins at 140, -30 as our tangent starting point. Next the curve points down to the right with the points 180, 90 and ends up with 20, 160. To finalize the path, I created a line with points 120 and 160.
Creating Text in SVG
Text SVGs can be executed by using the tag enclosed with the text tag. This element is used to draw text in an SVG image.
1 | <svg height="300" width="300"> |
2 | <text x="20" y="30" fill="blue" font-size="20">This a great sample for Text SVG! </text> |
3 | </svg> |
The resulting Text SVG image will look like this:
In this example, I set the x-axis position of the text to 20. This will place the text 20 px from the left while I set up the y-axis to 30, which will place the text 30 px from the top. Next, I set up a fill color of blue and set the font size to 20px. This will display the text “This a great sample for Text SVG!”
Creating SVG in Adobe Illustrator
Aside from creating SVG images manually using the svg tag along with the element’s code or tag, you can also create SVG images using Adobe Illustrator. For this part of the tutorial, let’s create a simple star using Adobe Illustrator.
To start create a new document in Adobe Illustrator, you can name it in your own preferred document name but for this tutorial, I’ll rename it Star-SVG. For the Document Profile, select Web. The number of artboard will be one and the size, I’ll leave it to 800 x 600px.
Next select, the find Star tool on the toolbar and draw a star in your preferred size.
To change the color of the star, use the color palette on the top. For this tutorial, I selected the following green color properties R=34, G=181, B=115 but feel free to choose your own color.
Next, let’s fix the artboard size using the Artboard Tool. Go ahead and select the Artboard tool on the toolbar and then double click the star path we created. You will notice that our background fit to the size of the star path.
Then, let’s save this file as an SVG file for now. Go to File, then Save As and then on the File name, put your preferred file name but for this tutorial I will name it Star-SVG. For the save as type, select SVG.
A new window will appear. On this window, select SVG 1.1 on the SVG Profiles section. To show the SVG code of the Star SVG created, just click on the Show SVG Code button on the bottom of the window. By default, on Windows, it will show the SVG code on your browser default. Finally, click the OK button.
Wrapping Up
Using SVG in your projects gives you a lot of advantages. The continuing progress of retina and mobile application gives more and more opportunity to display high quality of images on the web. JPEG, PNG and GIF files might be helpful but as the screen changes, using vector-based images is the best way to go to a better image appearance on the web.
So now that you understand the basics of SVG it’s a great idea to explore on your own. There are plenty of tutorials on the web teaching advance lessons about SVG that can help you dig down a little bit more regarding this topic. Hope you enjoyed this tutorial and see you next time.
courtesy: http://www.1stwebdesigner.com/css/svg-tutorial/
0 comments:
Post a Comment