Skip to content

Instantly share code, notes, and snippets.

@infographicstw

infographicstw/README.md

Last active August 29, 2015 14:22
Show Gist options
  • Save infographicstw/379064e98dbd0c0129b3 to your computer and use it in GitHub Desktop.
Save infographicstw/379064e98dbd0c0129b3 to your computer and use it in GitHub Desktop.
Download ZIP
SVG the introduction
Raw
ex1.html
<!DOCTYPE html><html lang="en"><head prefix="og: http://ogp.me/ns#"><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>template</title><!-- libraries--><link rel="icon" type="image/x-icon" href="thumbnail.png"><script type="text/javascript" src="assets/jquery/1.10.2/jquery.min.js"></script><script type="text/javascript" src="assets/angular/1.2.3/angular.min.js"></script><link rel="stylesheet" type="text/css" href="assets/bootstrap/3.0.2/css/bootstrap.min.css"><script type="text/javascript" src="assets/bootstrap/3.0.2/js/bootstrap.min.js"></script><!-- custom files--><link rel="stylesheet" type="text/css" href="index.css"><script type="text/javascript" src="index.js"></script></head><body><svg width="100%" height="200px" viewBox="0 0 50 50" preserveAspectRatio="xMidYMid"><circle cx="12" cy="10" r="5"></circle><circle cx="38" cy="10" r="5"></circle><circle cx="25" cy="26" r="10"></circle><rect x="15" y="15" width="20" height="10" fill="white"></rect></svg></body></html>
Raw
ex2.html
<!DOCTYPE html><html lang="en"><head prefix="og: http://ogp.me/ns#"><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>template</title><!-- libraries--><link rel="icon" type="image/x-icon" href="thumbnail.png"><script type="text/javascript" src="assets/jquery/1.10.2/jquery.min.js"></script><script type="text/javascript" src="assets/angular/1.2.3/angular.min.js"></script><link rel="stylesheet" type="text/css" href="assets/bootstrap/3.0.2/css/bootstrap.min.css"><script type="text/javascript" src="assets/bootstrap/3.0.2/js/bootstrap.min.js"></script><!-- custom files--><link rel="stylesheet" type="text/css" href="index.css"><script type="text/javascript" src="index.js"></script></head><body><svg width="100%" height="200px" viewBox="0 0 50 50" preserveAspectRatio="xMidYMid"><circle cx="25" cy="18" r="15" fill="green" stroke="blue" stroke-width="3"></circle></svg></body></html>
Raw
ex3.html
<!DOCTYPE html><html lang="en"><head prefix="og: http://ogp.me/ns#"><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>template</title><!-- libraries--><link rel="icon" type="image/x-icon" href="thumbnail.png"><script type="text/javascript" src="assets/jquery/1.10.2/jquery.min.js"></script><script type="text/javascript" src="assets/angular/1.2.3/angular.min.js"></script><link rel="stylesheet" type="text/css" href="assets/bootstrap/3.0.2/css/bootstrap.min.css"><script type="text/javascript" src="assets/bootstrap/3.0.2/js/bootstrap.min.js"></script><!-- custom files--><link rel="stylesheet" type="text/css" href="index.css"><script type="text/javascript" src="index.js"></script></head><body><svg width="100%" height="200px" viewBox="0 0 50 50" preserveAspectRatio="xMidYMid"><circle cx="9" cy="10" r="4" fill="darkred" stroke="deeppink" stroke-width="2"></circle><circle cx="7" cy="8" r="1.5" fill="white"></circle><circle cx="41" cy="10" r="4" fill="darkred" stroke="deeppink" stroke-width="2"></circle><circle cx="39" cy="8" r="1.5" fill="white"></circle><circle cx="22.3" cy="23" r="3" fill="none" stroke="black" stroke-width="1"></circle><circle cx="27.7" cy="23" r="3" fill="none" stroke="black" stroke-width="1"></circle><rect x="10" y="17" width="30" height="7" fill="white"></rect></svg></body></html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment