LP6 Style Guide: Icons

• accredited

• application

• career

• ccne

• flexible

• florida

• hopsital

• minnesota

• nurse

• nursing

• person

• cash

• time

• skills

• transfer

PHP Snippet

				
	<?php include($GLOBALS["commonContent"]."images/attributes/time.svg"); ?>
				
			

SVG Guidance

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.

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 CSS and/or a combination of CSS and JS we can responsively change an existing SVG image.

Implementing images as SVGs can solve accessibility challenges related to pixelated images and zooming. However, ensuring that SVG images are accessible requires some extra care. SVG images implemented as <img> tags should also include the role="image" attribute. SVG images implemented using the <svg> element should include the <title> and <desc>. An aria-labelledby attribute should reference the title.

References for SVG accessibility:

• The <title> element (Mozilla)
• The <desc> element (Mozilla)