I recently made a decision about the image type we should go forward with using for a set of icons I would be creating for a specific use case. While refreshing on the different ways to use SVG, I took some notes that I thought I would share.
Note: Some notes are bullet points, followed by a list of tools and resources that will be helpful in learning more.
I found an older but still relevant video by Chris Coyier on the matter: SVG is for Everyone. This is where I got the majority of notes and it was enough to help me wrap my head around our priorities within the projects in addition to some other contexts.
Benefits to using SVG (notes):
- Embed in SVG HTML tag. If for some reason it doesn’t work, may need htaccess file update (AddType)
- Style using CSS
- SVG as gradients for IE9 (CSS gradients don’t work)
- Fill background container: CSS3 - background size. background-size: cover;
- Common use of max-width:100%; could be auto; with .svg
- .svg files are editable. Web can serve as a backup of editable files.
- Inline SVG
- Open an SVG directly in a Code editor to edit properties or get code for use
- Example: Codepen.io puts into an HTML doc and renders it
- Class name on one element can be different per element inside overall SVG.
- Don’t have to control entire thing; in many pieces. Style/change just one shape or part.
- Can be styled and even scripted individually.
- Page doesn’t have to make an extra http request for multiple versions
- Refer to the shape over and over again. Use later.
<svg> <path></path> (draws shape) <g></g> (group, like a div for referencing) <defs></defs> </svg>
- Include. <?php include “svg-defs.php”; ?>
- refs.svg - link to the file - IE doesn’t like caching
- Fragment Identifiers
- Heads ups on using SVG
- Responsive versioning - using CSS only. Hide and show details. Inline SVG.
- Build tools that build refs files with unique IDs for reference on.
- background-image fallbacks in CSS.
- Icon fonts can fail. Workflow is longer to generate too.
Resources and Tools
I had forgotten how awesome and supported SVG is, and will be considering its use in some specific scenarios moving forward.
There are many ways to use SVGs, and the benefits are vast. Though this list of notes varies quite a bit, you can see that they can be more simple to use than most think. I highly encourage more research and experimentation using SVGs in your projects today.