PlayTime with SVGs #1.
So, before we start playing around let's know who we are playing with and that brings us to the question.
What is SVG?
Scalable Vector Graphics (SVG) is an XML-based vector image format for two-dimensional graphics with support for interactivity and animation. The SVG specification is an open standard developed by the World Wide Web Consortium (W3C) since 1999. — wikipedia.
Well, I’m not going to bore you with the too much details, just the basic and by the way we here to have fun.
Basic SVG Element
The following list covers the building blocks we’ll need to start the fun:
<svg>Wraps and defines the entire graphics.<svg>is to a scalable vector graphic what the<html>element is to a web page.<line>Makes single straight lines.<polyline>Makes multi-segment lines.<rect>Makes rectangles and squares.<ellipse>Makes circles and ovals.<polygon>Makes straight-sided shapes, with three sides or more.<path>Makes any shape you like by defining points and the lines between them.<defs>Defines reusable assets. Nothing placed inside this<defs>section is visible initially.<defs>is to a scalable vector graphic what the<head>element is to a web page.<g>Wraps multiple shapes into a group. Place groups in the<defs>section to enable them to be reused.<symbol>Like a group, but with some extra features. Typically placed in the<defs>section.<use>Takes assets defined in the<defs>section and makes them visible in the SVG.
Basic SVG Element CSS properties.
Not all CSS properties apply to SVG but the few that applies can be found here.
SVG Browser Compatibility
For compatibility SVGs haven’t been good with old browsers but will definitely work with any newer (version) browser.
Why SVG? 🤷♂️
- Scalable — stays sharp and clear irrespective of the scale.
- Small size — lighter and faster than png or jpg.
- Programmable and interactive — can be easily modified using both JavaScript and CSS.
- Animation — SVG can be fully animated as it is fully editable and scriptable using JavaScript and CSS.
- Accessibility and SEO — The great news about SVG is that it is Google indexed and content, whether it is in a standalone file or embedded directly in HTML, is indexed.
Well, we have been talking too much so let's get our hands dirty in part 2 of the series. So from this, we have a basic understanding of SVG and its properties and why we use them. I apologize that we couldn't play around with it on this post 🙏 this next one will definitely be more practical.
