Comm 333 Web Design II

Skip to navigation

Inserting SVGs Into Your Documents

You can use SVGs in your websites several different ways. Each way has some subtle differences and slight variations in browser support.

As a background image in CSS

You can use an svg file as a background image in CSS just like you normally would use any other image type. This is common practice for things like icons.

In the example below I've used the before pseudo class to add a bear icon before the text.

Bear

<p><span class="bear-icon">Bear</span></p>

The following CSS adds the svg file as a background image and then positions it. It's important to set the background-size property when using SVG because the default size could be anything.

.bear-icon::before {
  background: url(images/bear.svg) 0 0 no-repeat;
  background-size: 22px;
  content: '';
  padding: 0 0 0 28px;
  position: relative;
  top: 3px;
}

Inside an image element

You can also include an SVG file in an img element. In the example below I'm using the same svg file but as an image in the html. I'm also floating it to the right.

Illustration of a bear face Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit, eos doloribus enim dolores. Dolore, incidunt iusto vel odit eveniet nemo sit officiis rem sed cupiditate. Minima, ut veniam quam dolor? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo, neque, cum, repellendus quibusdam possimus rerum illo in provident vero saepe accusantium nihil fugiat qui officiis unde consectetur labore quam aut!

<div class="example">
  <p>
    <img src="images/bear.svg" alt="Illustration of a bear face" class="bear-image">
    Lorem ipsum dolor [...]
  </p>
</div>
.bear-image {
   clear: right;
   float: right;
   width: 40%;
}

As an inline file

The most versatile way to include an SVG file is to puth the entire file inline in your HTML. This method allows you to style the file with CSS and easily manipulate it via JavaScript. It also has the best browser support of all the different approaches.

In the example below, I'm putting the svg file inline inside of a normal div element.

<div class="example">
  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 226.9 203.3" style="enable-background:new 0 0 226.9 203.3;" xml:space="preserve" id="bear">
    <style type="text/css">
      .primary-color {fill:#8C6239;}
      .secondary-color {fill:#42210B;}
      .snout {fill:#C69C6D;}
      .mouth {
      	fill:none;
      	stroke:#000000;
      	stroke-linecap: round;
      	stroke-width:6;
      	stroke-miterlimit:10;
      }
    </style>
    
    <g id="left-ear">
      <circle id="left_outer_ear" class="primary-color" cx="31" cy="31" r="31"/>
      <circle id="left_inner_ear" class="secondary-color" cx="33" cy="33" r="15"/>
    </g>
    <g id="right-ear">
      <circle id="right_outer_ear" class="primary-color" cx="195" cy="31" r="31"/>
      <circle id="right_inner_ear" class="secondary-color" cx="191" cy="32" r="15"/>
    </g>
    <g id="face">
      <circle id="face" class="primary-color" cx="114" cy="104" r="99"/>
      <circle id="left-eye" cx="83" cy="73" r="8"/>
      <circle id="right-eye" cx="144" cy="74" r="8"/>
    </g>
    <g id="snout">
      <path id="snout" class="snout" d="M169,131c0,34-25,62-55,62s-55-28-55-62s24-44,54-44S169,97,169,131z"/>
      <ellipse id="nose" class="secondary-color" cx="114" cy="119" rx="26" ry="10"/>
      <path id="mouth" class="mouth" d="M149,148c-20,19-52,18-71-2"/>
    </g>
  </svg>
</div>

Additional Resources

For more information on how to include your SVG images, see the resources below.