Assignment 9: Scalable Vector Graphics

In this assignment, you will create a vector graphic for the Web in SVG format.

Instructions

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.

Next, add the SVG to an HTML web page.

  1. Open your SVG file in a text editor.
  2. Select everything from the opening svg tag to the closing svg tag (not including the XML version and doctype declaration).
  3. Paste this code directly into the body section of your HTML document.

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.

Lastly, using HTML syntax, add a link from your SVG to another web page on your i6 account.

Submitting Your Assignment

Publish your project on the i6 Web server and submit the following via NYU Classes:

  • The URL to your website with the original SVG image
  • A compressed archive of your website files (including the SVG, HTML, CSS) and the original Illustrator document (in .ai format)

Grading

This assignment is worth 10 points.

  • An original vector graphic with unique forms and colors (4 points)
  • An SVG file of the graphic on the student’s website, as an active link (2 points)
  • CSS to style some part of the SVG (2 points)
  • Original Illustrator file with at least three layers submitted along with website files (2 points)