-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
173 lines (149 loc) · 11.8 KB
/
index.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
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=1024" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<title>Vector Graphics | by Adam Gołąb</title>
<meta name="description" content="Presentation about vector graphics" />
<meta name="author" content="Adam Gołąb" />
<link href="http://fonts.googleapis.com/css?family=Open+Sans:regular,semibold,italic,italicsemibold|PT+Sans:400,700,400italic,700italic|PT+Serif:400,700,400italic,700italic" rel="stylesheet" />
<link href="css/impress-demo.css" rel="stylesheet" />
<link href="css/impressConsole.css" rel="stylesheet" />
<link rel="shortcut icon" href="favicon.png" />
<link rel="apple-touch-icon" href="apple-touch-icon.png" />
</head>
<body class="impress-not-supported">
<div class="fallback-message">
<p>Your browser <b>doesn't support the features required</b> by impress.js, so you are presented with a simplified version of this presentation.</p>
<p>For the best experience please use the latest <b>Chrome</b>, <b>Safari</b> or <b>Firefox</b> browser.</p>
</div>
<div id="impress">
<div id="title" class="step slide" data-x="1800" data-y="4200" data-scale="4">
<h1>Vector Graphics</h1>
<footer>Adam Gołąb - 2015</footer>
<div class="notes">Today, I'm going to talk about vector graphics. Probably most of you already heard about it and know what it is. So let me tell you something more about this subject.</div>
</div>
<div id="plan" class="step slide" data-x="4500" data-y="3500" data-scale="2">
<q>Plan: </q>
<ul>
<li>What is Vector Graphics</li>
<li>Compare to raster graphics</li>
<li>Software to editing vector graphics</li>
<li>Applications</li>
<li>Summarize pros and cons</li>
<li>Questions</li>
</ul>
<div class="notes">I've divided my presentation into few parts. First I tell you a definition, what exactly is Vector Graphics. Next I compare it to well-known raster graphics. Then I present you few of most known programs to creating and editing vector graphics. Enumerate best uses for vector images. Later summarize pros and cons resulting from the use of vector graphics. And finally there will be time for additional questions about this topic.</div>
</div>
<div id="definition" class="step slide" data-x="4950" data-y="4550">
<p><strong>Vector graphics</strong> is the use of geometrical primitives such as points, lines, curves, and shapes or polygons (all of which are based on mathematical expressions) to represent images in computer graphics</p>
<img src="img/image.png">
<div class="notes">As definded at this slide, vector graphics use geometrical primitives, points, lines, curves, shapes and polygons to represent images. In other words, it transforms basic mathematical function to composed images. One of the most commonly used primitives is Bezier curves. First use of them was in Renault factory in 1959 to design automobile bodies.</div>
</div>
<div id="compare" class="step slide" data-x="7200" data-y="4200" data-scale="4">
<h1>Let's compare</h1>
<img src="img/pixel.png" class="fl-right">
<q class="left"><strong>Raster graphics</strong></q>
<q class="center">vs</q>
<img src="img/vector.png" class="fl-left">
<q class="right"><strong>Vector Graphics</strong></q>
<div class="notes">Let's move to the next point. Camparison Vector Graphics to Raster Graphics.</div>
</div>
<div id="compare-raster" class="step slide" data-x="5400" data-y="7000" data-scale="4">
<p>Scalability raster</p>
<img src="img/gambler-s.png">
<div class="notes">First issue is ability to scale images to any size. To illustrate this I show one simple graphic, which I create some time ago, in two formats. First one is saved as raster graphics. As you see, in original size it looks good, with sharp edges. Of course I can scale it down and it should still looks acceptably well. But when I want to scale it up...</div>
</div>
<div id="compare-raster-zoom" class="step" data-x="5400" data-y="7000" data-scale="1">
<img src="img/gambler-s.png">
<div class="notes">It starts looks blurry. As you can see, (or not because of the quality of overhead projector.) Previously sharp edges are blurred and pixelated.</div>
</div>
<div id="compare-vector" class="step slide" data-x="9000" data-y="7000" data-scale="4">
<p>Scalability vector</p>
<img src="img/gambler.svg">
<div class="notes">Now I do the same task, but now on vector file. As you see, graphics in small size looks exactly the same as raster file. But when I scale it up...</div>
</div>
<div id="compare-vector-zoom" class="step" data-x="9000" data-y="7000" data-scale="1">
<img src="img/gambler.svg">
<div class="notes">It looks still sharp. Edges are sharp. Rounded edges are still rounded not pixelated as we saw before with raster example. With vector graphics I can scale image to any size I want. There are no limits.</div>
</div>
<div id="filesize" class="step slide" data-x="9700" data-y="4700" data-rotate="-90" data-scale="2">
<h1>File size</h1>
<p>The size of vector graphics files is not dependent on the size of the image, but on its complexity.</p>
<p>Suited for lossless data compression algorithms.</p>
<div class="notes">Next issue is the size of the result file contains our image. In raster graphics it's relatively easy estimate the resulting file size. It depends only on dimension of the image. The larger dimension of the graphic, the large resulting file size. There are some compression algorith but general rule is the same. In vector graphics file size depends on complexity of the graphics. The more different element are in the image the larger size of the file. As I say previously elements can be described by mathematical expressions, so it's possible to store data in normal text file. And it very efficent to compress.</div>
</div>
<div id="animate" class="step slide" data-x="9700" data-y="2900" data-rotate="-90" data-scale="2">
<h1>Animation</h1>
<img src="img/animation.svg">
<div class="notes">As you can see, animation in vector graphic is possible. It's very easy to animate images. You only specific a keyframes and way which it will, be animated between keyframes. That's all.</div>
</div>
<div id="editable" class="step slide" data-x="9700" data-y="1100" data-rotate="-90" data-scale="2">
<h1>Editing</h1>
<p>Diferent from editing raster graphics.</p>
<p>Almost impossible to get photo realistic effects.</p>
<p>Possibility to create graphics in text editor.</p>
<div class="notes">Editing vector graphics at first sight is a little bit harder. Because in opposite to raster graphics is not similar to painting on canvas, but more about creating something from shapes. Compositing elements to each other. As I said previously there everything is described by mathematical expressions, so it's almost impossible to create photo realistic effects. Because in pictures there are more noises and much complex textures than can be done in simple way by use of geometrical shapes. As a curiosity using a specialized graphics software is necessary. Because vector graphics can be edited in normal text editor. The other question is, if it's comfortable.</div>
</div>
<div id="software" class="step slide" data-x="8100" data-y="2100" data-rotate="-180" data-scale="2">
<h1>Software to edit:</h1>
<ul>
<li>Adobe Ilustrator</li>
<li>Corel Draw</li>
<li>Inkscape</li>
</ul>
<img src="img/inkscape.png">
<div class="notes">Moving to the next point of presentation. There are few most popular software to create and edit vector graphics. First two are well-known application from Adobe and Corel, but I personally recommend the last one. Inkscape is cross platform and IMO user-friendly vector graphics editor. There you can see what it looks like, Additionaly I said it's almost impossible to archieve photo realistic quality, but you have to admit the car looks amazing. But the most important thing is that Inkscape is free and open source. It's native file format is Scalable Vector Graphics.</div>
</div>
<div id="W3C" class="step slide" data-x="8550" data-y="1050" data-rotate="-180" data-scale="1">
<p>The World Wide Web Consortium (W3C) standard for vector graphics is Scalable Vector Graphics (SVG)</p>
<img src="img/svg.png">
<div class="notes">In 1999 W3C developed open file standard Scalable Vector Graphics, in short SVG. Images are defined in XML text files. This means that they can be scripted for example in Java Script to archieve more complex animation or even more responsive to user actions. And like every text file they could be compressed. SVG is supported by all major modern web browsers, so there is no obstacle to use it in the web applications.</div>
</div>
<div id="application" class="step slide" data-x="8550" data-y="350" data-rotate="-180" data-scale="1">
<h1>Application</h1>
<ul>
<li>Logotypes</li>
<li>Animation</li>
<li>Printing On Paper</li>
<li>Webpages</li>
<li>Embroidery</li>
<li>3D Graphics</li>
</ul>
<div class="notes">The next slide shows few most popular application of Vector Graphics. Without typical uses like creating logotypes or simple animations. There are other like creating graphics for printing puprose, because vector can be scaled to any size, we can print it on paper with any dimentions. As I said it could be saved as simple XML and it's supported by web browser so it's possible to create whole webpages in vector graphics. Next application is embroidery. Computer-controlled sewing machines or plotter can quickly make custom desing but they needs to be steered out the relevant shapes not pixels. The last thing 3D graphics, however they are rendered as raster image, in the stage of creating, there are used vectors shapes but instead of 2 there are 3 dimensional coordinates described each points.</div>
</div>
<div id="summary" class="step slide" data-x="7400" data-y="500" data-rotate="-270" data-scale="2">
<h1>Pros:</h1>
<ul class="pros">
<li>Resizable without quality loss.</li>
<li>File size not depend on the dimensions of image.</li>
<li>Simple text/xml which mean it can be modified later via scripts.</li>
<li>Animation.</li>
</ul>
<h1>Cons:</h1>
<ul class="cons">
<li>Harder to create, edit.</li>
<li>Almost impossible to archieve photo realism.</li>
<li>Larger files in more detailed images.</li>
</ul>
<div class="notes">Finally lets summarize pros and cons of vectors graphics. It could be resizable without quality loss. Size of file not depend on the dimensions. It could be scripted. Animated. But there are some cons. At the begining is harder to create, edit. Not photo realistic. And the last, in more detailed images file size might be much larger than adequate raster image.</div>
</div>
<div id="questions" class="step slide" data-x="4900" data-y="1400" data-rotate="-360" data-scale="4">
<h1>Questions?</h1>
<div class="notes">That's all. Any questions?<br><br>Thanks for your attention.</div>
</div>
</div>
<script>
if ("ontouchstart" in document.documentElement) {
document.querySelector(".hint").innerHTML = "<p>Tap on the left or right to navigate</p>";
}
</script>
<script src="js/impress.js"></script>
<script src="js/impressConsole.js"></script>
<script>
impress().init();
impressConsole().init();
</script>
</body>
</html>