Monday, December 31, 2018
HOW TO CREATE DIFFERENT SHAPES WITH SVG IN HTML 5 |DETAILED GUIDE
HTML 5
,
SHAPES
,
SVG
No comments
:
Hi, in this lesson, I’m going to hold you by hand and work you through various steps you can use to create shapes using Scalable Vector Graphics (SVG). SVG provides you with different methods for drawing circles, graphic images, paths, boxes, to mention but a few. One remarkable thing about SVG shapes is that it is not defined by pixels or percentages. This means that it can be magnified infinitely without losing its quality and beauty. Let us randomly pick five shapes, code them in HTML 5 and see how the results look.
CREATING SHAPES USING SVG
To put the cart before the horse, there’s one important thing I would like you to note. And that is; you have to create an <svg> tag first before you begin your shape drawing journey. Within the opening and closing tag of <svg>, you have to specify the width and the height of the shape you want to draw.
Below is how the <svg> along with the width and the height, will look like
<svg width=’’ ‘’ height=’’ ‘’></svg>
Now let’s start creating shapes. I will consider 5 shapes because of time and space, you can try as many as you want on your own.
1. CIRCLE
To create a circle with scalable vector graphics, you have to include <circle> tag within the <svg> element in order to indicate the shape type.
Let us consider the example below:
<svg width=’’3000’’ height=’’3000’’>
<circle cx=’’100’’ cy=’’100’’ r=’’60’’ fill=’’green’’ />
</svg>
Save and open it. (On latest browser preferably)
NOTE THESE
a. ‘cx’ is used to push the center of the circle further to the right of the screen
b. ‘cy’ is used to push the center of the circle further down from the top
c. ‘r’ is used to indicate the radius of the circle.
d. ‘fill’ is used to fill in the color of the circle
2. RECTANGLE
To draw a rectangle, you should use <rect> element. Consider the example below
<svg width ‘’1000’’ height=’’1000’
<rect width=’’400’’ height=’’200’’
X=’’20’’ y=’’20’’ fill=’’green’’ />
</svg>
3. LINE
To draw a line, use the <line> element. Consider the example below
<svg width ‘’500’’ height=’’500’
<line x1=’’10’’ y1=’’10’’ x2=’’210’’ y2=’’100’’
Style=stroke:#0000FF; stroke=line cap:round;
Stroke width:’’20’’ />
</svg>
NOTE
X1, y1 indicates the start coordinates while x2, y2 signifies the end coordinates
4. ELLIPSE
Drawing ellipse is similar to drawing a circle. The only difference is that you can change the horizontal and vertical axes of the radius using the ‘’rx’’ and ‘’ry’’ attributes. Consider the example below:
<svg height=’’600’’ width=’’1000’’
<ellispse cx=’’290’’ cy=140’’ rx=’’167’’ ry=’’79’’
Style=’’fill:green’’ />
</svg>
5. POLYGON
‘Polygon’ comes from two Greek words: ‘poly’ meaning ‘many’, and ‘gon’ meaning angle. Hence, a polygon can simply mean an angle with more than two sides. To create a polygon in HTML 5, you can use <polygon elements to create a shape of at least three sides. The unique thing about <polygon> element is that it automatically closes off the shape for you after you finish creating it.
Consider the example below:
<svg width=’’3000’’ height=2400’’>
<polygon points=’’100 100 200 200 300 300’’
Style=’’fill:green; stroke:black; />
</svg>
WRAPPING UP
It is often said that practice makes one perfect. On this note, I humbly adjure you to put all the lessons on HTML into practice so that you won’t have difficult when we move to CSS tomorrow
Subscribe to:
Post Comments
(
Atom
)
No comments :
Post a Comment