SVGs & Shapes!
Tags: codenewbie, html, svg
Published: 2021-08-30 00:07:32

Another week of learning again thanks to an opportunity in line with my job search.

So what is this blog about? Well, I recently encountered a take home exercise where we have to use pure HTML/CSS. A figma design was given and there was a good chunk of elements that are indicated as polygon, rectangle, & ellipse. Never got use them beforehand, and if you haven't either, here's us trying it out together!

### SVG
SVG or Scalable Vector Graphics is a unique type of element that shares some attributes with CSS. My favorite about SVGs is that you don't lose quality whether zoomed in or resized. I got to see its potential when I helped built [Makegotchi](https://github.com/tolentinoel/makegotchi-frontend) during bootcamp. 
<img src="https://github.com/nnhk23/makegotchi-frontend/blob/master/src/images/logIn.png?raw=true" alt="login page" /><figcaption>We utilized SVG for the egg that is our login window</figcaption>

Another good thing about SVGs is you can customize each point reference to make a shape! You can check out [Boxy SVG](https://boxy-svg.com/) and try to play around with SVG shapes and designs!

Further info on shared CSS attributes, check out [CSS Tricks](https://css-tricks.com/svg-properties-and-css/) for a detailed list!

### Polygon
Polygon on html is made out of pairs of points that makes a shape. Try and play around with the code below.
{% codepen https://codepen.io/tolentinoel/pen/wveKbwG default-tab=html,result %}
**Attributes:**
 - `stroke` - is the line color of the polygon
 - `stroke-width` - corresponds to the line-weight 
 - `fill` - for background-color
 - `points` - are the pair of points that make up each side of the shape. 

### Rectangle
Similar with the polygon, but simpler. You can definitely use polygon to make a rectangle or a square, you can also use `<rect>` to make a rectangle. All you need is width and the height! Check out my CodePen below to try it out!
{% codepen https://codepen.io/tolentinoel/pen/BaZoeRQ default-tab=html,result %}
<figcaption>I had used a different color for the svg to distinguish the nesting.</figcaption>
You can definitely just also use a div to create this square/rectangle, but for learning purposes I used `<rect>` for more specificity.

### Ellipse
Yes! Ellipse like a circle! In this case, we can make ovals, egg shapes, teardrops, and other round-like shapes! Ellipse is also an SVG element and has a few attributes.

As per [W3 schools](https://www.w3docs.com/learn-html/svg-ellipse.html) here are each `attr`'s roles:
- cx - the x coordinate of the center of the ellipse.
- cy - the y coordinate of the center of the ellipse.
- rx - horizontal radius.
- ry - vertical radius.


{% codepen https://codepen.io/tolentinoel/pen/NWgGVag default-tab=html,result %}

There are so much more potential shapes to make using SVGs /polygons! There are elements like polyline, path and/or elements that are parallelogram in shape that used CSS & SVG element attributes. 

If you ask me, what else can you make using these elements? Check out this [gallery](http://www1.plurib.us/svg_gallery/) of SVG, see their original file and inspect using your console. 
![SVG art inspected](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v7wj3yz3ostulwqxh9tl.png)

And that's a few I've learned to use as of recent! I hope I get to help you learn something new today!

Until the next!

References:
- [GeeksforGeeks - More about polygons](https://www.geeksforgeeks.org/svg-polygon-element/)
- [Tutorialspoint - Polygons](https://www.tutorialspoint.com/svg/svg_polygon.htm)
- [Rectangle - MDN](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/rect)
- [Ellipse examples](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/ellipse)
- [SVG Art gallery](http://www1.plurib.us/svg_gallery/)