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

<svg xmlns="http://www.w3.org/2000/svg"><symbol xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" enable-background="new 0 0 134.658 131.646" xml:space="preserve" height="100%" viewBox="0 0 134.658 131.646" width="100%" version="1.1" y="0px" x="0px" id="Google_plus"><metadata><rdf:RDF><cc:Work rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"></dc:type><dc:title></dc:title></cc:Work></rdf:RDF></metadata><path d="M126.52,4.109h-118.38c-2.177,0-3.94,1.763-3.94,3.938v115.55c0,2.179,1.763,3.942,3.94,3.942h118.37c2.177,0,3.94-1.764,3.94-3.942v-115.54c0-2.176-1.77-3.939-3.94-3.939z" fill="#DC4A38"></path><path d="M70.479,71.845l-3.983-3.093c-1.213-1.006-2.872-2.334-2.872-4.765,0-2.441,1.659-3.993,3.099-5.43,4.64-3.652,9.276-7.539,9.276-15.73,0-8.423-5.3-12.854-7.84-14.956h6.849l7.189-4.517h-21.779c-5.976,0-14.588,1.414-20.893,6.619-4.752,4.1-7.07,9.753-7.07,14.842,0,8.639,6.633,17.396,18.346,17.396,1.106,0,2.316-0.109,3.534-0.222-0.547,1.331-1.1,2.439-1.1,4.32,0,3.431,1.763,5.535,3.317,7.528-4.977,0.342-14.268,0.893-21.117,5.103-6.523,3.879-8.508,9.525-8.508,13.51,0,8.202,7.731,15.842,23.762,15.842,19.01,0,29.074-10.519,29.074-20.932,0.001-7.649-4.419-11.415-9.284-15.513zm-14.479-12.738c-9.51,0-13.818-12.294-13.818-19.712,0-2.888,0.547-5.87,2.428-8.199,1.773-2.218,4.861-3.657,7.744-3.657,9.168,0,13.923,12.404,13.923,20.382,0,1.996-0.22,5.533-2.762,8.09-1.778,1.774-4.753,3.096-7.515,3.096zm0.109,44.543c-11.826,0-19.452-5.657-19.452-13.523,0-7.864,7.071-10.524,9.504-11.405,4.64-1.561,10.611-1.779,11.607-1.779,1.105,0,1.658,0,2.538,0.111,8.407,5.983,12.056,8.965,12.056,14.629,0,6.859-5.639,11.967-16.253,11.967z" fill="#FFF"></path><polygon points="98.393,58.938,98.393,47.863,92.923,47.863,92.923,58.938,81.866,58.938,81.866,64.469,92.923,64.469,92.923,75.612,98.393,75.612,98.393,64.469,109.51,64.469,109.51,58.938" fill="#FFF"></polygon></symbol><symbol xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xml:space="preserve" height="100%" viewBox="0 0 266.893 266.895" width="100%" version="1.1" y="0px" x="0px" id="Facebook"><path d="M248.08,262.31c7.854,0,14.223-6.369,14.223-14.225v-229.27c0-7.857-6.368-14.224-14.223-14.224h-229.27c-7.857,0-14.224,6.367-14.224,14.224v229.27c0,7.855,6.366,14.225,14.224,14.225h229.27z" fill="#3C5A99"></path><path d="M182.41,262.31v-99.803h33.499l5.016-38.895h-38.515v-24.843c0-11.261,3.127-18.935,19.275-18.935l20.596-0.009v-34.788c-3.562-0.474-15.788-1.533-30.012-1.533-29.695,0-50.025,18.126-50.025,51.413v28.684h-33.585v38.895h33.585v99.803h40.149z" fill="#FFF"></path></symbol><symbol xml:space="preserve" version="1.1" viewBox="0 0 341.7375 277.725" width="100%" height="100%" id="twitter"><g transform="matrix(1.25,0,0,-1.25,0,277.725)"><g transform="scale(0.1,0.1)"><path fill-rule="nonzero" fill="#6babe1" d="M859.797,0c-316.75,0-611.574,92.8516-859.797,251.988,43.8789-5.179,88.5273-7.828,133.801-7.828,262.781,0,504.629,89.672,696.59,240.102-245.442,4.527-452.578,166.687-523.953,389.527,34.246-6.551,69.382-10.059,105.527-10.059,51.148,0,100.703,6.852,147.769,19.668-256.589,51.524-449.929,278.222-449.929,549.982,0,2.37,0.008,4.71,0.047,7.05,75.628-42.01,162.113-67.24,254.054-70.15-150.5,100.58-249.519,272.26-249.519,466.85,0,102.8,27.652,199.14,75.933,281.98,276.645-339.34,689.934-562.64,1156.09-586.03-9.56,41.05-14.53,83.86-14.53,127.82,0,309.75,251.14,560.88,560.91,560.88,161.32,0,307.09-68.12,409.41-177.13,127.76,25.16,247.8,71.84,356.17,136.12-41.88-130.98-130.81-240.9-246.62-310.32,113.46,13.56,221.56,43.71,322.15,88.32-75.2-112.48-170.3-211.27-279.88-290.35,1.08-24.05,1.62-48.24,1.62-72.56,0-741.188-564.16-1595.86-1595.843-1595.86"></path></g></g></symbol><symbol xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" id="YouTube" height="100%" viewBox="0 0 100 99.148132" width="100%" version="1.1" y="0px" x="0px"><metadata id="metadata27"><rdf:RDF><cc:Work rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"></dc:type><dc:title></dc:title></cc:Work></rdf:RDF></metadata><defs id="defs25"></defs><path id="rect1942" fill="#e5e5e5" d="M84.18401,0h-69.21103c-8.26938,0-14.97298,6.7036-14.97298,14.97298v69.2026c0,8.26937,6.7036,14.97255,14.97298,14.97255h69.21019c8.2698,0,14.97297-6.7036,15.81683-14.69113v-69.20217c-0.84344-8.55081-7.54746-15.25483-15.81599-15.25483z"></path><g id="g12" transform="matrix(0.42192847,0,0,0.42192847,-162.07876,-138.75075)"><path id="path14" d="m433.279,353.763h15.304l1.97,7.879,1.667,5.818,1.364,5.697,1.364,5.939,1.061,4.97h0.606l1.061-4.97,1.212-5.939,1.515-5.697,1.515-5.818,2.121-7.879h14.849l-15.758,47.274v33.577h-14.091v-33.577l-15.76-47.274z"></path><path id="path16" d="m497.826,373.642c11.97,0,18.031,5.697,18.031,16.97v27.88c0,11.273-6.061,16.97-18.031,16.97s-18.031-5.697-18.031-16.97v-27.88c0-11.272,6.06-16.97,18.031-16.97zm0,9.698c-3.182,0-4.849,1.939-4.849,5.576v31.272c0,3.515,1.818,5.576,4.849,5.576s4.849-2.061,4.849-5.576v-31.272c-0.001-3.637-1.819-5.576-4.849-5.576z"></path><path id="path18" d="m553.433,434.614-1.061-5.212c-5.455,4.485-8.638,6.061-12.426,6.061-3.182,0-6.515-1.455-8.029-3.394-1.668-2.061-2.121-4.243-2.121-10.425v-47.274h13.182v46.911c0,3.03,1.061,4.485,3.484,4.485,1.668,0,3.183-0.606,5.91-2.424v-48.972h13.183v60.244h-12.122z"></path></g><path id="rect3708" fill="#cb322c" d="m21.1998,49.25382h56.14813c8.26979,0,14.97339,6.70698,14.97339,14.97678v13.05488c0,8.2698-6.70444,14.97298-14.97339,14.97298h-56.14813c-8.26938,0-14.97298-6.70444-14.97298-14.97298v-13.05488c0-8.2698,6.7036-14.97678,14.97298-14.97678z"></path><g id="g26" fill="#linearGradient3805" transform="matrix(0.42192847,0,0,0.42192847,-4.4285612,-4.43235)"><g id="g20" fill="#FFF"><path id="path28" d="M56.337,150.482h-11.983v-9.588h37.328v9.588h-12.535v63.914h-12.81v-63.914z"></path><path id="path30" d="m105.372,214.396-0.964-4.737c-4.958,4.077-7.851,5.51-11.294,5.51-2.893,0-5.923-1.321-7.3-3.086-1.515-1.873-1.929-3.856-1.929-9.478v-42.978h11.984v42.646c0,2.756,0.964,4.078,3.168,4.078,1.515,0,2.893-0.552,5.372-2.203v-44.521h11.984v54.77h-11.021v-0.001z"></path><path id="path32" d="m129.34,140.895h11.983v23.914c4.683-4.188,7.851-5.841,11.433-5.841,2.756,0,5.785,1.322,7.162,3.085,1.516,1.983,1.93,3.969,1.93,9.809v30.414c0,5.73-0.414,7.715-1.93,9.697-1.377,1.875-4.406,3.196-7.3,3.196-3.582,0-6.612-1.653-11.295-5.951v5.181h-11.983v-73.504zm17.355,65.459c2.203,0,3.168-1.322,3.168-4.078v-30.416c0-2.864-0.965-4.076-3.168-4.076-1.516,0-2.894,0.551-5.372,2.203v34.162c2.48,1.653,3.857,2.205,5.372,2.205z"></path><path id="path34" d="m207.163,195.223v1.983c0.138,1.433,0.138,2.425,0.138,2.976,0,9.697-5.923,14.987-16.805,14.987-10.33,0-16.115-5.51-16.115-15.428v-25.456c0-10.358,5.51-15.317,16.666-15.317,9.918,0,16.116,5.179,16.116,13.664v16.089h-20.799v12.012c0,3.969,1.239,5.621,4.407,5.621,1.516,0,2.893-0.662,3.58-1.652,0.689-0.992,0.828-2.204,0.828-6.171v-3.308h11.984zm-11.983-14.216v-9.257c0-2.534-1.652-3.967-4.408-3.967-2.754,0-4.406,1.433-4.406,3.967v9.257h8.814z"></path></g></g></symbol><symbol xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" version="1.0" viewBox="0 0 120 42" id="CreativeCommons" width="100%" height="100%"><metadata><rdf:RDF><cc:Work rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"></dc:type><dc:title></dc:title></cc:Work></rdf:RDF></metadata><g><g transform="matrix(0.9937807,0,0,0.9936694,-177.69409,-74.436409)"><path fill="#aab2ab" nodetypes="ccccccc" d="M182.24,75.39l114.06,0.203c1.59,0,3.02-0.237,3.02,3.18l-0.14,37.567h-119.82v-37.706c0-1.685,0.16-3.244,2.88-3.244z"></path><g transform="matrix(0.872921,0,0,0.872921,50.12536,143.2144)"><path d="M187.21-55.679c0.01,8.68-7.03,15.721-15.71,15.727-8.68,0.005-15.72-7.028-15.73-15.708v-0.019c0-8.682,7.03-15.722,15.71-15.727,8.68-0.006,15.72,7.028,15.73,15.708v0.019z" rx="22.939548" ry="22.939548" cy="264.3577" cx="296.35416" type="arc" fill="#FFF"></path><g transform="translate(-289.6157,99.0653)"><path d="M473.88-167.55c3.49,3.49,5.23,7.76,5.23,12.81,0,5.04-1.71,9.27-5.14,12.66-3.63,3.58-7.93,5.37-12.88,5.37-4.9,0-9.12-1.78-12.67-5.32-3.55-3.55-5.32-7.79-5.32-12.71,0-4.93,1.77-9.2,5.32-12.81,3.46-3.48,7.68-5.23,12.67-5.23,5.04,0,9.31,1.75,12.79,5.23zm-23.11,2.35c-2.95,2.97-4.42,6.46-4.42,10.46s1.46,7.46,4.37,10.37c2.92,2.92,6.39,4.38,10.42,4.38s7.53-1.48,10.5-4.42c2.83-2.74,4.24-6.18,4.24-10.33,0-4.12-1.43-7.61-4.3-10.48-2.87-2.88-6.35-4.31-10.44-4.31s-7.55,1.44-10.37,4.33zm7.75,8.7c-0.45-0.98-1.12-1.47-2.02-1.47-1.59,0-2.39,1.07-2.39,3.21s0.8,3.21,2.39,3.21c1.05,0,1.8-0.53,2.25-1.57l2.2,1.17c-1.05,1.87-2.63,2.8-4.73,2.8-1.62,0-2.91-0.49-3.89-1.49-0.97-0.99-1.46-2.36-1.46-4.1,0-1.72,0.5-3.08,1.51-4.09,1-1.01,2.25-1.51,3.75-1.51,2.22,0,3.81,0.87,4.78,2.62l-2.39,1.22zm10.36,0c-0.45-0.98-1.11-1.47-1.98-1.47-1.62,0-2.43,1.07-2.43,3.21s0.81,3.21,2.43,3.21c1.05,0,1.79-0.53,2.21-1.57l2.25,1.17c-1.05,1.87-2.62,2.8-4.72,2.8-1.61,0-2.91-0.49-3.88-1.49-0.98-0.99-1.46-2.36-1.46-4.1,0-1.72,0.49-3.08,1.48-4.09s2.25-1.51,3.77-1.51c2.22,0,3.81,0.87,4.77,2.62l-2.44,1.22z"></path></g></g><path d="M297.3,74.911h-116.23c-1.25,0-2.26,1.014-2.26,2.261v39.498c0,0.28,0.22,0.51,0.51,0.51h119.73c0.28,0,0.51-0.23,0.51-0.51v-39.498c0-1.247-1.02-2.261-2.26-2.261zm-116.23,1.021h116.23c0.68,0,1.24,0.556,1.24,1.24v27.418h-83.08c-3.04,5.51-8.91,9.24-15.64,9.24-6.74,0-12.6-3.73-15.65-9.24h-4.34v-27.418c0-0.684,0.55-1.24,1.24-1.24z"></path><g enable-background="new    " fill="#FFF"><path d="M265.61,112.88c0.08,0.16,0.19,0.29,0.32,0.38,0.13,0.1,0.29,0.17,0.47,0.22,0.18,0.04,0.37,0.07,0.56,0.07,0.13,0,0.27-0.01,0.42-0.04,0.15-0.02,0.29-0.06,0.42-0.12s0.24-0.15,0.32-0.26c0.09-0.11,0.13-0.25,0.13-0.41,0-0.18-0.05-0.33-0.17-0.44-0.11-0.12-0.26-0.21-0.45-0.28-0.19-0.08-0.4-0.14-0.63-0.2-0.24-0.06-0.48-0.12-0.72-0.19-0.25-0.06-0.49-0.13-0.73-0.22-0.23-0.09-0.45-0.21-0.63-0.35-0.19-0.15-0.34-0.33-0.45-0.54-0.12-0.22-0.18-0.48-0.18-0.78,0-0.34,0.08-0.64,0.22-0.89,0.15-0.25,0.34-0.46,0.58-0.63,0.23-0.17,0.5-0.3,0.8-0.38s0.59-0.12,0.89-0.12c0.35,0,0.69,0.04,1.01,0.12,0.31,0.08,0.6,0.2,0.85,0.38,0.25,0.17,0.44,0.4,0.59,0.67s0.22,0.6,0.22,0.98h-1.42c-0.01-0.2-0.06-0.36-0.13-0.49s-0.16-0.24-0.28-0.31c-0.12-0.08-0.25-0.13-0.4-0.16-0.16-0.03-0.32-0.05-0.5-0.05-0.12,0-0.24,0.02-0.35,0.04-0.12,0.03-0.23,0.07-0.32,0.13-0.1,0.06-0.18,0.14-0.24,0.23-0.06,0.1-0.09,0.22-0.09,0.36,0,0.13,0.02,0.24,0.07,0.32s0.15,0.15,0.29,0.22c0.15,0.07,0.35,0.14,0.61,0.21s0.59,0.15,1.01,0.26c0.12,0.02,0.3,0.07,0.52,0.13,0.22,0.07,0.44,0.17,0.65,0.32,0.22,0.14,0.41,0.33,0.57,0.57s0.24,0.55,0.24,0.92c0,0.31-0.06,0.59-0.18,0.85s-0.3,0.49-0.53,0.68-0.52,0.33-0.87,0.44c-0.34,0.11-0.74,0.16-1.2,0.16-0.36,0-0.72-0.05-1.06-0.14-0.35-0.09-0.65-0.23-0.92-0.42-0.26-0.2-0.47-0.44-0.63-0.74-0.15-0.3-0.23-0.65-0.22-1.07h1.42c0,0.23,0.04,0.42,0.12,0.57z"></path><path d="M273.87,107.87l2.49,6.66h-1.52l-0.51-1.48h-2.49l-0.52,1.48h-1.48l2.52-6.66h1.51zm0.08,4.08l-0.84-2.44h-0.02l-0.87,2.44h1.73z"></path></g><g enable-background="new    " fill="#FFF"><path d="M239.18,107.87c0.32,0,0.61,0.03,0.87,0.08,0.26,0.06,0.48,0.15,0.67,0.28,0.19,0.12,0.33,0.29,0.44,0.5,0.1,0.22,0.15,0.48,0.15,0.79,0,0.33-0.08,0.61-0.23,0.84-0.15,0.22-0.38,0.4-0.68,0.55,0.41,0.12,0.72,0.32,0.93,0.62,0.2,0.29,0.3,0.65,0.3,1.07,0,0.33-0.07,0.63-0.2,0.87-0.13,0.25-0.3,0.45-0.52,0.6-0.23,0.16-0.48,0.27-0.76,0.35-0.29,0.07-0.58,0.11-0.88,0.11h-3.23v-6.66h3.14zm-0.19,2.69c0.26,0,0.48-0.06,0.65-0.18,0.16-0.13,0.25-0.33,0.25-0.61,0-0.15-0.03-0.28-0.09-0.38-0.05-0.1-0.13-0.18-0.22-0.23-0.09-0.06-0.2-0.1-0.32-0.12s-0.25-0.03-0.38-0.03h-1.37v1.55h1.48zm0.09,2.83c0.14,0,0.28-0.01,0.41-0.04s0.24-0.08,0.34-0.14c0.1-0.07,0.18-0.16,0.24-0.27s0.09-0.25,0.09-0.43c0-0.34-0.1-0.58-0.29-0.73-0.19-0.14-0.45-0.22-0.77-0.22h-1.59v1.83h1.57z"></path><path d="M241.89,107.87h1.64l1.56,2.63,1.55-2.63h1.64l-2.48,4.1v2.56h-1.46v-2.59l-2.45-4.07z"></path></g><g transform="matrix(0.624995,0,0,0.624995,391.2294,176.9332)"><path d="M-175.01-139.12c0.01,9.42-7.62,17.05-17.03,17.06s-17.05-7.62-17.05-17.03v-0.03c-0.01-9.41,7.62-17.04,17.03-17.05s17.05,7.62,17.05,17.03v0.02z" rx="29.209877" ry="29.209877" cy="252.08646" cx="475.97119" type="arc" fill="#FFF"></path><g transform="translate(-23.9521,-89.72962)"><path d="M-168.22-68.055c-5.17,0-9.55,1.804-13.13,5.413-3.68,3.734-5.52,8.153-5.52,13.256s1.84,9.492,5.52,13.163c3.67,3.672,8.05,5.508,13.13,5.508,5.14,0,9.59-1.852,13.37-5.555,3.55-3.516,5.32-7.888,5.32-13.116,0-5.226-1.8-9.647-5.42-13.256-3.61-3.609-8.04-5.413-13.27-5.413zm0.05,3.36c4.23,0,7.83,1.493,10.79,4.48,2.99,2.957,4.49,6.566,4.49,10.829,0,4.294-1.46,7.857-4.39,10.689-3.09,3.05-6.72,4.574-10.89,4.574-4.18,0-7.78-1.509-10.8-4.527-3.02-3.019-4.53-6.597-4.53-10.736,0-4.138,1.52-7.748,4.58-10.829,2.93-2.987,6.51-4.48,10.75-4.48z"></path><path d="M-176.5-52.021c0.75-4.698,4.06-7.208,8.2-7.208,5.96,0,9.59,4.325,9.59,10.092,0,5.627-3.86,9.999-9.68,9.999-4.01,0-7.59-2.465-8.25-7.301h4.71c0.14,2.511,1.77,3.395,4.1,3.395,2.65,0,4.37-2.465,4.37-6.233,0-3.952-1.49-6.045-4.28-6.045-2.05,0-3.82,0.744-4.19,3.301l1.37-0.007-3.71,3.702-3.7-3.702,1.47,0.007z"></path></g></g><g><circle d="m 253.36866,90.224609 c 0,5.96821 -4.83819,10.806401 -10.8064,10.806401 -5.96821,0 -10.8064,-4.838191 -10.8064,-10.806401 0,-5.96821 4.83819,-10.8064 10.8064,-10.8064 5.96821,0 10.8064,4.83819 10.8064,10.8064 z" cy="90.225" cx="242.56" r="10.806" fill="#FFF"></circle><g><path d="M245.69,87.098c0-0.417-0.34-0.754-0.75-0.754h-4.78c-0.41,0-0.75,0.337-0.75,0.754v4.773h1.33v5.652h3.62v-5.652h1.33v-4.773z"></path><circle d="m 244.18212,84.083008 c 0,0.901505 -0.73081,1.63232 -1.63232,1.63232 -0.9015,0 -1.63232,-0.730815 -1.63232,-1.63232 0,-0.901506 0.73082,-1.63232 1.63232,-1.63232 0.90151,0 1.63232,0.730814 1.63232,1.63232 z" cy="84.083" cx="242.55" r="1.6323"></circle></g><path fill-rule="evenodd" clip-rule="evenodd" d="M242.53,78.318c-3.23,0-5.96,1.128-8.2,3.384-2.3,2.333-3.45,5.095-3.45,8.284s1.15,5.932,3.45,8.227c2.29,2.297,5.03,3.447,8.2,3.447,3.22,0,6-1.16,8.36-3.476,2.22-2.197,3.33-4.93,3.33-8.198,0-3.267-1.13-6.028-3.39-8.284s-5.02-3.384-8.3-3.384zm0.03,2.1c2.65,0,4.9,0.934,6.75,2.801,1.87,1.847,2.81,4.103,2.81,6.767,0,2.684-0.92,4.911-2.75,6.681-1.93,1.906-4.2,2.858-6.81,2.858s-4.85-0.942-6.74-2.829c-1.89-1.886-2.84-4.123-2.84-6.71,0-2.586,0.96-4.842,2.87-6.767,1.83-1.867,4.07-2.801,6.71-2.801z"></path></g></g></g></symbol><symbol height="100%" width="100%" version="1.1" viewBox="0 0 64 64" id="linkedin"><path fill="#1d87bd" d="m12.8,51.2,0-26.816,8.192,0,0,26.816-8.192,0m8.448-34.24c0.064,2.304-1.664,4.16-4.416,4.16-2.56,0-4.224-1.856-4.224-4.16,0-2.368,1.728-4.16,4.352-4.16s4.288,1.792,4.288,4.16m21.504,34.24,0-14.848c0-3.456-1.152-5.824-4.16-5.824-2.24,0-3.584,1.6-4.224,3.136-0.192,0.576-0.256,1.344-0.256,2.112v15.424h-8.192v-18.24c0-3.328-0.128-6.144-0.192-8.576h7.104l0.384,3.776h0.128c1.088-1.792,3.776-4.352,8.192-4.352,5.376,0,9.472,3.648,9.472,11.584v15.808h-8.256m21.248-45.568c0-3.072-2.56-5.632-5.632-5.632h-52.736c-3.072,0-5.632,2.56-5.632,5.632v52.736c0,3.072,2.56,5.632,5.632,5.632h52.736c3.072,0,5.632-2.56,5.632-5.632v-52.736"></path></symbol><symbol height="100%" width="100%" id="mark-github" viewBox="0 0 1024 1024">  <path d="M512 0C229.252 0 0 229.25199999999995 0 512c0 226.251 146.688 418.126 350.155 485.813 25.593 4.686 34.937-11.125 34.937-24.626 0-12.188-0.469-52.562-0.718-95.314-128.708 23.46-161.707-31.541-172.469-60.373-5.525-14.809-30.407-60.249-52.398-72.263-17.988-9.828-43.26-33.237-0.917-33.735 40.434-0.476 69.348 37.308 78.471 52.75 45.938 77.749 119.876 55.627 148.999 42.5 4.654-32.999 17.902-55.627 32.501-68.373-113.657-12.939-233.22-56.875-233.22-253.063 0-55.94 19.968-101.561 52.658-137.404-5.22-12.999-22.844-65.095 5.063-135.563 0 0 42.937-13.749 140.811 52.501 40.811-11.406 84.594-17.031 128.124-17.22 43.499 0.188 87.314 5.874 128.188 17.28 97.689-66.311 140.686-52.501 140.686-52.501 28 70.532 10.375 122.564 5.124 135.499 32.811 35.844 52.626 81.468 52.626 137.404 0 196.686-119.751 240-233.813 252.686 18.439 15.876 34.748 47.001 34.748 94.748 0 68.437-0.686 123.627-0.686 140.501 0 13.625 9.312 29.561 35.25 24.562C877.436 929.998 1024 738.126 1024 512 1024 229.25199999999995 794.748 0 512 0z"></path></symbol><symbol height="100%" width="100%" id="alert" viewBox="0 0 1024 1024">  <path d="M1005.854 800.247l-438.286-767C556.173 13.30600000000004 534.967 1 512 1s-44.173 12.306-55.567 32.247l-438.286 767c-11.319 19.809-11.238 44.144 0.213 63.876C29.811 883.855 50.899 896 73.714 896h876.572c22.814 0 43.903-12.145 55.354-31.877S1017.173 820.056 1005.854 800.247zM576 768H448V640h128V768zM576 576H448V320h128V576z"></path></symbol><symbol height="100%" width="100%" id="issue-opened" viewBox="0 0 896 1024">  <path d="M448 64C200.562 64 0 264.562 0 512c0 247.438 200.562 448 448 448 247.438 0 448-200.562 448-448C896 264.562 695.438 64 448 64zM448 832c-176.781 0-320-143.25-320-320 0-176.781 143.219-320 320-320 176.75 0 320 143.219 320 320C768 688.75 624.75 832 448 832zM384 768h128V640H384V768zM384 576h128V256H384V576z"></path></symbol><symbol height="100%" width="100%" id="git-commit" viewBox="0 0 896 1024">  <path d="M694.875 448C666.375 337.781 567.125 256 448 256c-119.094 0-218.375 81.781-246.906 192H0v128h201.094C229.625 686.25 328.906 768 448 768c119.125 0 218.375-81.75 246.875-192H896V448H694.875zM448 640c-70.656 0-128-57.375-128-128 0-70.656 57.344-128 128-128 70.625 0 128 57.344 128 128C576 582.625 518.625 640 448 640z"></path></symbol><symbol height="100%" width="100%" id="info" viewBox="0 0 896 1024">  <path d="M448 384c35 0 64-29 64-64s-29-64-64-64-64 29-64 64 29 64 64 64z m0-320c-247 0-448 201-448 448s201 448 448 448 448-201 448-448-201-448-448-448z m0 768c-177 0-320-143-320-320s143-320 320-320 320 143 320 320-143 320-320 320z m64-320c0-32-32-64-64-64s-32 0-64 0-64 32-64 64h64s0 160 0 192 32 64 64 64 32 0 64 0 64-32 64-64h-64s0-160 0-192z"></path></symbol><symbol height="100%" width="100%" id="mail" viewBox="0 0 896 1024">  <path d="M0 192v640h896V192H0zM768 256L448 520 128 256H768zM64 320l252.031 191.625L64 704V320zM128 768l254-206.25L448 612l65.875-50.125L768 768H128zM832 704L579.625 511.938 832 320V704z"></path></symbol><symbol height="100%" width="100%" id="question" viewBox="0 0 1024 1024">  <path d="M448 768h128v-128h-128v128z m64-512c-96 0-192 96-192 192h128c0-32 32-64 64-64s64 32 64 64c0 64-128 64-128 128h128c64-22 128-64 128-160s-96-160-192-160z m0-256c-283 0-512 229-512 512s229 512 512 512 512-229 512-512-229-512-512-512z m0 896c-212 0-384-172-384-384s172-384 384-384 384 172 384 384-172 384-384 384z"></path></symbol><symbol height="100%" width="100%" id="rss" viewBox="0 0 768 1024">  <path d="M128 640C57.344 640 0 697.375 0 768s57.344 128 128 128 128-57.375 128-128S198.656 640 128 640zM128 384c0 0-64 2-64 64s64 64 64 64c141.375 0 256 114.625 256 256 0 0 0 64 64 64s64-64 64-64C512 556 340.031 384 128 384zM128 128c0 0-64 0-64 64s64 64 64 64c282.75 0 512 229.25 512 512 0 0 0 64 64 64s64-64 64-64C768 414.594 481.5 128 128 128z"></path></symbol><symbol height="100%" width="100%" id="search" viewBox="0 0 973.125 1024">  <path d="M960 832L710.875 582.875C746.438 524.812 768 457.156 768 384 768 171.96900000000005 596 0 384 0 171.969 0 0 171.96900000000005 0 384c0 212 171.969 384 384 384 73.156 0 140.812-21.562 198.875-57L832 960c17.5 17.5 46.5 17.375 64 0l64-64C977.5 878.5 977.5 849.5 960 832zM384 640c-141.375 0-256-114.625-256-256s114.625-256 256-256 256 114.625 256 256S525.375 640 384 640z"></path></symbol><symbol height="100%" width="100%" id="sign-in" viewBox="0 0 896 1024">  <path d="M640 576L640 448 896 448 896 320 640 320 640 192 448 336 448 192 192 64 704 64 704 256 768 256 768 0 64 0 64 832 448 1024 448 832 768 832 768 512 704 512 704 768 448 768 448 432z"></path></symbol><symbol height="100%" width="100%" id="sign-out" viewBox="0 0 1024 1024">  <path d="M640 768H384V192L128 64h512v192h64V0H0v832l384 192V832h320V512h-64V768zM1024 384L768 192v128H512v128h256v128L1024 384z"></path></symbol><symbol height="100%" width="100%" id="x" viewBox="0 0 640 1024">  <path d="M640 320L512 192 320 384 128 192 0 320l192 192L0 704l128 128 192-192 192 192 128-128L448 512 640 320z"></path></symbol><symbol height="100%" width="100%" id="check" viewBox="0 0 768 1024">  <path d="M640 192L256 576 128 448 0 576l256 256 512-512L640 192z"></path></symbol><symbol height="100%" width="100%" id="home" viewBox="0 0 1024 1024">  <path d="M192 576l64 384h192V640h128v320h192l64-384L512 256 192 576zM832 384V128H704l0.312 128.312L512 64 0 576h128l384-384 384 384h128L832 384z"></path></symbol><symbol height="100%" width="100%" id="history" viewBox="0 0 896 1024">  <path d="M448 64c-90.938 0-175.312 27.531-245.938 74.062L128 64v256h256l-88-88c45.438-24.688 96.688-40 152-40 176.75 0 320 143.219 320 320 0 176.75-143.25 320-320 320-176.781 0-320-143.25-320-320 0-45.562 9.781-88.781 27-128H64v-99.406C24.312 351.5 0 428.594 0 512c0 247.438 200.562 448 448 448 247.438 0 448-200.562 448-448C896 264.562 695.438 64 448 64zM447.031 831L512 768V576h128l64-64-64-64H512l-64-64L320 512l64 64v192L447.031 831z"></path></symbol><symbol height="100%" width="100%" id="code" viewBox="0 0 896 1024">  <path d="M608 192l-96 96 224 224L512 736l96 96 288-320L608 192zM288 192L0 512l288 320 96-96L160 512l224-224L288 192z"></path></symbol><symbol height="100%" width="100%" id="device-mobile" viewBox="0 0 640 1024">  <path d="M576 0H64C28.688 0 0 28.687999999999988 0 64v896c0 35.375 28.688 64 64 64h512c35.375 0 64-28.625 64-64V64C640 28.687999999999988 611.375 0 576 0zM288 64h64c17.625 0 32 14.344 32 32s-14.375 32-32 32h-64c-17.656 0-32-14.344-32-32S270.344 64 288 64zM352 960h-64c-17.656 0-32-14.375-32-32s14.344-32 32-32h64c17.625 0 32 14.375 32 32S369.625 960 352 960zM576 832H64V192h512V832z"></path></symbol><symbol height="100%" width="100%" id="device-desktop" viewBox="0 0 1024 1024">  <path d="M960 64c-32 0-864 0-896 0s-64 32-64 64 0 544 0 576 32 64 64 64 320 0 320 0-192 64-192 128c0 32 32 64 64 64s480 0 512 0 64-32 64-64c0-64-192-128-192-128s288 0 320 0 64-32 64-64 0-544 0-576-32-64-64-64z m0 640h-896v-576h896v576z m-64-512h-192c-384 64-542 300-576 384v64h768v-448z"></path></symbol><symbol height="100%" width="100%" id="list-ordered" viewBox="0 0 768 1024">  <path d="M320 576h448v-128h-448v128z m0 256h448v-128h-448v128z m0-640v128h448v-128h-448z m-241 256h78v-256h-36l-85 23v50l43-2v185z m110 206c0-36-12-78-96-78-33 0-64 6-83 16l1 66c21-10 42-15 67-15s32 11 32 28c0 26-30 58-110 112v50h192v-67l-91 2c49-30 87-66 87-113l1-1z"></path></symbol><symbol height="100%" width="100%" id="list-unordered" viewBox="0 0 768 1024">  <path d="M0 576h128v-128h-128v128z m0-256h128v-128h-128v128z m0 512h128v-128h-128v128z m256-256h512v-128h-512v128z m0-256h512v-128h-512v128z m0 512h512v-128h-512v128z"></path></symbol><symbol height="100%" width="100%" id="location" viewBox="0 0 640 1024">  <path d="M320 0c-177 0-320 143-320 320s160 416 320 704c160-288 320-527 320-704s-143-320-320-320z m0 448c-71 0-128-57-128-128s57-128 128-128 128 57 128 128-57 128-128 128z"></path></symbol><symbol height="100%" width="100%" id="tag" viewBox="0 0 896 1024">  <path d="M384 64H128L0 192v256l512 512 384-384L384 64zM64 416V224l96-96h192l448 448L512 864 64 416zM448 320L256 512l256 256 192-192L448 320zM352 512l96-96 160 160-96 96L352 512zM320 288c0-53-43-96-96-96s-96 43-96 96 43 96 96 96S320 341 320 288zM224 320c-17.656 0-32-14.344-32-32s14.344-32 32-32 32 14.344 32 32S241.656 320 224 320z"></path></symbol><symbol height="100%" width="100%" id="sync" viewBox="0 0 768.051 1024">  <path d="M655.461 473.469c11.875 81.719-13.062 167.781-76.812 230.594-94.188 92.938-239.5 104.375-346.375 34.562l74.875-73L31.96 627.25 70.367 896l84.031-80.5c150.907 111.25 364.938 100.75 502.063-34.562 79.5-78.438 115.75-182.562 111.25-285.312L655.461 473.469zM189.46 320.062c94.156-92.938 239.438-104.438 346.313-34.562l-75 72.969 275.188 38.406L697.586 128l-83.938 80.688C462.711 97.34400000000005 248.742 107.96900000000005 111.585 243.25 32.085 321.656-4.133 425.781 0.335 528.5l112.25 22.125C100.71 468.875 125.71 382.906 189.46 320.062z"></path></symbol><symbol height="100%" width="100%" id="terminal" viewBox="0 0 896 1024">  <path d="M831 127H63c-35.35 0-64 28.65-64 64v640c0 35.35 28.65 64 64 64h768c35.35 0 64-28.65 64-64V191C895 155.64999999999998 866.35 127 831 127zM127 575l128-128L127 319l64-64 192 192L191 639 127 575zM639 639H383v-64h256V639z"></path></symbol><symbol height="100%" width="100%" id="screen-full" viewBox="0 0 895.875 1024">  <path d="M128 768h639.875V256H128V768zM255.938 384h384v256h-384V384zM64 192.062h191.938v-64H0V384h64V192.062zM64 640H0v255.938h255.938V832H64V640zM639.938 128.062v64h191.938V384h64V128.062H639.938zM831.875 832H639.938v63.938h255.938V640h-64V832z"></path></symbol></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

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;
}