Using the horizontal and vertical axis
To place a shape or path on a specific area you use the vertical and horizontal axis, even though you can use transform in CSS as well. For those who don't know the value of the horizontal axis is known as x while the vertical axis is known as y. The vertical and horizontal axis is the height and width of the svg element.
Viewbox
The viewbox is pretty much the content that you see in an element. The viewbox attribute is used to move and change the size of the svg's viewbox. The first two values are the x and y points of the viewport or the parent elements viewbox. The second two values are the height and width of the viewbox.
Rectangles and Squares
To make a square or a rectangle you use the rect element. Then you give it a width and height attribute that you like. If you want to make a square, you make the width and height attributes the same. To give each corner a radius you use the rx attribute (r for radius), but if you want to give the sides a radius you use the ry attribute. You use the fill attribute to add its color. When you want to put it in a specific place you use the plot attributes of x and y.
<svg>
<rect width="80" height="80" x="100" y="100" fill="green" stroke="red"/>
</svg>
Note: the default fill value is black, but if you want to take it off you set it to none
Circles
Circles use more geometric attributes. You use the r attribute, known as radius, to give it the size. You use the plot attributes cx and cy, similar to the rect element.
<svg>
<circle r="60" cx="100" cy="100" fill="blue" stroke="red"/>
</svg>
Path
Some dev's don't go this far in svg's because of how hard it seems to use path but don't worry, it just needs practice and understanding.
Each command has an x y point to tell where to put or draw something.
Every command in the path element is stored in the d attribute meaning draw. It's called this because the path element is like drawing whatever you want but with html and graph pointing.
The m for move command is made so you can start drawing something wherever you want. A lowercase m means move near the last path point while an uppercase one means to move it relative to the viewbox.
The l command is used to draw a line, it goes from the last path point to the x y point you gave it. When two lines touch a color fills a space between them, to take it a way you add a fill attribute that has a value set to none.
The c and q commands help make bezier curves, c standing for cubic and q standing for quadratic. For the c command you need 3 x y points while for the quadratic you need 4, just like the bezier curves. To space each point you add a comma.
Global attributes
Attributes that all svg elements can use.
-
strokegives the border color, for path it gives lines color -
stroke-widthadds thickness to the path line or border -
fillgives color to a shape or path
Thanks for Reading!
Now that you have a bit of understand of how svg's are mostly used, you can go on and start digging some more of how it works or make some designs on your own like this boba drink i made! If you want me to improve or add something to this post don't be scared to comment it!
HTML
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="Boba.css" type="text/css">
</head>
<body>
<svg width="100%" height="100%" viewbox="0 0 200 290">
<circle r="10" class="boba-1"></circle>
<circle r="10" class="boba-2"></circle>
<circle r="10" class="boba-3"></circle>
<circle r="10" class="boba-4"></circle>
<circle r="10" class="boba-5"></circle>
<circle r="10" class="boba-6"></circle>
<circle r="10" class="boba-7"></circle>
<circle r="10" class="boba-8"></circle>
<circle r="10" class="boba-9"></circle>
<circle r="10" class="boba-10"></circle>
<circle r="10" class="boba-11"></circle>
<circle r="10" class="boba-12"></circle>
<path d="m 92 60 l 70 180" stroke="black" stroke-width="5"></path>
<path class="cup" d="m 100 100 l 15 150 l 80 0 l 10 -150" stroke="#000814" stroke-width="3px" fill="#ffcdb2">
</path>
</svg>
</body>
</html>
CSS
Sometimes it can be to complex to do everything on html, so you can also do stuff in css as well!
html, body {
height: 100%;
width: 100%;
}
.boba-1 {
transform: translate(125px, 200px);
}
.boba-2 {
transform: translate(155px, 180px);
}
.boba-3 {
transform: translate(143px, 155px);
}
.boba-4 {
transform: translate(170px, 155px);
}
.boba-5 {
transform: translate(180px, 200px);
}
.boba-6 {
transform: translate(130px, 220px);
}
.boba-7 {
transform: translate(180px, 235px);
}
.boba-8 {
transform: translate(180px, 235px) ;
}
.boba-9 {
transform: translate(120px, 170px) ;
}
.boba-10 {
transform: translate(140px, 120px) ;
}
.boba-11 {
transform: translate(180px, 135px) ;
}
.boba-12 {
transform: translate(145px, 235px) ;
}
.cup {
filter: opacity(50%);
}
Top comments (0)