.SVGTUTORIAL

Scalable Vector Graphics using Adobe Illustrator

Douglas O. Sanchez
2A MIT '14

Introduction

Introduction

You are part of a new company that is about to choose its first hardware product on the week of October 19th and publicly launch on December 8th, 2014. Visual communication within your company at this stage is crucial for efficient presentation of ideas and research. Branding is also neccesary as your team prepares to face the outside world. You must choose an image format for two-dimensional graphics that your company will predominantly use. Why .svg?

  • Responsive/Scalable
  • Smaller file sizes
  • Is simply an XML file; you can open an SVG in a text editor and edit the code.
  • Can be styled with CSS; colours can be changed, elements hidden, allowing a single image to be used for multiple purposes.
  • Animation

Product Branding

Web Presence

Print Materials

New Document

Typography

Sketch to Vector

COLOUR

Contrast Ratio

4.5 : 1

Success Criterion 1.4.3 of Web Content Accessibility Guidelines (WCAG) 2.0 requires the visual presentation of text and images of text has a contrast ratio of at least 4.5:1, except for the following: Large Text: Large-scale text and images of large-scale text have a contrast ratio of at least 3:1;

Calculate Contrast Ratio
  • 2.009 Colour Palette

    The download zip contains an Adobe Illustrator colour swatches that you can install. Included in the zip is a read-me.pdf with instructions on how to install the .ase file into Illustrator.

    Download the 2.009 Palette Poster Illustrator file below.

Resources