- MDN: Getting Started with SVG
- Technical Tutorial
- The information provided above is technical but accurate.
- Understanding the viewBox by Amelia Wattenberger
- This is an excellent interactive tool for understanding the trickiest part of SVGs: the
viewBox. - Note:
widthandheightattributes are removed for responsive SVGs, which makeviewBoxless weird.
- This is an excellent interactive tool for understanding the trickiest part of SVGs: the
- What are SVG viewport and viewBox?
- Vector logos look sharp at all zoom levels.
- SVG files (the open vector file format) are generally smaller in file size compared to raster images.
- Inline SVGs can be styled and animated with CSS.
- SVGs are part of the DOM, which can be accessed and controlled using Javascript.
- Complex SVGs may impact performance due to processor load.
- When in doubt, remove the
widthandheightattributes to make your SVG responsive. This will make the SVG 100% of the width of its container. - The
xmlnsattribute is not needed for inline SVGs but should be included in case you want to link externally as animgelement orbackground-image. - The
version="1.1"attribute should always be removed. - CSS styles and effects such as
strokecannot leave the boundaries of an svg element.If this happens it's usually easier to expand your viewBox in your vector editor. - Optimize your inline SVGs with SVG OMG to make sure it's web-ready.
- Most of the defaults are fine.
- Prettify the code, if desired. It won’t add a lot to file size.
widthandheightattributes 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 for more information than you probably need.
- Optimization: SVG OMG
- This is the go-to online optimizer for SVGs. It's a web frontend for the SVGO package.
- Popular free vector editors:
- Openly Licensed SVGs (among other things)
- Animation libraries: