📝 Parsons Week 5b – SVGs and CSS Animation Review
A SVG is a scalable vector graphic. It’s a useful image format for us because:
It retains quality at a variety of sizes
Can be animated and edited with code
Is a relatively small image size
It’s a preferable image type for:
logos(on websites)
iconography
vector based illustration
1. Creating the SVG
First create your artwork in illustrator.
Simplify your shapes so that there are as few moves as possible
If you don’t want to edit the stroke weight, make sure to expand your shape
Work in a clean environment. File assets should only have the artwork on the artboard(nothing in the margins and no leftover pixels)
Â
Â
Â
Â
Export for screens, naming your asset something descriptive
Â
Â
Â
Â
Â
Â
Â
Â
Great! When you have that asset you can preview it and see that it looks like an image. Try opening that file in a text editor. You should see something that looks like this
A couple things to notice: there is an ID in place(if you recall, IDs are one way of specifying an element between the HTML and CSS). You can rename this to something you’d like, or give it a class instead.
You’ll see that this particular image is made up of a path and circle both of which have classes generated that you can rename. Every SVG is made up of different elements. Sometimes it can be tricky to figure out what you need to select to target the shape, so this is when using Google Chrome inspector is really handy.
1. Creating the SVG
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000"><defs><style>.cls-1{fill:#d2928b;}</style></defs><path class="cls-1" d="M337,609.25c10.48-51.08,44.58-95.11,94.05-112.62,49.21-17.41,103.15-15.08,152-33.85,79.83-30.66,128-115.65,123.74-199.57C702.2,172.28,633.36,106.06,545,93.1,315.1,59.34,100.05,258.49,90.84,483.47q-.34,8.26-.34,16.53c0,214.75,165.31,390.88,375.62,408.11C382.76,825.82,313.1,725.93,337,609.25ZM500,246a42.5,42.5,0,1,1-42.5,42.5A42.5,42.5,0,0,1,500,246Z"/><circle class="cls-1" cx="500" cy="711.5" r="42.5"/></svg>
2. Using the SVG
<div>
 <img src="assets/imgs/yin-yang.svg">
</div>
img {
 height:500px;
}
<!DOCTYPE html>
<html>