By David Hoicka
See GitHub Page: https://github.com/david-hoicka/creative-commons-plus-svg-lightweight
This article discusses how to improve Pagespeed website loading for Creative Commons Plus (CCPlus, CC+) 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 Plus (CCPlus, CC+).
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 Plus SVG included here is optimized at about 1.1 kb, smaller size for faster HTML page loading than some commonly used Creative Commons Plus 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.
- Example 1. HTML5 Inline SVG Image Element
- Example 2. Include SVG using <img> tag
- Example 3. Using SVG as a CSS Background-Image
- Example 4. Using Base64 Data URIs for SVG images
- Summary: Use Lightweight Optimized SVGs and Base64 Data-URIs for Creative Commons Plus
- Downloads: Optimized SVGs and Base64 Data-URIs for Creative Commons Plus
Example 1. HTML5 Inline SVG Image Element
In this first example, the SVG logo for Creative Commons Plus 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 Plus 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 Plus 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 URIs for SVG images
In this fourth example, the SVG logo for Creative Commons Plus is inserted as a background-image using a base64 data-URI in CSS. One would think that an unencoded SVG would work as a data-URI; however, browser support for unencoded SVG 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: Use Lightweight Optimized SVGs and Base64 Data-URIs for Creative Commons Plus
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-plus-ccplus.svg
- Click to download PNG: creative-commons-plus-ccplus.png
- Click to download base64 CSS: ccplus.css