-
Notifications
You must be signed in to change notification settings - Fork 35
/
03-images-and-svg.html
101 lines (100 loc) · 6.88 KB
/
03-images-and-svg.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="generator" content="pandoc">
<title>Software Carpentry: Images and SVG</title>
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css" href="css/bootstrap/bootstrap.css" />
<link rel="stylesheet" type="text/css" href="css/bootstrap/bootstrap-theme.css" />
<link rel="stylesheet" type="text/css" href="css/swc.css" />
<link rel="alternate" type="application/rss+xml" title="Software Carpentry Blog" href="http://software-carpentry.org/feed.xml"/>
<meta charset="UTF-8" />
<!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body class="lesson">
<div class="container card">
<div class="banner">
<a href="http://software-carpentry.org" title="Software Carpentry">
<img alt="Software Carpentry banner" src="img/software-carpentry-banner.png" />
</a>
</div>
<div class="row">
<div class="col-md-10 col-md-offset-1">
<h1 class="title">Images and SVG</h1>
<h2 class="subtitle">Adding graphical components</h2>
<div id="learning-objectives" class="objectives panel panel-warning">
<div class="panel-heading">
<h2><span class="glyphicon glyphicon-certificate"></span>Learning Objectives</h2>
</div>
<div class="panel-body">
<ul>
<li>Adding images to your page</li>
<li>Understanding Scalable Vector Graphics (SVGs)</li>
<li>Adding multiple SVGs to your page</li>
</ul>
</div>
</div>
<p>Websites that only consist of text can be quite boring. So let's have a look at how we can add an image.</p>
<pre class="sourceCode html"><code class="sourceCode html"><span class="kw"><img</span><span class="ot"> class=</span><span class="st">'image'</span><span class="ot"> src=</span><span class="st">"cat.jpg"</span><span class="kw">></span></code></pre>
<p>Note that the image element does not need a closing bracket. Having a closing bracket in this case would imply that there could be content between the brackets, which, in the case of an image does not make sense.</p>
<p>If you want to follow along, you will need to download the cat image from our reposotory. Or you can select any other image from your computer.</p>
<p>And by adding a class called 'image' to our CSS file, we can define the size and position of the image we load and apply the style to other images we might want to load.</p>
<pre class="sourceCode css"><code class="sourceCode css"><span class="fl">.image</span> <span class="kw">{</span>
<span class="kw">width:</span> <span class="dt">200px</span><span class="kw">;</span>
<span class="kw">position:</span> <span class="dt">relative</span><span class="kw">;</span>
<span class="kw">left:</span> <span class="dt">20px</span><span class="kw">;</span>
<span class="kw">}</span></code></pre>
<p>The end goal for us is to create a graph, which will be made up of graphical objects such as lines, circles, and squares (not photos of cats). We could just find an image of a circle and use this to represent the data by scaling and positioning it on the page, but that might not be the best way. An image is an inefficient way to represent lines and circles and your webpage would spend an unnecessary amount of time downloading each of these image files.</p>
<p>A better way to include graphical elements that aren't photos, is to use Scalable Vector Graphics (SVGs).</p>
<p>An SVG is just another element in the HTML file, used in the same way as a division.</p>
<pre class="sourceCode html"><code class="sourceCode html"><span class="kw"><svg</span><span class="ot"> class=</span><span class="st">"chart"</span><span class="kw">></span>
<span class="kw"><circle</span><span class="ot"> cx=</span><span class="st">"25"</span><span class="ot"> cy=</span><span class="st">"25"</span><span class="ot"> r=</span><span class="st">"15"</span><span class="ot"> class=</span><span class="st">"circ1"</span><span class="kw">></span>
<span class="kw"></circle></span>
<span class="kw"></svg></span></code></pre>
<p>Here, we've created an SVG canvas, using the styles of the class 'chart'. Within this element, we've created a circle, using the styles of the class 'circ1'. Both of these classes need to also be defined in our CSS file:</p>
<pre class="sourceCode css"><code class="sourceCode css"><span class="fl">.chart</span> <span class="kw">{</span>
<span class="kw">width:</span> <span class="dt">100px</span><span class="kw">;</span>
<span class="kw">height:</span> <span class="dt">100px</span><span class="kw">;</span>
<span class="kw">}</span>
<span class="fl">.circ1</span> <span class="kw">{</span>
<span class="kw">stroke:</span> <span class="dt">green</span><span class="kw">;</span>
<span class="kw">fill:</span> <span class="dt">white</span><span class="kw">;</span>
<span class="kw">stroke-width:</span> <span class="dt">5</span><span class="kw">;</span>
<span class="kw">}</span></code></pre>
<p>The circle element is already defined. 'cx', 'cy', and 'r' are attributes that are special to the circle element. 'cx' and 'cy' define the x and y coordinates of the center of the circle, 'r' is the radius of the circle.</p>
<p>But what if we don't want to only use circles, but instead want to use other shapes? On the internet we can find tons of helpful examples. A good resource to find simple examples of using different, commonly used SVG shapes is <a href="http://www.w3schools.com/svg/default.asp">w3school</a>.</p>
<div id="question" class="challenge panel panel-success">
<div class="panel-heading">
<h2><span class="glyphicon glyphicon-pencil"></span>Question</h2>
</div>
<div class="panel-body">
<p>What happens if 'cx' and 'cy' aren't set?</p>
</div>
</div>
<div id="make-art" class="challenge panel panel-success">
<div class="panel-heading">
<h2><span class="glyphicon glyphicon-pencil"></span>Make art!</h2>
</div>
<div class="panel-body">
<p>Make some art, using at least one circle, one rectangle, and one polygon. If you don't know what to do, draw a robot!</p>
</div>
</div>
</div>
</div>
<div class="footer">
<a class="label swc-blue-bg" href="http://software-carpentry.org">Software Carpentry</a>
<a class="label swc-blue-bg" href="https://github.com/swcarpentry/lesson-template">Source</a>
<a class="label swc-blue-bg" href="mailto:[email protected]">Contact</a>
<a class="label swc-blue-bg" href="LICENSE.html">License</a>
</div>
</div>
<!-- Javascript placed at the end of the document so the pages load faster -->
<script src="js/jquery.min.js"></script>
<script src="css/bootstrap/bootstrap-js/bootstrap.js"></script>
</body>
</html>