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 .