-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathsvg.html
87 lines (72 loc) · 4.69 KB
/
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
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Basic Page Needs
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<meta charset="utf-8">
<title>Introduction to Web Design and Computer Principles</title>
<meta name="description" content="">
<meta name="author" content="">
<!-- Mobile Specific Metas
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- FONT
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<link href="//fonts.googleapis.com/css?family=Raleway:400,300,600" rel="stylesheet" type="text/css">
<!-- CSS
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/skeleton.css">
<link rel="stylesheet" href="css/styles.css">
<!-- Favicon
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<link rel="icon" type="image/png" href="images/favicon.png">
</head>
<body>
<!-- Primary Page Layout
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<div class="container">
<div id="nav" class="fourteen columns">
<ul>
<li><a href="index.html">Back to syllabus</a></li>
</ul>
</div>
<!-- Header -->
<div class="row">
<div class="twelve columns" style="margin-top: 0%">
<h2>Assignment 9: Scalable Vector Graphics</h2>
<p>In this assignment, you will create a vector graphic for the Web in SVG format.</p>
<h3>Instructions</h3>
<p>Using Adobe Illustrator, create a vector graphic for your website. This could be a logo, a symbol, or an illustration. Your image should include unique forms and colors and at least three layers. When your image is complete, save it as an SVG file as follows: File > Save As... > Format: SVG (svg) > Save. Under Advanced Options, set CSS Properties to “Style Elements.” After you click “OK” your graphic will be exported in SVG format.</p>
<p>Next, add the SVG to an HTML web page.</p>
<ol>
<li>Open your SVG file in a text editor.</li>
<li>Select everything from the opening <code>svg</code> tag to the closing <code>svg</code> tag (not including the XML version and doctype declaration).</li>
<li>Paste this code directly into the <code>body</code> section of your HTML document.</li>
</ol>
<p>Having done so, you will then be able to use CSS to style some part of your SVG image. This is easier to do if you move the CSS styles out of the SVG code and into your CSS stylesheet. You only need to add one CSS rule set for your SVG but feel free to include more if you like.</p>
<p>Lastly, using HTML syntax, add a link from your SVG to another web page on your i6 account.</p>
<h3>Submitting Your Assignment</h3>
<p>Publish your project on the i6 Web server and submit the following via <a href="http://newclasses.nyu.edu">NYU Classes</a>:
<ul>
<li>The URL to your website with the original SVG image</li>
<li>A compressed archive of your website files (including the SVG, HTML, CSS) and the original Illustrator document (in .ai format)</li>
</ul>
<h3>Grading</h3>
<p>This assignment is worth 10 points.</p>
<ul>
<li>An original vector graphic with unique forms and colors (4 points)</li>
<li>An SVG file of the graphic on the student’s website, as an active link (2 points)</li>
<li>CSS to style some part of the SVG (2 points)</li>
<li>Original Illustrator file with at least three layers submitted along with website files (2 points)</li>
</ul>
</div>
</div>
</div><!-- End Container-->
<!-- End Document
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
</body>
<!-- Load Javascript files
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</html>