​​​đź“ť​ 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

  1. ​​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 art board (nothing in the margins and no leftover pixels)
​​
 
User-uploaded image: Screen+Shot+2020-04-08+at+6.23.04+PM.png
​​
​​
  1. ​​Export for screens, naming your asset something descriptive
  • ​​
​​
 
User-uploaded image: Screen+Shot+2020-04-08+at+6.24.06+PM.png
​​
​​
 
User-uploaded image: Screen+Shot+2020-04-08+at+6.24.52+PM.png
​​
  1. ​​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
  • ​​
​​<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>
​​
  • ​​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.
  • ​​
​​
​​

​​2. Using the SVG

​​You can use this image asset for this activity.
​​
  1. ​​You can use the SVG as an image and it will retain quality, but you won’t be able to manipulate it with code. You do this with a typical img tag.
​​
​​<div>
​​  <img src="assets/imgs/yin-yang.svg">
​​</div>
​​
​​You’ll also need to set a height for the image in the css if you use it this way:
​​
​​img {
​​  height:500px;
​​}
​​
  1. ​​To manipulate it with code, you need to place the image code into your HTML.
​​
​​<!DOCTYPE html>
​​<html>