Learning Code

Creating Coding

Creating SVG Images

SVG images can only be created in graphics programs with vector capabilities. In class we will use Adobe Illustrator.

Open Illustrator and go to File → New
1. Add a name for your new image
2. Change the unit from points to pixels (since we use pixels on the websites, it is more helpful to be consistent)
3. Choose an image size (keep in mind since we are working with vectors the image will display well at any size)
4. Under "Advanced", change the color mode to RGB (since this is intended for the computer screen)
5. Press "OK"
Use the pen tool, shape tool & etc. to create your vector image
- Bezier Game ~ learn how to use a pen tool
- Illustrator Tutorials ~ learn beginning and advanced skills
Save your image as an SVG
1. Go to File → Save As
2. Change the name if necessary
3. Change the format to SVG
4. Choose a location to save the image
5. Press "Save"

Using SVG Images in a Website

SVG images can be added to HTML pages in several ways. This image format also opens in text editors and can be edited as text. CSS can be added to the SVG in the text version of the file.

Placing an SVG in an image element

When you do not need to edit the individual colors & etc. for the SVG, you can place the SVG in an image element or as a background image like normal.

The aspect ratio will remain locked unless you disable the aspect ratio in the SVG code. This can be done by opening your SVG in Brackets or another editor and adding preserveAspectRatio="none" inside the opening SVG tag:

Adding SVG code directly in HTML

Adding the code of your SVG directly into your HTML has benefits:

Colors can be changed directly in the HTML
Allows classes and ids to be added inside the SVG directly in the HTML
Allows the stylesheet to effect the SVG

and disadvantages:

Adds to the length/complexity of the page
Prevents the image from being cached by the browser

At this point, you can add CSS inline or add classes/ids to use with the external stylesheet. If you are adding classes/ids, you most likely need to add them to the opening tag for path. The CSS properties include:

fill (instead of background)
stroke (to target the outline)
stroke-width

Editing SVG Code

SVG's can be edited in text and/or HTML editors. When using a text editor, be very careful about the type of symbols. Using decorative versions of symbols like the “curly quotation marks” breaks the display of the SVG. This image is missing

Raster vs. Vector

Raster (pixel) based images lose display quality if they are scaled up beyond the dimensions they were created for. Photographs and painterly images have to be raster based. If you are creating images that have a flat, graphic look instead of a painterly look, it's better to work with vector based imagery. Image showing PNG resize quality is missing

Instead of being made up of pixels (like most other image formats), SVG images are made up of coordinates and other data which can easily adjust the scale of the image. This makes SVG an ideal format for logos and other graphic images that should scale responsively with the size/orientation of the website. Image showing PNG resize quality is missing

Html Css

Can you use the Try-it Editor to try out these concepts?