Last active
August 29, 2015 14:22
-
-
Save shgysk8zer0/748d487d2d7ad22c3d8d to your computer and use it in GitHub Desktop.
SVG Use Demo
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
# 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 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
# 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 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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(); | |
} | |
} | |
}); | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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); | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@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'; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html lang="en" dir="ltr" manifest="manifest.appcache"> | |
<head> | |
<title>SVG <use> 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> | |
<svg xmlns="http://www.w3.org/2000/svg"> | |
<symbol height="100%" width="100%" id="icon1" viewBox="0 0 1024 1024"> | |
<path d="..."/> | |
</symbol> | |
<symbol height="100%" width="100%" id="icon2" viewBox="0 0 1024 1024"> | |
<path d="..."/> | |
</symbol> | |
</svg> | |
</code> | |
</pre> | |
</li> | |
<li> | |
Use them as follows:<br> | |
<code><svg><use xlink:href="combined.svg#icon1"/></svg></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><symbol></code>s in a single <code><svg></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 & 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 <use> 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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{ | |
"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'" | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
#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); | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@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; | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@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); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@-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; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment