SVG in depth Prepared by Avishai Taashur, WCD 2016

Presented By Avishai for Avishai

Objectives

  1. Understanding what is Scalable Vector Graphics - (SVG)
  2. Learning how to create and read the SVG document
  3. Example of manipulating SVG with CSS

Working with image tag

img src="icon.svg" alt="computer icon"

computer icon

Img Tag Verses Inline SVG

  1. img element pointing to SVG can't be manipulated with CSS
  2. Inline SVG can be manipulated with CSS and Javascript (inner elements are accessible)

Inline SVG with CSS targeting circle element

responsive SVG

viewport and viewbox are two seperate cordinante systems.

  • The viewport is the outer area of the SVG canves. (Target as SVG in CSS)
  • The viewBox is the canves itself.
  • To make element responsive, copy the height and width from element such as rectto the viewBox
  • viewBox = (read: x, y, width, height)
  • give the viewport responsive value in the CSS: width:30%, height:auto
graph

I am responsive

To make an element responsive, move the height and width to the viewBox.

svg height="100" width="120" viewBox="0 0 100 120"

Accessibility: description tags and title in SVG Element

  • titleProviding short title.
  • descDescribing what the image shows.
  • CSS style tag is allow inside the desc.
Sale on sale The biggest clearance savings of the season. All new markdowns up to 75% off at checkout

Group, symbol & path

  • Group g a group container can contain nested groups and SVG elements.
  • Symbol symbolDefine graphical template objects which can be instantiated multiple times.
  • Path pathDescribing the vector points that draws the image.

Groups

Group container can contain nested SVG and other group elements. CSS trasform can be applied to a group container.

Symbols

Symbol symbolDefine graphical template objects which can be instantiated multiple times.

A basic use will look like this:

  1. Open symbol element and give it a unique ID. symbol viewBox="0 0 100 100" id="symb1"
  2. Place an element inside the symbol such as circle.
  3. To invoke the symbol write the use tag.
  4. Call the unique ID in the xlink href path. use xlink:href="#symb1"

Paths

Describing the vector points that draws the image.

path d= is another way of drawing points.

  • M = start of the path
  • L = where points are specified
  • Z= signify the end of the path

Using polygon

polygon points="7, 10 12,0 17, 10" fill="green"

Using path

path d="M7, 10 L7,10 L12,0 L17, 10 Z" fill="purple"

Can SVG replace web fonts?

webfonts example Hello playbil font type, Hello silom font type

The power of nested groups

Groups inside SVG can be nested.


Resources

Javascript Templates

How to create a text/template with javascript

Created by Avishai for Avishai


create the HTML markup, target div and input field

setup the javascript template file

creating a function that takes input field value and replace {{name}} in the template

targeting the button input on click event.

looking for a value from the text input.

pass on value to the function.

Here it is...

Top

Steps to Convert Text to SVG:

Prepared By Avishai for Avishai
  1. Import your PSD into Adobe Illustrator

    image
  2. Select the entire text, hide all background images

    image
  3. Make sure the SVG document is coded to scale.

    Go to Object -> Artboards -> Fit to Selected Art

    image
  4. Go to "Type" --> "Create Outlines"

    image
  5. Select the following in the SVG(svg) sub menus:

    image
  6. SVG(svg) sub menu setup:

    Fonts: type: "Convert to Outlines"; Options: Image location: "Embed";
    Advanced Options: CSS Properties: "Style Attributes"; click on SVG Code.

    image
  7. SVG Code- copy the code and as it as a text file

    image
  8. Font Note: Illustrator must have the same fonts as your Photoshop file.
    Otherwide it would replace it with default fonts.

Here is the SVG:



bg image

Here is the original JPG:

image

Steps to Convert Image to SVG:

Prepared By Avishai for Avishai
  1. Import your image into Adobe Illustrator

  2. Select the entire image, provide the image original height, width; 'X' & 'Y' position is Zero.

    image
  3. Make sure the SVG document is coded to scale.

    Go to Object -> Artboards -> Fit to Selected Art

    image
  4. Select the entire image and click on image trace "High Fidelity Photo"

    image
  5. Save As SVG(svg)

    image
  6. Save As SVG(svg) in the format sub menu

    image
  7. SVG dialog box

    image
  8. SVG Code- copy the code and as it as a text file

    image

Here is the SVG: