SVG Utility Classes

The purpose of these classes is to be able override inline SVG files with brand colors as needed. These classes will only work on inline SVG files, not those added with img/src.

For an example of how these have been implemented on the website, please see the TyndaleU by the Numbers page. You can also checkout this CodePen to play around with.

SASS Structure Location: … /sass/components/_images.scss

Fill Overrides

You can override the fill, or the fill on hover, of any element of an SVG using the following classes:

svg-fill-dark  
svg-fill-light 
svg-fill-white 
svg-fill-blue 
svg-fill-link-blue 
svg-fill-red 
svg-fill-gold 
svg-fill-green 

// hover
svg-hover-fill-dark
svg-hover-fill-light
svg-hover-fill-white
svg-hover-fill-blue
svg-hover-fill-link-blue
svg-hover-fill-pink
svg-hover-fill-red
svg-hover-fill-gold
svg-hover-fill-green

fill/hover fill example

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1024 1024" id="tu-gender">
        <title>Gender Ratio at TyndaleU - 48% Male, 52% Female</title>
  <defs>
    <path id="a" d="M303.5 ... 302.5.5"/>
  </defs>
  <g fill="none" fill-rule="evenodd">
    <path d="M346.191 ... 1-1 1h-27.9c-.6 0-1-.4-1-1z" class="svg-fill-dark svg-hover-fill-link-red" fill="#000"/>
    <g transform="translate(210 105)">
      <mask id="b" class="svg-fill-white" fill="#fff">
        <use xlink:href="#a"/>
      </mask>
      <path class="svg-fill-light svg-hover-fill-pink" fill="#DDD" d="M302.529 ... 3.187v327.469" mask="url(#b)"/>
      <path class="svg-fill-dark svg-hover-fill-link-blue" fill="#000" d="M302.529 ...25-.25" mask="url(#b)"/>
      <path class="svg-fill-dark svg-hover-fill-link-blue" fill="#000" d="M302.529...324.281" mask="url(#b)"/>
      <path class="svg-fill-dark svg-hover-fill-link-blue" fill="#000" d="M302.529 ...017.247-.034" mask="url(#b)"/>
      <path class="svg-fill-dark " fill="#000" d="M302.5 ... 59.413-27.528-59.413z"/>
    </g>
  </g>
</svg>

Stroke Overrides

You can override the stroke, or the stroke on hover, of any element of an SVG using the following classes:

svg-stroke-dark  
svg-stroke-light 
svg-stroke-white 
svg-stroke-blue 
svg-stroke-link-blue 
svg-stroke-red 
svg-stroke-gold 
svg-stroke-green 

// hover
svg-hover-stroke-dark
svg-hover-stroke-light
svg-hover-stroke-white
svg-hover-stroke-blue
svg-hover-stroke-link-blue
svg-hover-stroke-pink
svg-hover-stroke-red
svg-hover-stroke-gold
svg-hover-stroke-green

stroke/hover stroke example

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" id="tu-class-size">
  <title>The average class size at TyndaleU is 22</title>
  <g  fill="#000" fill-rule="nonzero">
    <path class="svg-fill-dark" d="M339.3 ... 0-1-.4-1-1v-66z"/>
    <g transform="translate(154 216)">
      <path class="svg-fill-dark svg-hover-fill-blue svg-hover-stroke-blue" stroke="#000" stroke-width="7" d="M189.1 ... 37.8z"/>
      <circle class="svg-fill-dark svg-hover-fill-blue" cx="102" cy="49" r="49"/>
      <path class="svg-fill-dark svg-hover-fill-red svg-hover-stroke-red" stroke="#000" stroke-width="7" d="M225.3 ... 12.8-60.2z"/>
      <circle class="svg-fill-dark svg-hover-fill-red" cx="618" cy="313" r="49"/>
      <circle class="svg-fill-dark svg-hover-fill-red" cx="448" cy="313" r="49"/>
      <circle class="svg-fill-dark svg-hover-fill-red " cx="279.8" cy="313" r="49"/>
    </g>
    <path class="svg-fill-dark svg-hover-fill-blue" d="M500.4 ...1v-23.7z"/>
    <path class="svg-fill-dark svg-hover-fill-red svg-hover-stroke-red" stroke="#000" stroke-width="7" d="M799.4 100H271.3v100h10v-90h508.1v278.1H419.3v10h380.1z"/>
  </g>
</svg>

Fill Overrides Example

Gender Ratio at TyndaleU - 48% Male, 52% Female

Stroke Overrides Example

The average class size at TyndaleU is 22

Hidden Elelments

The class of “svg-hidden” can also be placed on elements of an SVG file. The intention of this would be to hide some elements of the SVG and then display only on hover. I have not created any examples at this point, but did some playing around with the concept on this CodePen.