SVG Use Demo

.gitattributes

# Auto detect text files and perform LF normalization
* text=auto

# Custom for Visual Studio
*.cs     diff=csharp

# Standard to msysgit
*.doc	 diff=astextplain
*.DOC	 diff=astextplain
*.docx diff=astextplain
*.DOCX diff=astextplain
*.dot  diff=astextplain
*.DOT  diff=astextplain
*.pdf  diff=astextplain
*.PDF	 diff=astextplain
*.rtf	 diff=astextplain
*.RTF	 diff=astextplain

.gitignore

# Ignore
*.dav
*.bak
*.save
*~
*.log
*.orig
Thumbs.db

#################
## Eclipse
#################

*.pydevproject
.project
.metadata
bin/
tmp/
*.tmp
*.bak
*.swp
*~.nib
local.properties
.classpath
.settings/
.loadpath

# External tool builders
.externalToolBuilders/

# Locally stored "Eclipse launch configurations"
*.launch

# CDT-specific
.cproject

# PDT-specific
.buildpath


#################
## Visual Studio
#################

## Ignore Visual Studio temporary files, build results, and
## files generated by popular Visual Studio add-ons.

# User-specific files
*.suo
*.user
*.sln.docstates

# Build results

[Dd]ebug/
[Rr]elease/
x64/
build/
[Bb]in/
[Oo]bj/

# MSTest test Results
[Tt]est[Rr]esult*/
[Bb]uild[Ll]og.*

*_i.c
*_p.c
*.ilk
*.meta
*.obj
*.pch
*.pdb
*.pgc
*.pgd
*.rsp
*.sbr
*.tlb
*.tli
*.tlh
*.tmp
*.tmp_proj
*.log
*.vspscc
*.vssscc
.builds
*.pidb
*.log
*.scc

# Visual C++ cache files
ipch/
*.aps
*.ncb
*.opensdf
*.sdf
*.cachefile

# Visual Studio profiler
*.psess
*.vsp
*.vspx

# Guidance Automation Toolkit
*.gpState

# ReSharper is a .NET coding add-in
_ReSharper*/
*.[Rr]e[Ss]harper

# TeamCity is a build add-in
_TeamCity*

# DotCover is a Code Coverage Tool
*.dotCover

# NCrunch
*.ncrunch*
.*crunch*.local.xml

# Installshield output folder
[Ee]xpress/

# DocProject is a documentation generator add-in
DocProject/buildhelp/
DocProject/Help/*.HxT
DocProject/Help/*.HxC
DocProject/Help/*.hhc
DocProject/Help/*.hhk
DocProject/Help/*.hhp
DocProject/Help/Html2
DocProject/Help/html

# Click-Once directory
publish/

# Publish Web Output
*.Publish.xml
*.pubxml
*.publishproj

# NuGet Packages Directory
## TODO: If you have NuGet Package Restore enabled, uncomment the next line
#packages/

# Windows Azure Build Output
csx
*.build.csdef

# Windows Store app package directory
AppPackages/

# Others
sql/
*.Cache
ClientBin/
[Ss]tyle[Cc]op.*
~$*
*~
*.dbmdl
*.[Pp]ublish.xml
*.pfx
*.publishsettings

# RIA/Silverlight projects
Generated_Code/

# Backup & report files from converting an old project file to a newer
# Visual Studio version. Backup files are not needed, because we have git ;-)
_UpgradeReport_Files/
Backup*/
UpgradeLog*.XML
UpgradeLog*.htm

# SQL Server files
App_Data/*.mdf
App_Data/*.ldf

#############
## Windows detritus
#############

# Windows image file caches
Thumbs.db
ehthumbs.db

# Folder config file
Desktop.ini

# Recycle Bin used on file shares
$RECYCLE.BIN/

# Mac crap
.DS_Store


#############
## Python
#############

*.py[cod]

# Packages
*.egg
*.egg-info
dist/
build/
eggs/
parts/
var/
sdist/
develop-eggs/
.installed.cfg

# Installer logs
pip-log.txt

# Unit test / coverage reports
.coverage
.tox

#Translations
*.mo

#Mr Developer
.mr.developer.cfg

.htaccess

Options -Indexes +SymLinksIfOwnerMatch
DirectoryIndex index.html

<IfModule headers_module>
	Header set X-Frame-Options "SAMEORIGIN"
	Header set X-Content-Type-Options nosniff
	Header set X-XSS-Protection "1; mode=block"
	Header set Cache-Control "public, must-revalidate, proxy-revalidate, no-transform"
	Header set X-UA-Compatible "IE=edge,chrome=1"
	Header set Connection "Keep-Alive"
	# `mod_headers` can't match based on the content-type, however, we only
	# want to send this header for HTML pages and not for the other resources
	<FilesMatch "\.(appcache|crx|css|eot|gif|htc|ico|jpe?g|js|m4a|m4v|manifest|mp4|oex|oga|ogg|ogv|otf|pdf|png|safariextz|svg|svgz|ttf|vcf|webapp|webm|webp|woff2?|xml|xpi)$">
		Header set Cache-Control "public, must-revalidate, proxy-revalidate, no-transform"
		Header unset X-Frame-Options
		Header unset X-XSS-Protection
		Header unset X-UA-Compatible
	</FilesMatch>
	<Files manifest.appcache>
		# Header set Cache-Control "public, no-store, must-revalidate, proxy-revalidate, no-transform"
		# Header set Cache-Control "public, no-cache, no-store, must-revalidate, proxy-revalidate, no-transform"
		Header unset Accept-Ranges
	</Files>
	<IfModule ssl_module>
		Header set Strict-Transport-Security max-age=16070400;
	</IfModule>
	<IfModule setenvif_module>
		<FilesMatch "\.(gif|ico|jpe?g|png|svgz?|webp)$">
			SetEnvIf Origin ":" IS_CORS
			Header set Access-Control-Allow-Origin "*" env=IS_CORS
		</FilesMatch>
	</IfModule>
</IfModule>

# ------------------------------------------------------------------------------
# | UTF-8 encoding															 |
# ------------------------------------------------------------------------------

# Use UTF-8 encoding for anything served as `text/html` or `text/plain`.
AddDefaultCharset utf-8

# ------------------------------------------------------------------------------
# | Proper MIME types for all files											|
# ------------------------------------------------------------------------------
<IfModule mime_module>
	AddCharset utf-8 .atom .css .js .json .rss .vtt .webapp .xml
	# Audio
	AddType audio/mp4									.m4a .f4a .f4b
	AddType audio/ogg									.oga .ogg

	# JavaScript
	# Normalize to standard type (it's sniffed in IE anyways):
	# http://tools.ietf.org/html/rfc4329#section-7.2
	AddType application/javascript						.js .jsonp
	AddType application/json							.json

	# Video
	AddType video/mp4									.mp4 .m4v .f4v .f4p
	AddType video/ogg									.ogv
	AddType video/webm									.webm
	AddType video/x-flv									.flv

	# Web fonts
	AddType application/font-woff						.woff
	AddType application/font-woff2						.woff2
	AddType application/vnd.ms-fontobject				.eot

	# Browsers usually ignore the font MIME types and sniff the content,
	# however, Chrome shows a warning if other MIME types are used for the
	# following fonts.
	AddType application/x-font-ttf						.ttc .ttf
	AddType font/opentype								.otf

	# Make SVGZ fonts work on iPad:
	# https://twitter.com/FontSquirrel/status/14855840545
	AddType	 image/svg+xml								.svg .svgz
	AddEncoding gzip									.svgz

	# Other
	AddType application/octet-stream					.safariextz
	AddType application/x-chrome-extension				.crx
	AddType application/x-opera-extension				.oex
	AddType application/x-shockwave-flash				.swf
	AddType application/x-web-app-manifest+json			.webapp
	AddType application/x-xpinstall						.xpi
	AddType application/xml								.atom .rdf .rss .xml
	AddType text/x-markdown                             .md
	AddType image/webp									.webp
	AddType image/x-icon								.ico
	AddType text/cache-manifest							.appcache .manifest
	AddType text/vtt									.vtt
	AddType text/x-component							.htc
	AddType text/x-vcard								.vcf
	AddType application/pgp-keys                        .gpg .pgp
</IfModule>

# Block access to backup and source files.
# These files may be left by some text editors and can pose a great security
# danger when anyone has access to them.

<FilesMatch "(^#.*|~.*|\.(bak|ht.*|dav|conf(ig)?|dist|fla|inc|ini|log|psd|sql|sw[op]|asc|(ba)?sh|md|yml|lock|log|git.*|gpg|pgp))$">
	Require all denied
</FilesMatch>
<FilesMatch "^(ajax|custom|unit)\.php$">
	Require all denied
</FilesMatch>
<FilesMatch "\.html$">
	Require all granted
</FilesMatch>
<IfModule deflate_module>
	# Force compression for mangled headers.
	# http://developer.yahoo.com/blogs/ydn/posts/2010/12/pushing-beyond-gzipping
	<IfModule setenvif_module>
		<IfModule headers_module>
			SetEnvIfNoCase ^(Accept-EncodXng|X-cept-Encoding|X{15}|~{15}|-{15})$ ^((gzip|deflate)\s*,?\s*)+|[X~-]{4,13}$ HAVE_Accept-Encoding
			RequestHeader append Accept-Encoding "gzip,deflate" env=HAVE_Accept-Encoding
		</IfModule>
	</IfModule>

	# Compress all output labeled with one of the following MIME-types
	# (for Apache versions below 2.3.7, you don't need to enable `mod_filter`
	#  and can remove the `<IfModule filter_module>` and `</IfModule>` lines
	#  as `AddOutputFilterByType` is still in the core directives).
	<IfModule filter_module>
		AddOutputFilterByType DEFLATE application/atom+xml \
		application/javascript \
		application/json \
		application/rss+xml \
		application/vnd.ms-fontobject \
		application/x-font-ttf \
		application/x-web-app-manifest+json \
		application/xhtml+xml \
		application/xml \
		font/opentype \
		image/svg+xml \
		image/x-icon \
		text/css \
		text/html \
		text/plain \
		text/x-component \
		text/xml
	</IfModule>
</IfModule>

# ------------------------------------------------------------------------------
# | Content transformations													|
# ------------------------------------------------------------------------------

# Prevent some of the mobile network providers from modifying the content of
# your site: http://www.w3.org/Protocols/rfc2616/rfc2616-sec14.html#sec14.9.5.


# ------------------------------------------------------------------------------
# | ETag removal																|
# ------------------------------------------------------------------------------
# Since we're sending far-future expires headers (see below), ETags can
# be removed: http://developer.yahoo.com/performance/rules.html#etags.

# `FileETag None` is not enough for every server.
# <IfModule headers_module>
# 	Header unset ETag
# </IfModule>
#
# FileETag None

# ------------------------------------------------------------------------------
# | Expires headers (for better cache control)								 |
# ------------------------------------------------------------------------------

# The following expires headers are set pretty far in the future. If you don't
# control versioning with filename-based cache busting, consider lowering the
# cache time for resources like CSS and JS to something like 1 week.


# The following expires headers are set pretty far in the future. If you don't
# control versioning with filename-based cache busting, consider lowering the
# cache time for resources like CSS and JS to something like 1 week.

<IfModule expires_module>
	ExpiresActive on
	ExpiresDefault										"access plus 1 month"

	# CSS
	ExpiresByType text/css								"access plus 1 year"

	# Data interchange
	ExpiresByType application/json						"access plus 0 seconds"
	ExpiresByType application/xml						"access plus 0 seconds"
	ExpiresByType text/xml								"access plus 0 seconds"

	# Favicon (cannot be renamed!)
	ExpiresByType image/x-icon							"access plus 1 week"

	# HTML components (HTCs)
	ExpiresByType text/x-component						"access plus 1 month"

	# HTML
	ExpiresByType text/html								"access plus 0 seconds"

	# JavaScript
	ExpiresByType application/javascript				"access plus 1 year"

	# Manifest files
	ExpiresByType application/x-web-app-manifest+json	"access plus 0 seconds"
	ExpiresByType text/cache-manifest					"access plus 0 seconds"

	# Media
	ExpiresByType audio/ogg								"access plus 1 month"
	ExpiresByType image/gif								"access plus 1 month"
	ExpiresByType image/jpeg							"access plus 1 month"
	ExpiresByType image/png								"access plus 1 month"
	ExpiresByType video/mp4								"access plus 1 month"
	ExpiresByType video/ogg								"access plus 1 month"
	ExpiresByType video/webm							"access plus 1 month"

	# Web feeds
	ExpiresByType application/atom+xml					"access plus 1 hour"
	ExpiresByType application/rss+xml					"access plus 1 hour"

	# Web fonts
	ExpiresByType application/font-woff					"access plus 1 month"
	ExpiresByType application/vnd.ms-fontobject			"access plus 1 month"
	ExpiresByType application/x-font-ttf				"access plus 1 month"
	ExpiresByType font/opentype							"access plus 1 month"
	ExpiresByType image/svg+xml							"access plus 1 month"
</IfModule>

# ------------------------------------------------------------------------------
# | Filename-based cache busting												|
# ------------------------------------------------------------------------------

# If you're not using a build process to manage your filename version revving,
# you might want to consider enabling the following directives to route all
# requests such as `/css/style.12345.css` to `/css/style.css`.

# To understand why this is important and a better idea than `*.css?v231`, read:
# http://stevesouders.com/blog/2008/08/23/revving-filenames-dont-use-querystring

# ------------------------------------------------------------------------------
# | File concatenation														 |
# ------------------------------------------------------------------------------

# Allow concatenation from within specific CSS and JS files, e.g.:
# Inside of `script.combined.js` you could have
#	<!--#include file="libs/jquery.js" -->
#	<!--#include file="plugins/jquery.idletimer.js" -->
# and they would be included into this single file.

# <IfModule include_module>
# 	<FilesMatch "\.?(combined|polyfills)\.js$">
# 		Options +Includes
# 		AddOutputFilterByType INCLUDES application/javascript application/json
# 		SetOutputFilter INCLUDES
# 	</FilesMatch>
# </IfModule>

<IfModule rewrite_module>
	# Redirect all non-existing to index.php
	RewriteEngine on
	<IfModule ssl_module>
		# Force HTTPS
		RewriteCond %{HTTPS} !=on
		RewriteRule .* https://%{SERVER_NAME}%{REQUEST_URI} [R=301,L]
	</IfModule>
	RewriteCond %{REQUEST_FILENAME} !-f
	RewriteCond %{REQUEST_FILENAME} !-d
	RewriteCond %{REQUEST_FILENAME} !-l
	RewriteRule . ./index.php [L]
</IfModule>

# ------------------------------------------------------------------------------
# | Error pages		  													 	 |
# ------------------------------------------------------------------------------
ErrorDocument 400 /index.php
ErrorDocument 401 /index.php
ErrorDocument 402 /index.php
ErrorDocument 403 /index.php
ErrorDocument 404 /index.php
ErrorDocument 500 /index.php

appcache.js

if (('applicationCache' in window) && document.documentElement.hasAttribute('manifest')) {
	applicationCache.addEventListener('updateready', function(event) {
		if (applicationCache.status === applicationCache.UPDATEREADY) {
			applicationCache.update() && applicationCache.swapCache();
			if (confirm('A new version of this site is available. Load it?')) {
				location.reload();
			}
		}
	});
}

combined.svg

elements.css

body {
	padding: 0;
	margin: 0;
	max-width: 100%;
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	background: var(--body-bg);
}
code {
	font-size: 0.9rem;
	padding: 0.1rem;
	background-color: #E0E0E0;
	border-radius: 0.2rem;
	display: inline-block;
	white-space: pre;
}
pre, code, main {
	max-width: 100%;
	overflow-x: auto;
}
pre > code {
	display: block;
	margin: auto;
	padding: 1rem;
	background-color: rgb(51, 51, 51);
	color: rgb(255, 249, 217);
	border-radius: 0.3rem;
}

footer.css

footer {
	background: var(--header-bg);
	flex: 0 0 100%;
	display: flex;
	flex-flow: column nowrap;
	font-family: 'Ubuntu';
	color: whitesmoke;
	text-align: center;
	border-top: 4px solid var(--header-border);
}

header.css

header {
	background: var(--header-bg);
	flex: 0 0 100%;
	display: flex;
	flex-flow: column nowrap;
	font-family: 'Ubuntu';
	color: whitesmoke;
	text-align: center;
	border-bottom: 4px solid var(--header-border);
}
header h1 {
	text-transform: capitalize;
	font-family: var(--header-font);
}
header a {
	color: inherit;
	text-decoration: none;
}
nav {
	flex: 0 0 80%;
	display: flex;
	justify-content: center;
}
nav a {
	flex: 0 1 18%;
	max-width: calc(25% - 2em);
	font-size: 1.6em;
	font-weight: bold;
	text-shadow: 2px 2px 0px #4D4747;
	padding: 0.3em 0.8em 0.3em 0.8em;
	background: var(--nav-bg);
	border-width: 0 0 2px 0;
	transition: all 600ms;
}
nav a:not(:last-child) {
	margin-right: 0.2em;
}
nav a:hover {
	background-color: var(--nav-hover-bg);
}

icon-128.png

icon-16.png

icon-256.png

icon-48.png

icon-512.png

icon-60.png

icon.svg

<svg height="1024" width="768" xmlns="http://www.w3.org/2000/svg">
  <path d="M416 384l96 96-96 96 64 64 160-160-160-160-64 64z m-416-320v832h768v-832h-768z m704 768h-640v-704h640v704z m-352-256l-96-96 96-96-64-64-160 160 160 160 64-64z" />
</svg>

import.css

@charset 'UTF-8';
@import url(viewport.css);
@import url(responsive.css);
@import url(elements.css);
@import url(header.css);
@import url(main.css);
@import url(footer.css);
@import url(misc.css);
@import url(https://fonts.googleapis.com/css?family=Ubuntu|Acme);

:root {
	--body-bg: #555;
	--header-bg: #242020;
	--header-border: #00B4D2;
	--nav-bg: #E17B18;
	--nav-hover-bg: #52BD38;
	--main-bg: whitesmoke;
	--section-bg: #eee;

	--header-font: 'Acme';
	--main-font: 'Ubuntu';
}

index.html

<!DOCTYPE html>
<html lang="en" dir="ltr" manifest="manifest.appcache">
	<head>
		<title>SVG &lt;use&gt; Demo</title>
		<meta charset="utf-8">
		<meta name="robots" content="nofollow, noindex">
		<meta name="author" content="Chris Zuber">
		<meta name="viewport" content="width=device-width, height=device-height">
		<link rel="prefetch" href="combined.svg" type="image/svg+xml">
		<link rel="stylesheet" href="style.css" type="text/css">
		<link rel="icon" type="image/png" sizes="16x16" href="icon-16.png">
		<link rel="icon" type="image/png" sizes="48x48" href="icon-48.png">
		<link rel="icon" type="image/png" sizes="60x60" href="icon-60.png">
		<link rel="icon" type="image/png" sizes="128x128" href="icon-128.png">
		<link rel="icon" type="image/png" sizes="256x256" href="icon-256.png">
		<link rel="icon" type="image/png" sizes="512x512" href="icon-512.png">
		<link rel="icon" type="image/svg+xml" sizes="any" href="icon.svg">
		<script type="text/javascript" src="appcache.js" async defer></script>
	</head>
	<body>
		<header>
			<h1>
				<kbd>combined.svg</kbd> created by combining <a href="https://github.com/github/octicons/" title="github/octicons">Octicons <svg><use xlink:href="combined.svg#mark-github"/></svg></a>
			</h1>
			<nav>
				<a href="#examples">Examples</a>
				<a href="#usage">Usage</a>
				<a href="#results">Results</a>
				<a href="#benefits">Benefits</a>
			</nav>
		</header>
		<main>
			<section id="examples">
				<h2>Examples:</h2>
				<span class="icon">
					<svg><use xlink:href="combined.svg#home"/></svg>
				</span>
				<span class="icon">
					<svg><use xlink:href="combined.svg#code"/></svg>
				</span>
				<span class="icon">
					<svg><use xlink:href="combined.svg#alert"/></svg>
				</span>
				<span class="icon">
					<svg><use xlink:href="combined.svg#info"/></svg>
				</span>
				<span class="icon">
					<svg><use xlink:href="combined.svg#question"/></svg>
				</span>
				<span class="icon">
					<svg><use xlink:href="combined.svg#sign-in"/></svg>
				</span>
				<span class="icon">
					<svg><use xlink:href="combined.svg#sign-out"/></svg>
				</span>
				<span class="icon">
					<svg><use xlink:href="combined.svg#check"/></svg>
				</span>
				<span class="icon">
					<svg><use xlink:href="combined.svg#x"/></svg>
				</span>
				<span class="icon">
					<svg><use xlink:href="combined.svg#rss"/></svg>
				</span>
				<span class="icon">
					<svg><use xlink:href="combined.svg#sync"/></svg>
				</span>
				<span class="icon">
					<svg><use xlink:href="combined.svg#code"/></svg>
				</span>
				<span class="icon">
					<svg><use xlink:href="combined.svg#mail"/></svg>
				</span>
				<span class="icon">
					<svg><use xlink:href="combined.svg#search"/></svg>
				</span>
				<span class="icon">
					<svg><use xlink:href="combined.svg#location"/></svg>
				</span>
				<span class="icon">
					<svg><use xlink:href="combined.svg#tag"/></svg>
				</span>
				<span class="icon">
					<svg><use xlink:href="combined.svg#device-mobile"/></svg>
				</span>
				<span class="icon">
					<svg><use xlink:href="combined.svg#device-desktop"/></svg>
				</span>
				<span class="icon">
					<svg><use xlink:href="combined.svg#screen-full"/></svg>
				</span>
				<span class="icon">
					<svg><use xlink:href="combined.svg#terminal"/></svg>
				</span>
				<span class="icon">
					<svg><use xlink:href="combined.svg#list-ordered"/></svg>
				</span>
				<span class="icon">
					<svg><use xlink:href="combined.svg#list-unordered"/></svg>
				</span>
				<span class="icon">
					<svg><use xlink:href="combined.svg#history"/></svg>
				</span>
			</section>
			<section id="usage">
				<h2>Usage:</h2>
				<ol>
					<li>Gather a collection of SVGs to use</li>
					<li>Combine them in a single SVG file as follows:
		<pre>
			<code>
&lt;svg xmlns="http://www.w3.org/2000/svg"&gt;
	&lt;symbol height="100%" width="100%" id="icon1" viewBox="0 0 1024 1024"&gt;
		&lt;path d="..."/&gt;
	&lt;/symbol&gt;
	&lt;symbol height="100%" width="100%" id="icon2" viewBox="0 0 1024 1024"&gt;
		&lt;path d="..."/&gt;
	&lt;/symbol&gt;
&lt;/svg&gt;
			</code>
		</pre>
					</li>
					<li>
						Use them as follows:<br>
						<code>&lt;svg&gt;&lt;use xlink:href="combined.svg#icon1"/&gt;&lt;/svg&gt;</code>
					</li>
				</ol>
			</section>
			<section  id="results">
				<h2>Results:</h2>
				<ul>
					<li>Total icons (this example): 24</li>
					<li>Total size: 9.0kB uncompressed, 3.2kB GZipped</li>
				</ul>
			</section>
			<section id="benefits">
				<h2>Benefits:</h2>
				<ul>
					<li>Small size (as mention in <a href="#results">results</a>)</li>
					<li>As they are SVGs, they display perfectly on nearly any size or resolution</li>
					<li>Since they are combined as <code>&lt;symbol&gt;</code>s in a single <code>&lt;svg&gt;</code>, all 24 icons are loaded in a single request</li>
					<li>Though they are an external resource, they can still be altered using CSS &amp; JavaScript (hover over them in <a href="#examples">examples</a>)</li>
					<li>If desired, SVG can be included inline.<br><strong>Don't forget to update the <code>xlink:href</code> attributes to only include the ID, and make sure that the source SVG is hidden.</strong></li>
				</ul>
				</section>
		</main>
		<footer>
			<div class="links">
				<a href="https://github.com/shgysk8zer0/">
					<svg height="50"><use xlink:href="combined.svg#mark-github"/></svg>
				</a>
				<a href="mailto:shgysk8zer0@gmail.com">
					<svg height="50"><use xlink:href="combined.svg#mail"/></svg>
				</a>
			</div>
			<div>
				<a rel="license" href="http://creativecommons.org/licenses/by-sa/4.0/"><svg width="88" height="31"><use xlink:href="combined.svg#CreativeCommons"/></svg></a><br /><span xmlns:dct="http://purl.org/dc/terms/" property="dct:title">SVG &lt;use&gt; Demo</span> by <a xmlns:cc="http://creativecommons.org/ns#" itemprop="author" href="https://gist.github.com/shgysk8zer0/748d487d2d7ad22c3d8d" property="cc:attributionName" rel="cc:attributionURL">shgysk8zer0</a> is licensed under a <a rel="license" itemprop="license" href="http://creativecommons.org/licenses/by-sa/4.0/">Creative Commons Attribution-ShareAlike 4.0 International License</a>.
			</div>
		</footer>
	</body>
</html>

main.css

main {
	font-family: var(--main-font);
	margin: 1.2em 0 3em 0;
	padding: 0.7em 1.2em;
	box-shadow: 0.2em 0.2em 0 gray, 0.5em 0.5em black, -0.8em 0.8em 2em black;;
	background: var(--main-bg);
	flex: 0 0 80%;
}
section {
	overflow: visible;
	background: var(--section-bg);
	border: 1px solid #aaa;
	margin: 1em 0;
	padding: 0.3em 0.1em;
	box-shadow: 0.1em 0.1em 0.2em #444;
}

manifest.appcache

CACHE MANIFEST
# VERSION 2015-06-04 01:49
CACHE:

# SCRIPTS
appcache.js

# STYLESHEETS
style.css

# IMAGES
combined.svg

# ICONS
icon-16.png
icon-48.png
icon-60.png
icon-128.png
icon-256.png
icon-512.png
icon.svg

# CURSORS

# HTML IMPORTS

# FONTS
https://fonts.gstatic.com/s/acme/v5/-nVwQJDyFoBcrvpER8f-lA.woff
https://fonts.gstatic.com/s/ubuntu/v7/_xyN3apAT_yRRDeqB3sPRg.woff

NETWORK:
import.css
viewport.css
responsive.css
elements.css
header.css
main.css
footer.css
misc.css
https://fonts.googleapis.com/css?family=Ubuntu|Acme

FALLBACK:

SETTINGS:
fast

manifest.webapp

{
	"version": "0.0.1",
	"name": "SVG Use Demo",
	"description": "A demo showing responsive design features, including SVG <use>.",
	"launch_path": "/demos/svg-use/",
	"icons": {
		"16": "icon-16.png",
		"48": "icon-48.png",
		"60": "icon-60.png",
		"128": "icon-128.png",
		"256": "icon-256.png",
		"512": "icon-512.png"
	},
	"developer": {
		"name": "Chris Zuber",
		"url": "https://chriszuber.com"
	},
	"type": "web",
	"permissions": {
		"desktop-notification": {
			"description": "Allow notifications of certain events."
		}
	},
	"installs_allowed_from": ["*"],
	"csp": "default-src 'self';script-src 'self' ;style-src 'self' //fonts.googleapis.com;font-src 'self' //fonts.gstatic.com;img-src 'self' data:;media-src 'self' mediastream:;connect-src 'self';frame-src 'self';frame-ancestors 'self';object-src 'self'"

}

misc.css

#examples {
	display: flex;
	align-items: space-around;
	justify-content: space-around;
	flex-flow: row wrap;
}
#examples h2 {
	flex: 0 0 100%;
}
section > h2 {
	margin: 0 0 0 1.2em;
}
a svg:not([height]) {
	width: 1em;
	height: 1em;
}
.icon {
	transform-origin: center;
	display: inline-block;
	width: 3vmax;
	height: 3vmax;
	transition: all 600ms cubic-bezier(0.18,0.89,0.32,1.28) 0s;
	overflow: visible;
}
.icon:hover {
	color: blue;
	transform: rotate(360deg) scale(1.8);
}
.icon svg {
	fill: currentColor;
	width: 100%;
	max-height: 100%;
	transition: filter 600ms;
}
.icon:hover {
	filter: drop-shadow(0.3em 0.3em 0.4em #333);
}

responsive.css

@media screen and (min-width:1000px) {
	:root {
		font-size: 1.3vw;
	}
}
@media screen and (max-width:999px) and (min-width:500px) {
	:root {
		font-size: 2vw;
	}
}
@media screen and (max-width: 499px) {
	:root {
		font-size: 2.5vw;
	}
}

style.css

@charset 'UTF-8';@-moz-viewport{width:auto;width:100%;width:device-width;min-width:320px;height:auto;height:100%;height:device-height;zoom:1;min-zoom:1;max-zoom:1;user-zoom:fixed;}@-webkit-viewport{width:auto;width:100%;width:device-width;height:auto;height:100%;height:device-height;zoom:1;min-zoom:1;max-zoom:1;user-zoom:fixed;}@-o-viewport{width:auto;width:100%;width:device-width;height:auto;height:100%;height:device-height;zoom:1;min-zoom:1;max-zoom:1;user-zoom:fixed;}@-ms-viewport{width:auto;width:100%;width:device-width;height:auto;height:100%;height:device-height;zoom:1;min-zoom:1;max-zoom:1;user-zoom:fixed;}@viewport{width:auto;width:100%;width:device-width;min-width:320px;height:auto;height:100%;height:device-height;zoom:1;min-zoom:1;max-zoom:1;user-zoom:fixed;}@media screen and (min-width:1000px){:root{font-size:1.3vw;}}@media screen and (max-width:999px) and (min-width:500px){:root{font-size:2vw;}}@media screen and (max-width: 499px){:root{font-size:2.5vw;}}body{padding:0;margin:0;max-width:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-flow:row wrap;-ms-flex-flow:row wrap;flex-flow:row wrap;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;background:#555;}code{font-size:0.9rem;padding:0.1rem;background-color:#E0E0E0;border-radius:0.2rem;display:inline-block;white-space:pre;}pre,code,main{max-width:100%;overflow-x:auto;}pre > code{display:block;margin:auto;padding:1rem;background-color:rgb(51, 51, 51);color:rgb(255, 249, 217);border-radius:0.3rem;}header{background:#242020;-webkit-box-flex:0;-webkit-flex:0 0 100%;-ms-flex:0 0 100%;flex:0 0 100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-flow:column nowrap;-ms-flex-flow:column nowrap;flex-flow:column nowrap;font-family:'Ubuntu';color:whitesmoke;text-align:center;border-bottom:4px solid #00B4D2;}header h1{text-transform:capitalize;font-family:'Acme';}header a{color:inherit;text-decoration:none;}nav{-webkit-box-flex:0;-webkit-flex:0 0 80%;-ms-flex:0 0 80%;flex:0 0 80%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;}nav a{-webkit-box-flex:0;-webkit-flex:0 1 18%;-ms-flex:0 1 18%;flex:0 1 18%;max-width:calc(25% - 2em);font-size:1.6em;font-weight:bold;text-shadow:2px 2px 0px #4D4747;padding:0.3em 0.8em 0.3em 0.8em;background:#E17B18;border-width:0 0 2px 0;-webkit-transition:all 600ms;transition:all 600ms;}nav a:not(:last-child){margin-right:0.2em;}nav a:hover{background-color:#52BD38;}main{font-family:'Ubuntu';margin:1.2em 0 3em 0;padding:0.7em 1.2em;box-shadow:0.2em 0.2em 0 gray, 0.5em 0.5em black, -0.8em 0.8em 2em black;background:whitesmoke;-webkit-box-flex:0;-webkit-flex:0 0 80%;-ms-flex:0 0 80%;flex:0 0 80%;}section{overflow:visible;background:#eee;border:1px solid #aaa;margin:1em 0;padding:0.3em 0.1em;box-shadow:0.1em 0.1em 0.2em #444;}footer{background:#242020;-webkit-box-flex:0;-webkit-flex:0 0 100%;-ms-flex:0 0 100%;flex:0 0 100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-flow:column nowrap;-ms-flex-flow:column nowrap;flex-flow:column nowrap;font-family:'Ubuntu';color:whitesmoke;text-align:center;border-top:4px solid #00B4D2;}#examples{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:space-around;-webkit-align-items:space-around;-ms-flex-align:space-around;align-items:space-around;-webkit-justify-content:space-around;-ms-flex-pack:distribute;justify-content:space-around;-webkit-flex-flow:row wrap;-ms-flex-flow:row wrap;flex-flow:row wrap;}#examples h2{-webkit-box-flex:0;-webkit-flex:0 0 100%;-ms-flex:0 0 100%;flex:0 0 100%;}section > h2{margin:0 0 0 1.2em;}a svg:not([height]){width:1em;height:1em;}.icon{-webkit-transform-origin:center;-ms-transform-origin:center;transform-origin:center;display:inline-block;width:3vmax;height:3vmax;-webkit-transition:all 600ms cubic-bezier(0.18,0.89,0.32,1.28) 0s;transition:all 600ms cubic-bezier(0.18,0.89,0.32,1.28) 0s;overflow:visible;}.icon:hover{color:blue;-webkit-transform:rotate(360deg) scale(1.8);-ms-transform:rotate(360deg) scale(1.8);transform:rotate(360deg) scale(1.8);}.icon svg{fill:currentColor;width:100%;max-height:100%;-webkit-transition:-webkit-filter 600ms;transition:filter 600ms;}.icon:hover{-webkit-filter:drop-shadow(0.3em 0.3em 0.4em #333);filter:drop-shadow(0.3em 0.3em 0.4em #333);}@import url(https://fonts.googleapis.com/css?family=Ubuntu|Acme);

viewport.css

@-moz-viewport {
	width: auto;
	width: 100%;
	width: device-width;
	min-width: 320px;
	height: auto;
	height: 100%;
	height: device-height;
	zoom: 1;
	min-zoom: 1;
	max-zoom: 1;
	user-zoom: fixed;
}
@-webkit-viewport {
	width: auto;
	width: 100%;
	width: device-width;
	height: auto;
	height: 100%;
	height: device-height;
	zoom: 1;
	min-zoom: 1;
	max-zoom: 1;
	user-zoom: fixed;
}
@-o-viewport {
	width: auto;
	width: 100%;
	width: device-width;
	height: auto;
	height: 100%;
	height: device-height;
	zoom: 1;
	min-zoom: 1;
	max-zoom: 1;
	user-zoom: fixed;
}
@-ms-viewport {
	width: auto;
	width: 100%;
	width: device-width;
	height: auto;
	height: 100%;
	height: device-height;
	zoom: 1;
	min-zoom: 1;
	max-zoom: 1;
	user-zoom: fixed;
}
@viewport {
	width: auto;
	width: 100%;
	width: device-width;
	min-width: 320px;
	height: auto;
	height: 100%;
	height: device-height;
	zoom: 1;
	min-zoom: 1;
	max-zoom: 1;
	user-zoom: fixed;
}