Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd Logo
Upload

Welcome to Scribd!

  • 113 views

    SVG

    Uploaded by

    Angel Marquez
    This document provides an introduction to SVG (Scalable Vector Graphics). It explains that SVG is a 2D vector image format that is resolution independent, can be manipulated with CSS and JavaScript, and is best suited for logos, icons, animations, illustrations, and charts/graphs. The document outlines how to create SVGs by hand coding or using vector editors, and how to embed SVGs in web pages using <img>, <embed>, <object>, <iframe>, or inline <svg> tags.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd

    SVG

    Uploaded by

    Angel Marquez
    113 views51 pages
    This document provides an introduction to SVG (Scalable Vector Graphics). It explains that SVG is a 2D vector image format that is resolution independent, can be manipulated with CSS and JavaScript, and is best suited for logos, icons, animations, illustrations, and charts/graphs. The document outlines how to create SVGs by hand coding or using vector editors, and how to embed SVGs in web pages using <img>, <embed>, <object>, <iframe>, or inline <svg> tags.

    Original Description:

    SVG Animation

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    This document provides an introduction to SVG (Scalable Vector Graphics). It explains that SVG is a 2D vector image format that is resolution independent, can be manipulated with CSS and JavaScript, and is best suited for logos, icons, animations, illustrations, and charts/graphs. The document outlines how to create SVGs by hand coding or using vector editors, and how to embed SVGs in web pages using <img>, <embed>, <object>, <iframe>, or inline <svg> tags.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Download as pdf or txt
    113 views51 pages

    SVG

    Uploaded by

    Angel Marquez
    This document provides an introduction to SVG (Scalable Vector Graphics). It explains that SVG is a 2D vector image format that is resolution independent, can be manipulated with CSS and JavaScript, and is best suited for logos, icons, animations, illustrations, and charts/graphs. The document outlines how to create SVGs by hand coding or using vector editors, and how to embed SVGs in web pages using <img>, <embed>, <object>, <iframe>, or inline <svg> tags.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Download as pdf or txt
    You are on page 1of 51

    SVG Fundamentals

    Introduction to SVG

    Brian Treese
    @brianmtreese | www.briantree.se

    SVG, Its Just Another Image Format


    Right?

    Wrong!
    Its So Much More!

    Blank Layout

    (the possibilities are endless)

    To Get the Most Out of This Course

    Blank Layout

    (the possibilities are endless)

    What We Will Cover

    What an SVG is, how to create, & how you use

    What types of graphics are best suited as SVGs?

    Explore & manipulate with CSS/JavaScript

    SVG spriting techniques

    SVG animation

    Optimization, browser support, examples, tools and resources

    What Exactly is SVG?

    SVG
    Scalable Vector Graphics

    What is SVG?

    2D vector based image format

    Device and resolution independent

    Human readable XML code

    Can be manipulated by hand, with CSS, or with JavaScript

    SVG Code
    <svg height="100" width="100">
    <circle cx="50" cy="50" r="50" />
    </svg>

    JPEG Code
    JFIF

    d d

    & d

    [ - "
    d d
    p!
    ! 01A"2#$ aqBrQb3Ss%5
    Cc4TU&6V

    When to Use an SVG

    Logos

    Icons

    Animations

    Illustrations

    Charts & Graphs

    Can It Be an SVG?

    Simpler shapes and limited color palette

    Is it vector in your design program? It can be an SVG

    HTML should still be HTML

    Complex graphics, like photos, should still be JPEG or PNG

    How to Create an SVG

    How to Create an SVG

    By hand coding

    Popular vector image editors


    -

    Inkscape
    Adobe Illustrator
    Sketch

    How to Use SVGs

    <img>

    How to
    Use SVG

    <embed>
    <object>
    <iframe>
    Inline <svg>

    <img>

    <embed>

    <object>

    <iframe>

    Inline <svg>

    Summary
    More than just another graphics format
    Scalable, device and resolution
    independent
    Best for logos, icons, animations,
    illustrations, charts and graphs
    Can be created by hand or in vector
    image editors

    You might also like