Using Optimized SVG for Creative Commons Attribution-NonCommercial (CC BY-NC) logo button

By David Hoicka

See GitHub Page: https://github.com/david-hoicka/creative-commons-cc-by-nc-svg-optimized/

This article discusses how to improve Pagespeed website loading for Creative Commons Attribution-NonCommercial (CC BY-NC) by using optimized SVGs and Base64 Data-URIs.

Accessibility is also improved using ARIA attributes and tags.

This article outlines 4 ways to optimize SVG image logos for Creative Commons Attribution-NonCommercial (CC BY-NC).

Why use SVG? SVG images often use smaller files. SVGs scale readily as vector images. SVGs can be programmatically controlled and modified.

The Creative Commons CC BY-NC SVG image included here is optimized at about 1.5 kb, smaller size for faster HTML page loading than some commonly used Creative Commons CC BY-NC images.

In addition, although Base64 is generally slightly larger than the original SVG, using Base64 CSS Data-URIs can eliminate one or more HTML requests, as the image data can be cached in the CSS, thus speeding page load and Pagespeed.

Kindly refer to page source view for code details.

1. Example 1. HTML5 Inline SVG Image Element
2. Example 2. Include SVG using <img> tag
3. Example 3. Using SVG as a CSS Background-Image
4. Example 4. Using Base64 Data URI's for SVG images
5. Summary: Lightweight Optimized SVGs for Creative Commons CC BY-NC
6. Downloads: Optimized SVGs and Base64 Data-URIs for Creative Commons CC BY-NC

Example 1. HTML5 Inline SVG Image Element

In this first example, the SVG logo for Creative Commons CC BY-NC is placed inline as an HTML5 <SVG> element:

• Pro: easy to install, and saves HTML request as SVG code is embedded in HTML5 text.
• Con: Obscures flow of code on HTML page with distracting SVG XML text. If used on more than one page, is downloaded for every page view, i.e. non-cacheable.

Example 2. Include SVG using <img> tag

In this second example, the SVG logo for Creative Commons CC BY-NC is inserted from a separate SVG file using an HTML5 <IMG> element:

• Pro: also easy to install. Generally requires only one HTTP request as SVG file can be cached.
• Con: requires at least one HTTP request, which can have some effect on page load time.

Example 3. Using SVG as a CSS Background-Image

In this third example, the SVG logo for Creative Commons CC BY-NC is inserted as a background-image using CSS:

• Pro: ok to install. Generally requires only one HTTP request as SVG file can be cached.
• Con: requires at least one HTTP request, which can have some effect on page load time.

The SVG image size can be set using CSS. For example, this image size is set to 90px x 30px using CSS:

Next, the image size can be changed by setting CSS width and height to 14em x 5em, and the enlarged SVG image generally remains crisply rendered:

Example 4. Using Base64 Data URI's for SVG images

In this fourth example, the SVG logo for Creative Commons CC BY-NC is inserted as a background-image using a base64 data-URI in CSS. One would think that an unencoded SVG text would work as a data-URI; however, browser support for unencoded SVG text data-URIs is variable.

• Pro: Saves HTML request as SVG code is embedded in CSS text.
• Con: Not so easy to install. Careful attention to formatting and punctuation around data-URI is required. A helpful website for creating CSS base64 background images from SVG is: http://b64.io/. Browser may take a few more milliseconds to render the image, probably imperceptable if a few images used.

As a further point of interest, this Example 4 creates a clickable background-image link:

Similarly, the SVG image size can be changed by setting CSS width and height to 14em x 5em, and the enlarged SVG image generally shows as crisply rendered:

Summary: Lightweight Optimized SVGs for Creative Commons CC BY-NC Attribution-NonCommercial

As shown above, there are several common options for SVGs in HTML5 webpages, each with pros and cons.

• For fastest one-time page loads, optimized inline SVG may be best. See Example 1

• For fastest page loads where an image is repeated a number of times on a website, the SVG data-URI method is likely best. See Example 4.

Here are the download links:

• Click to download SVG: creative-commons-cc-by-nc.svg
• Click to download PNG: creative-commons-cc-by-nc.png
• Click to download base64 CSS: cc-by-nc.css