So, what's an SVG?
What it's NOT
Most of the graphics you see on web pages today are what’s known as bitmap images - PNGs, JPEGs, and GIFs.
Bitmap Images are essentially a grid of pixels - lots and lots of tiny, colored, squarish dots - that, when combined, make up an image.
If you were to open up a png or jpg file with a text editor, you'd see something like this - rows and rows of unintelligible (to humans) text and numbers. All this data describes every single pixel in a bitmap image.
What it IS
SVG is a markup language used to create graphics. It’s essentially a way to describe two-dimensional images using text that can then be rendered at any size by the browser.
SVG stands for Scaleable Vector Graphic. A vector graphic is an image formed by mathematical paths defined by points, lines, curves and shapes.
note: Don't worry about understanding any of the SVG code below. These are just examples of what SVG code actually looks like. We'll explain how everything works during the course!
1
2
3
4
5
6
7
<svg
width="500"
height="500"
viewBox="0 0 362 362"
xmlns="http://www.w3.org/2000/svg">
<circle cx="181" cy="181" r="181" fill="#F3C729" />
</svg>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<svg width="362" height="362" viewBox="0 0 362 362" fill="none">
<circle cx="181" cy="181" r="181" fill="#F3C729" />
<circle cx="118.5" cy="140.5" r="12.5" fill="black" />
<circle cx="243.5" cy="140.5" r="12.5" fill="black" />
<path
d="M80 224C121 271 241 276 291 224"
stroke="black"
stroke-width="13"
stroke-linecap="round"
/>
<line
x1="110.107"
y1="111.014"
x2="87.0145"
y2="128.893"
stroke="black"
stroke-width="10"
stroke-linecap="round"
/>
<line
x1="5"
y1="-5"
x2="34.2046"
y2="-5"
transform="matrix(0.790724 0.612173 0.612173 -0.790724 244 99)"
stroke="black"
stroke-width="10"
stroke-linecap="round"
/>
</svg>Infinite Scaleability
Since an SVG is drawn by the browser using math, it's infinitely scalable. No matter how big (or small) they get, their lines stay crisp and sharp. Bitmaps, on the other hand, become fuzzy and pixilated once they are scaled larger than their actual size.
Inline vs External SVGs
External - SVG files that are loaded and used like any other image format.
1
<img src="/images/smiley_face.svg" alt="svg smiley face">1
2
3
.myclass {
background-image: url(/images/smiley_face.svg);
}Inline - SVGs that are part of the html page. In this course, we will be dealing almost entirely with Inline SVGs.
1
2
3
4
5
6
7
<body>
<svg width="500" height="500" viewbox="0 0 500 500">
<circle id="head" cx="250" cy="250" r="250" fill="orange"></circle>
<circle id="lefteye" cx="150" cy="150" r="20" fill="black"></circle>
<circle id="righteye" cx="350" cy="150" r="20" fill="black"></circle>
</svg>
</body>SVG Advantages (External)
✔️ Scalability
✔️ File size - Generally speaking, svg images have smaller file size, as long as the image is not very detailed (like a photograph)
SVG Advantages (Inline)
✔️ Scalability
✔️ File size
✔️ Versatility - Since inline SVGs have their own DOM, it’s possible to do a lot more with elements of the image - creation, animation, changing color, adding and removing, etc. using JavaScript and CSS (inline only)
✔️ SEO - Since SVGs are text-based, Inline SVGs and elements within Inline SVGs can be indexed by search engines.
SVG Disadvantages
✖️ Bitmap images can be much more detailed. SVGs are best used with relatively simple images.
✖️ Extremely complex SVGs with a lot of complex paths can sometimes affect browser performance.
Summary
SVG is a text-based image format for describing lines, curves, and shapes (circle, ellipse, rect, polygon, polyline, path). The browser takes the information and uses it to draw an image. Since the images are drawn using math, the they can be scaled to literally any size and not lose quality.