LESSON TITLE

THIS IS THE LESSON DESCRIPTION.

LEARING OBJECTIVES

  • learn 1
  • learn 1
  • learn 1
  • learn 1


INTRODUCTION

While we may treat SVGs like images. The <svg> tag behaves very differently than the <img> tag. SVG also uses a completely different set of CSS rules for styling. Never fear though, this guide will help you get started in no time. Let's get started.

This is a topic

Styling doesn't get any more basic than this. The most important thing to know about SVG is that while the contents of an SVG scale proportionally by default, proportional sizing of its bounding box isn't. In fact, browser support for proportional sizing of the <svg> tag is spotty at best. Below is an example:

What this means for you is that you need to explicitly set the width and height of an SVG (no height:auto; for you!). While this is different than what we're used to, the good news is that all of Iconic's icons are placed in a square SVG container—meaning you there's no math needed to set custom dimensions.

  .iconic {
    width: 72px;
    height: 72px;
  }

Wasn't that a fun lesson??

SUMMARIZE THE LESSON HERE