Davidson Styleguide

Accessible SVG 

<span class="asvg ">
  <span class="asvg__object">
          <canvas width="415" height="92"></canvas>
<svg width="415" height="92" viewBox="0 0 415 92" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path d="M145.987 0.999804H128.321L132.287 4.81364V33.4964L128.321 37.3065H145.987C158.607 37.3065 167.043 30.5525 167.043 19.155C167.043 7.75753 158.607 0.999804 145.987 0.999804ZM146.348 33.3128H142.381V4.99351H146.348C153.234 4.99351 156.227 8.04385 156.227 19.1513C156.227 30.2588 153.234 33.3092 146.348 33.3092V33.3128Z" fill="#0F1210"></path>
    <path d="M330.919 26.3055C330.919 21.1152 327.853 17.1215 319.884 14.6878L314.15 12.9442C310.399 11.8173 309.389 10.5473 309.389 8.62382C309.389 6.26357 310.938 4.51999 315.59 4.51999C317.715 4.51999 319.702 4.80997 322.268 5.62487L328.968 13.4544V2.27353C323.558 1.00347 319.487 0.456543 316.567 0.456543C306.436 0.456543 301.46 5.83043 301.46 12.0008C301.46 17.0847 304.668 21.0417 312.134 23.3286L317.576 24.9987C321.47 26.1954 322.804 27.5389 322.804 29.4293C322.804 32.2263 320.208 33.7864 315.123 33.7864C312.961 33.7864 310.88 33.3532 308.758 32.5273L300.953 23.5121V35.7098C306.108 36.9799 310.687 37.8535 314.583 37.8535C325.294 37.8535 330.915 32.4062 330.915 26.3092L330.919 26.3055Z" fill="#0F1210"></path>
    <path d="M215.034 37.3065H218.567L232.376 4.81364L235.263 0.999804H223.364L227.691 4.81364L219.938 23.681L212.187 4.81364L216.514 0.999804H197.259L201.226 4.81364L215.034 37.3065Z" fill="#0F1210"></path>
    <path d="M257.977 37.3065H275.643C288.264 37.3065 296.699 30.5525 296.699 19.155C296.699 7.75753 288.264 0.999804 275.643 0.999804H257.977L261.944 4.81364V33.4964L257.977 37.3102V37.3065ZM272.038 4.99351H276.004C282.89 4.99351 285.883 8.04385 285.883 19.1513C285.883 30.2588 282.89 33.3092 276.004 33.3092H272.038V4.99351Z" fill="#0F1210"></path>
    <path d="M235.985 37.3065H254.011L250.045 33.4964V4.81364L254.011 0.999804H235.985L239.951 4.81364V33.4964L235.985 37.3065Z" fill="#0F1210"></path>
    <path d="M187.344 37.3065H206.599L202.633 33.4927L188.824 0.999804H177.862L180.345 6.81784L168.993 33.4927L165.027 37.3065H178.008L173.681 33.4927L175.566 29.0255H189.815L191.675 33.4927L187.348 37.3065H187.344ZM177.217 25.1089L182.736 12.0302L188.179 25.1089H177.217Z" fill="#0F1210"></path>
    <path d="M338.33 47.9992V66.4041L335.636 69.0029H357.195V60.0795L351.945 66.1691H345.128V58.5011H348.453L352.018 61.4743V52.6941L348.453 55.6673H345.128V48.2342H352.346L357.195 53.8503V45.4041H335.636L338.33 47.9992Z" fill="#0F1210"></path>
    <path d="M326.074 59.4922V66.0113C325.396 66.1765 324.736 66.2682 324.127 66.2682C319.745 66.2682 316.439 63.4381 316.439 56.5923C316.439 51.402 318.969 47.9332 323.048 47.9332C324.138 47.9332 325.454 48.1461 326.96 48.6086L331.6 53.9751V46.3511C327.991 45.4298 325.086 45.0517 322.345 45.0517C315.127 45.0517 309.174 50.3852 309.174 57.2053C309.174 64.7082 314.82 69.359 321.149 69.359C324.521 69.359 327.058 68.7276 329.701 66.9657L332.377 69.2415H332.399V59.4958L335.093 57.0181H323.376L326.07 59.4958L326.074 59.4922Z" fill="#0F1210"></path>
    <path d="M354.497 0.456543C343.86 0.456543 334.99 7.60704 334.99 19.155C334.99 30.703 343.86 37.8535 354.497 37.8535C365.134 37.8535 374.004 30.703 374.004 19.155C374.004 7.60704 365.134 0.456543 354.497 0.456543ZM354.497 33.7496C349.054 33.7496 345.806 30.6993 345.806 19.155C345.806 7.61071 349.051 4.56037 354.497 4.56037C359.943 4.56037 363.188 7.61071 363.188 19.155C363.188 30.6993 359.943 33.7496 354.497 33.7496Z" fill="#0F1210"></path>
    <path d="M401.479 0.999804L406.346 6.26724V20.6857L388.137 0.999804H374.255L380.026 7.23263V32.0428L376.06 37.3065H389.581L384.714 32.0428V12.2982L407.859 37.3065H411.034V6.26724L415 0.999804H401.479Z" fill="#0F1210"></path>
    <path d="M202.87 64.7523C198.229 64.7523 195.16 61.5184 195.16 55.8802C195.16 50.6899 197.854 47.9258 201.838 47.9258C202.749 47.9258 203.901 48.1277 205.272 48.5645L209.945 53.9678V46.3438C206.289 45.4224 203.358 45.0443 200.97 45.0443C193.869 45.0443 187.894 50.3779 187.894 57.3632C187.894 64.844 193.661 69.3516 200.034 69.3516C205.637 69.3516 210.04 65.7397 211.167 60.4796C209.034 63.0527 206.151 64.7523 202.87 64.7523Z" fill="#0F1210"></path>
    <path d="M225.65 45.048C218.691 45.048 212.621 49.6988 212.621 57.2017C212.621 64.7045 218.691 69.3553 225.65 69.3553C232.609 69.3553 238.679 64.7045 238.679 57.2017C238.679 49.6988 232.609 45.048 225.65 45.048ZM225.65 66.4518C222.11 66.4518 219.883 64.4696 219.883 57.2017C219.883 49.9337 222.11 47.9515 225.65 47.9515C229.19 47.9515 231.417 49.9337 231.417 57.2017C231.417 64.4696 229.19 66.4518 225.65 66.4518Z" fill="#0F1210"></path>
    <path d="M248.689 66.1691V47.9992L251.383 45.4041H239.196L241.89 47.9992V66.4041L239.196 69.0029H259.935V60.0795L254.686 66.1691H248.689Z" fill="#0F1210"/>
    <path d="M271.422 66.1691V47.9992L274.116 45.4041H261.929L264.623 47.9992V66.4041L261.929 69.0029H282.668V60.0795L277.418 66.1691H271.422Z" fill="#0F1210"/>
    <path d="M287.356 47.9992V66.4041L284.662 69.0029H306.225V60.0795L300.971 66.1691H294.155V58.5011H297.483L301.044 61.4743V52.6941L297.483 55.6673H294.155V48.2342H301.372L306.225 53.8503V45.4041H284.662L287.356 47.9992Z" fill="#0F1210"></path>
    <path d="M102.017 67.9771C94.4319 76.2441 85.8472 80.3776 76.6266 80.3776C60.4564 80.3776 48.1471 70.3391 48.1471 53.4417C48.1471 37.5436 58.6396 26.0061 72.5386 26.0061C76.0179 26.0061 80.0302 26.7843 84.8358 28.6073L99.065 43.5394H99.1104V24.7343C87.5732 22.7811 76.1724 21.6001 70.7218 21.6001C48.7376 21.6001 33.2033 38.3158 33.2033 57.1664C33.2033 78.1064 49.7369 91.7334 70.6309 91.7334C87.119 91.7334 98.1111 82.9213 102.063 68.0225L102.017 67.9771Z" fill="#D42121"></path>
    <path d="M25.2091 64.6158V6.01992H37.7001C51.8263 6.01992 60.9106 14.4686 60.9106 35.3178C60.9106 56.1671 51.8263 64.6158 37.7001 64.6158H25.2091ZM77.7167 35.3178C77.7167 13.9235 60.8652 1.25049 36.5646 1.25049H0V1.29591L8.85725 8.88158V61.7541L0 69.3398V69.3852H36.5646C60.8652 69.3852 77.7167 56.7121 77.7167 35.3178Z" fill="#D42121"></path>
</svg>
      </span>
<span class="asvg__label show-for-sr">Davidson College</span>
</span>
 
{% if asvg is not empty or block('svg_object') is not empty %}
<span class="asvg {{ asvg.variant }}">
  <span class="asvg__object">
    {% block svg_object %}
      {% include asvg.pattern %}
    {% endblock %}
  </span>
  <span class="asvg__label show-for-sr">{{ asvg.alt_text }}</span>
</span>
{% endif %}
 
{
  "asvg": {
    "pattern": "@logo",
    "alt_text": "Davidson College"
  }
}
  • Content: 
    .asvg {
  
}

.newcity-logo svg {
  // Newcity Logo is 62 x 101, so the height is 1.629032258 the width
  width: 10rem;
  height: 16.29rem;
}

.newcity-logo-horizontal svg {
  // Newcity Vertical log is 159 x 54, so the height is 2.9444444 the width
  width: 10rem;
  height: 2.944444rem;
}

.newcity-logo-vertical svg {
  // Newcity Vertical log is 115 x 108, so the height is 1.064814815 the width
  width: 10rem;
  height: 10.648rem;
}

.newcity-logo-wordmark svg {
  // Newcity Logo is 115 x 15, so the height is .130434783 the width
  width: 10rem;
  height: 1.3rem;
}
  • URL: /components/raw/asvg/asvg.scss
  • Filesystem Path: patterns/molecules/media/asvg/asvg.scss
  • Size: 573 Bytes

Accessible SVGs

This is a pattern for including inline code for SVGs. SVGs included this way are very handy in some ways; for example, the fill can inherit the current color of an element (with fill=currentColor), or parts of the SVG can be targeted with style sheets.

Accessibility and scaling is a bit of a bear, however.

Accessibility

I’ve taken the research described at Simply Accessible and used that to make sure graphics provided by inline SVG are reliably announced to browsers. The typical way (aria-labeledby) or the expected way (title apparently don’t work in all screen readers. Instead, we place the SVG in a container flagged as aria-hidden so it is ignored by screen readers, then provide alternative text via content that is hidden from screen display only.

Scaling

SVG scaling is counter-intuitive. Excellent discussion how and why here. The upshot if it is that you will need to create styles that explicitly define height and width, either as precise measurements (px, em, rem) or more relative measurements (vh, vw, vmin). If you use vh or vw, make sure you use the same unit for both the height and the width to ensure the units stay the same size in both dimension, otherwise you won’t get a reliable aspect ratio. This is really only useful for design elements that are SVG and you can more or less pin down a range of sizes for. The width: 100%; height: auto; trick you do with images simply doesn’t work.