Rasmussen Logos
Next: Usage ›Rasmussen Horizontal Logo
Usage
‹ Previous: RasmussenWhere we're going we don't need pixels
We live in the age of pixels. As designers & developers of the web, pixels can be both our friends and our enemies. We want everything to look clear and sharp for anyone who uses any of the websites we work on, but we need to keep file sizes down for performance. There is pretty much only one way to go with icons, logos and illustrations on the web — SVG. Scalable Vector Graphics can look crisp at all screen resolutions, can have super small file sizes, and can be easily edited and modified. SVGs are supported in all modern browsers. Thus all of our logos are in SVG format.
Inline the SVG
Putting your SVG code inline will save an HTTP request. The only drawback being that the image isn’t cached by the browser. This is the easiest way to manipulate the image. And we avoid any headaches of maintaining inline SVG code by using PHP to include them and maintain a single instance of the SVG.
SVG Code
<svg version="logo-apus-horizontal" id="Layer_2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="https://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 475 101" enable-background="new 0 0 475 101" xml:space="preserve" aria-labelledby="svg-ras-logo-horizontal" role="img">
<style>
.fill-green--dark {
fill: var(--color-brand-primary);
}
.fill-green--medium {
fill: #517f56;
}
.fill-ras-gold-dark {
fill: var(--color-brand-tertiary);
}
.fill-ras-gold-light {
fill: #f9dda9;
}
</style>
<title id="svg-ras-logo-horizontal">ras-logo-horizontal</title><g id="ras-logo-horizontal-ras">
<path class="fill-green--dark" d="M127.8,31.4c6.8-1.7,11-6.3,11-12c0-9.8-11.2-11.1-20.9-11.1c-4.4,0-9.2,0.3-13,0.6l-1.5,0.1v45.6h10.2V13l0.5-0.1c0.1,0,2.4-0.6,4.9-0.6c6.4,0,10.1,3.1,10.1,8.5c0,5.6-4.5,8.9-12.4,9.2v2.5l9.6,22.1h11.4l-10.7-22.9L127.8,31.4z"></path><path class="fill-green--dark" d="M170.6,52.8h10.8l-15-40.9h-12.6L141,46.9l2.8,6h2.1l3.6-10.8h17.2L170.6,52.8z M151.2,37.3l7-20l7,20H151.2z"></path>
<path class="fill-green--dark" d="M204.5,28.6c-0.6-0.3-1.3-0.5-2-0.8c-4.1-1.6-9.1-3.5-9.1-7.8c0-2.8,2.3-4.5,6-4.5c5.7,0,11.3,3.7,12.3,4.4h0.1l0.6-7c-1.4-0.5-5.9-1.9-12.2-1.9c-7.5,0-15.5,3.2-15.5,12.2c0,6.7,4.9,9.4,11.2,12.3c0.6,0.3,1.3,0.6,1.9,0.8c4.1,1.7,8.3,3.5,8.3,7.6c0,3.4-2.3,5.4-6.4,5.4c-6.9,0-13.3-5.3-14.5-6.2h0l-0.7,8.1c1.5,0.6,6.7,2.6,14.1,2.6c10.9,0,16.4-4.5,16.4-13.2C215,33.6,210.5,31.1,204.5,28.6z"></path>
<polygon class="fill-green--dark" points="258.5,11.9 247.4,40.9 237.7,11.9 225.8,11.9 221.4,52.8 228.2,52.8 231.6,21.8 242.9,52.8 249,52.8 261,21.7 263.3,52.8 272.1,52.8 268.9,11.9"></polygon><path class="fill-green--dark" d="M307.5,28v10.2c0,0.8-0.1,2.1-0.3,2.9c-0.6,5.6-4.9,7.6-8.4,7.6c-6,0-9-3.6-9-10.7v-26h-10v27.9c0,9.3,5.7,13.9,17.6,13.9c11.2,0,17.8-5.6,17.8-14.9V11.9h-8.5C307,13.8,307.5,18.8,307.5,28z"></path>
<path class="fill-green--dark" d="M342.6,28.6c-0.6-0.3-1.2-0.5-1.9-0.8l-0.1,0c-4-1.6-9.1-3.5-9.1-7.8c0-2.8,2.3-4.5,6-4.5c5.7,0,11.3,3.7,12.3,4.4h0.1l0.6-7c-1.4-0.5-5.9-1.9-12.2-1.9c-7.5,0-15.5,3.2-15.5,12.2c0,6.7,4.9,9.4,11.2,12.3c0.6,0.3,1.3,0.6,1.9,0.8c4.1,1.7,8.3,3.5,8.3,7.6c0,3.4-2.3,5.4-6.4,5.4c-6.9,0-13.3-5.3-14.5-6.2h0l-0.7,8.1c1.5,0.6,6.7,2.6,14.1,2.6c10.9,0,16.4-4.5,16.4-13.2C353.1,33.6,348.6,31.1,342.6,28.6z"></path>
<path class="fill-green--dark" d="M378.5,28.6c-0.6-0.2-1.2-0.5-1.9-0.8l-0.1-0.1c-4-1.6-9.1-3.5-9.1-7.8c0-2.8,2.3-4.5,6-4.5c5.7,0,11.3,3.7,12.3,4.4h0.1l0.6-7c-1.4-0.5-5.9-1.9-12.2-1.9c-7.5,0-15.5,3.2-15.5,12.2c0,6.7,4.9,9.4,11.2,12.3c0.6,0.3,1.3,0.6,1.9,0.8c4.1,1.7,8.3,3.5,8.3,7.6c0,3.4-2.3,5.4-6.4,5.4c-6.9,0-13.3-5.3-14.5-6.2h0l-0.7,8.1c1.5,0.6,6.7,2.6,14.1,2.6c10.9,0,16.4-4.5,16.4-13.2C388.9,33.6,384.4,31.1,378.5,28.6z"></path>
<path class="fill-green--dark" d="M406.1,48.6v-15h16.2v-4.1h-16.2V16.3h2.8c5.9,0,11.9,1.2,13.9,1.6v-6h-26.7v40.9h27.8v-6.1c-2.3,0.6-8,1.8-13.8,1.8H406.1z"></path>
<polygon class="fill-green--dark" points="430.6,11.7 430.6,52.8 438,52.8 438,21.2 457.5,52.8 468,52.8 468,11.7 460.5,11.7 460.5,41.3 441.9,11.7"></polygon>
</g><g id="ras-logo-horizontal-shield"><path class="fill-green--medium" d="M0.1,7.1C-0.4,64.8,0,72.2,36.3,98c-0.7-3.4-2-7.6-3.2-11.1C3.2,64.3,2.8,57.5,3.2,6.2L0.1,7.1z"></path><path class="fill-green--medium" d="M80.1,7.1c-0.6-0.2-1.6-0.5-2.9-0.9c1,51.7-0.1,58.5-30,80.9c-1.1,3.4-2.4,7.6-3,10.9C80.7,72.7,81.3,65.1,80.1,7.1z"></path>
<path class="fill-green--dark" d="M33.2,86.9c-1.2-3.5-2.3-6.2-2.6-6.5c2.9,0.7,5.1,1.4,9.7,1.4c4.6,0,6.5-0.7,9.4-1.4c-0.3,0.3-1.4,3.1-2.6,6.7c29.9-22.4,31.1-29.2,30-80.9c0,0,0,0,0,0C73.8,5.3,59.3,0,40.5,0c0,0,0,0-0.1,0c-0.5,0-0.9,0-1.4,0c-0.1,0-0.2,0-0.3,0c-18,0.3-32,5.2-35.5,6.2C2.8,57.5,3.2,64.3,33.2,86.9z"></path>
<path class="fill-ras-gold-dark" d="M43.6,22.2c-6.8-7.5-6.6-16.9-6.6-16.9c-3.2,7-5.7,12.5-6.5,14.7c-3.3,9-1.1,12.8,2.7,18.8c-5.1,5.5-12.6,12.1-11.5,19.8c1,7.2,9.3,12.8,12.5,17.1c0,0-3.1-8.2,5.6-19.2c1.1-1.5,2.1-2.9,2.9-4.2c5.6,10,3.2,17.4,3.2,17.4c3.9-5.5,13.3-10.4,14.9-22.2C62.3,36.6,50.2,29.5,43.6,22.2z"></path>
<path class="fill-ras-gold-light" d="M44.3,36c-1-2.4-2.5-4.5-4.8-9.1c0,0,0.4,4.1-4.8,10.1c-0.5,0.5-0.9,1.1-1.4,1.6c1.2,1.9,2.7,3.9,4.5,6.2c2.1,2.6,3.8,5,5.1,7.3C46.2,47.1,47.2,43.1,44.3,36z"></path></g>
<g id="ras-logo-horizontal-university"><path class="fill-green--dark" d="M102.8,85.9V69h5.7v16.4c0,3.1,1.5,5.2,4.9,5.2c3.1,0,4.8-1.8,4.8-5.2V69h5.6v16.6c0,6.4-4.5,9.9-10.6,9.9C106.9,95.4,102.8,92.3,102.8,85.9z"></path><path class="fill-green--dark" d="M132.2,69h5.5l10.6,16.2h0.1V69h5.4v26h-5.4l-10.7-16.5h-0.1V95h-5.3V69z"></path><path class="fill-green--dark" d="M162.2,69h5.7v26h-5.7V69z"></path><path class="fill-green--dark" d="M174,69h6l5.5,18.8h0.1l5.6-18.8h5.5l-8.5,26.2h-5.7L174,69z"></path><path class="fill-green--dark" d="M202.9,69h18.6v4.8h-13v5.7h11.2v4.8h-11.2v6h13.1V95h-18.7V69z"></path><path class="fill-green--dark" d="M229.6,69h10.8c5.4,0,9.1,3.1,9.1,8.2c0,3.1-1.6,6.3-5,7.6l6.2,10.2h-6.2l-5.6-9.5h-3.6V95h-5.7V69zM239.7,81c2.6,0,4.2-1.4,4.2-3.7c0-2.7-1.8-3.8-4.3-3.8h-4.4V81H239.7z"></path><path class="fill-green--dark" d="M255.2,89.8l4.3-2.7c1.1,2.2,3.6,3.6,6.4,3.6c2.3,0,4.6-0.8,4.6-3c0-1.8-1.4-2.5-3.3-3l-4.5-1.1c-3.5-0.9-6.2-2.7-6.2-7.1c0-4.9,4.2-8.1,9.6-8.1c4.5,0,7.4,1.3,9.4,4.6l-4.1,2.7c-1.2-1.9-3.3-2.7-5.5-2.7c-2,0-3.9,0.8-3.9,2.8c0,1.7,1.7,2.3,3.7,2.9l4.3,1.1c3.4,0.8,6.1,2.9,6.1,7.2c0,5.2-4.7,8.2-10.3,8.2C261.3,95.4,257.1,93.8,255.2,89.8z"></path><path class="fill-green--dark" d="M283.3,69h5.7v26h-5.7V69z"></path><path class="fill-green--dark" d="M303,73.7h-7.4V69h20.5v4.7h-7.4V95H303V73.7z"></path><path class="fill-green--dark" d="M329,84.6L320.3,69h6.2l5.5,10.6l5.4-10.6h5.8l-8.7,15.7V95H329V84.6z"></path>
</g>
</svg>
PHP Include of SVG
<?php include($GLOBALS["commonContent"]."images/logos/rasmussen.svg") ?>
Color via CSS
One of the great things with using an SVG is we can change how elements within it are styled using good old CSS. Say we have a blue icon and we want it to be white on some pages, we can do that without having to make a new white icon. Ideal.
Our SVGs are set to inherit the color of their parent element by using currentColor as their fill value. Default SVG logo colors (Brand Colors) are handled by css classes. The recommended method to override the default is to apply a class or inline style to that parent. For example, the implementation below sets the logo to black by using the inline style color:#000. In cases where a logo contains multiple colors, registration color fills can be overriden with inline fills. For example, fill:#000.
<div class="svg-container" style="color:#000">
<?php include($GLOBALS["commonContent"]."images/logos/rasmussen.svg") ?>
</div>
Sizing and Positioning via CSS
When using images on the web in responsive designs there are two options you can use to style them, you can keep them at a fixed-size and adjust at breakpoints if needed, or allow them to resize with the page depending on their parent container.
For our SVG logos, we'll use the width of their parent container to determine size along with defined max-width values for specific use cases.
Responsive SVG / Changing Viewbox
Using a combination of CSS and JS we can responsively change an existing SVG image such as the logo used in our standard masthead.
Accessibility
For screen reader accessibility, provide a context-rich title for the SVG using <title> element. According to the W3C specification, we shouldn’t have to do anything extra for SVGs beyond providing the title and possibly a description because they should be available to the Accessibility API. Unfortunately, browser support isn't universal. So we'll add two extra attributes aria-labelledby and role to compensate.
<svg id="Layer_2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="https://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 475 101" enable-background="new 0 0 475 101" xml:space="preserve" aria-labelledby="logo-title" role="img">
<title id="svg-ras-logo-horizontal">ras-logo-horizontal</title><g id="ras-logo-horizontal-ras">