Scalable Vector Graphics

## SVGs
            ### Scalable Vector Graphics

---

### Key Takeaways
            - Vector logos look sharp at all zoom levels.
            - SVG files are generally smaller in file size compared to raster images.
            - Inline SVGs are part of the DOM, which can be styled and animated using CSS and Javascript.
            - Complex SVGs may impact performance due to processor load.

---

## 3 Ways to add SVGs to HTML

---

### 1. `<img>` Element
            HTML:
            ```html
            <img src="no-bugs.svg" alt="SVG as img">
            ```

CSS:
            ```css
            img {
              display: block;
              width: 50vmin;
            }
            ```
            ---

### 2. `background-image` Property
            HTML:
            ```html
            <div class="image"></div>
            ```

CSS:
            ```css
            .image {
              width: 50vmin;
              height: 50vmin;
              background-image: url(no-bugs.svg);
              background-size: cover;
            }
            ```

---

## SVGs as Images
            ### Advantages
            - No need to worry about SVG code; the browser will treat it like a raster image.
            - Image will be sharp at any size.
            - Aspect ratio will always be preserved (raster images can be distorted).

### Disadvantages
            - Internal SVG elements cannot be styled or animated.

---

### 3. Inline SVG
            ```html
            <svg width="496" height="496" viewBox="0 0 496 496" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path fill="#000" fill-rule="evenodd" clip-rule="evenodd" d="M396.33 146.225a14.482 14.482 0 016.991 8.573 14.393 14.393 0 01-1.154 10.981 14.387 14.387 0 01-8.596 6.929l-9.622 2.852a67.544 67.544 0 01-9.5 39.158l7.885 7.111a14.44 14.44 0 014.338 15.812 14.434 14.434 0 01-13.242 9.669 14.445 14.445 0 01-10.523-4.152l-8.123-7.313a67.642 67.642 0 01-27.422 11.298 96.937 96.937 0 00-10.048 2.498l3.266 7.38a14.466 14.466 0 01-.015 11.66L190.14 138.256a14.53 14.53 0 0119.875 3.197l4.875 6.478a233.548 233.548 0 0135.764-19.397l-2.62-7.343a14.47 14.47 0 018.881-18.25 14.468 14.468 0 0118.388 8.592l2.621 7.312a235.696 235.696 0 0127.013-6.343 68.148 68.148 0 0113.608-.896l2.291-8.757a14.476 14.476 0 0126.492-3.716 14.475 14.475 0 011.539 10.974l-2.309 8.817a68.16 68.16 0 0129.554 28.897l9.214-2.73a14.483 14.483 0 0111.004 1.134zm-83.399 6.849c6.075 0 11-4.925 11-11s-4.925-11-11-11-11 4.925-11 11 4.925 11 11 11zm49 36c0 10.494-8.506 19-19 19-10.493 0-19-8.506-19-19 0-10.493 8.507-19 19-19 10.494 0 19 8.507 19 19z" />
              <path fill="#000" fill-rule="evenodd" clip-rule="evenodd" d="M267.478 319.362L137.981 189.865a14.416 14.416 0 00-4.559 13.118 14.43 14.43 0 006.046 9.48l6.758 4.912a233.647 233.647 0 00-18.842 35.801l-7.879-2.7a14.419 14.419 0 00-11.143.508 14.41 14.41 0 001.716 26.725l7.921 2.73a235.392 235.392 0 00-5.667 24.698 68.028 68.028 0 00-.634 15.454l-9.408 2.779a14.403 14.403 0 00-9.69 17.921 14.406 14.406 0 0017.922 9.689l9.141-2.705a67.94 67.94 0 0029.573 28.787l-2.346 8.988a14.418 14.418 0 0010.359 17.568c1.196.302 2.424.455 3.656.457a14.455 14.455 0 0014.016-10.786l2.322-8.915a10.554 10.554 0 01.935.08l.211.025h.002c.459.054.917.108 1.369.108a67.772 67.772 0 0037.092-11.285l6.977 7.154a14.443 14.443 0 0020.768-20.067l-7.428-7.617a67.64 67.64 0 009.817-25.228 96.732 96.732 0 013.144-12.62l7.313 3.437a14.41 14.41 0 0010.035 1.001zm-94.298-7.966a29.248 29.248 0 0036.933-3.638 29.246 29.246 0 003.638-36.933 29.25 29.25 0 10-40.571 40.571z" />
              <path fill="#000" d="M248 0C111.034 0 0 111.033 0 248c0 136.967 111.034 248 248 248s248-111.034 248-248S384.967 0 248 0zm130.108 117.892c65.448 65.448 70 165.481 20.677 235.637L142.47 97.216c70.204-49.356 170.226-44.735 235.638 20.676zM117.892 378.108c-65.448-65.448-70-165.481-20.677-235.637L353.53 398.784c-70.203 49.356-170.226 44.736-235.638-20.676z" />
            </svg>
            ```

Copy/paste this code into a `<body>` element.
            
            #### Source: [ban](https://fontawesome.com/icons/ban?s=solid), [bacterium](https://fontawesome.com/icons/bacterium?s=solid)

---

## Inline SVGs
            ### Advantages
            
            - Can be styled/and animated with CSS.
            - Can be controlled with JS using the DOM.
            - No extra server calls needed: the SVG since it arrived with the HTML file.

### Disadvantages
            - Large inline SVGs can clutter your HTML.

---

## Tips and Tricks

---
            
            ### `width` and `height` Attributes
            <p class="code"><strong>width="496" height="496"</strong></p>

- When in doubt, remove the `width` and `height` attributes to make your SVG responsive.
            - Without these attributes, the SVG will be 100% the width of its container.
            - Either way, the actual width and height of an SVG can be overridden with CSS.

---

### `xmlns` Attribute
            <p class="code"><strong>xmlns="http://www.w3.org/2000/svg"</strong></p>
            
            - `xmlns` is not needed for inline SVGs but is required for SVGs referenced as images (`<img>` or `background-image`).
            - When in doubt, include this attribute in case you want to use the SVG as an image.

---

### `version` Attribute
            <p class="code"><strong>version="1.1"</strong></p>
            
            - The `version="1.1"` attribute should always be removed.

---

### `viewBox` Attribute
            <p class="code"><strong>viewBox="0 0 496 496"</strong></p>

- Always include the `viewBox` attribute. Without it, the SVG cannot be made responsive. 
            - CSS effects _cannot_ leave the SVG viewport, which is defined by the `viewBox`.
                - See [this Codepen](https://codepen.io/acidtone/pen/eYBzxPq) for an example.
                - If this happens, it's usually easier to expand your viewBox in your vector editor.

---
            
            ### Exporting SVGs
            - Every vector application is different.
            - For inline SVGs, you generally want to flatten _Pathfinder effects_ before export.
            - If you want to ensure certain paths are separated, put them on different layers before export.
            - Always optimize your SVGs for the web with a tool like [SVG OMG](https://jakearchibald.github.io/svgomg/).
              
            ---

### Optimizing with [SVG OMG](https://jakearchibald.github.io/svgomg/)

- Most of the defaults are fine.
            Prettify the code, if desired. It won’t add a lot to file size.
            - `width` and `height` attributes will be removed by default (this is good).
            - A lower precision will result in a smaller file size but very low values might affect the detail of your designs.
            - See [Understanding and Manually Improving SVG Optimization](https://css-tricks.com/understanding-and-manually-improving-svg-optimization/) for more information than you probably need.

---

## Styling SVGs
            - Instead of `border-color` use `stroke`.
                - `border-width` -> `stroke-width`
                - `border-style` -> `stroke-dasharray`
            - Instead of `background-color` use `fill`.
            - Most other styles will work on inline SVGs but some don't. You mileage may vary.
            - Other SVG-specific styles exist that you can use in CSS such as `stroke-linecap` and `stroke-miterlimit`.

---

### Extras
            - [SVG's can do that?](https://www.youtube.com/watch?v=4laPOtTRteI) by Sarah Drasner
            - SVG animation libraries
                - [Greensock](https://greensock.com/)
                - [Animejs](https://animejs.com/)
            - Activities
                - [Add a colour scheme to a pinball diagram](https://gist.github.com/acidtone/118f11cd417a7b20fb4f6976f36767a1) ([Codepen](https://codepen.io/acidtone/pen/QWGERKm))