• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
HTML5 and SVG
 

HTML5 and SVG

on

  • 4,146 views

 

Statistics

Views

Total Views
4,146
Views on SlideShare
4,146
Embed Views
0

Actions

Likes
0
Downloads
26
Comments
0

0 Embeds 0

No embeds

Accessibility

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • Primeiros minutos muito importantes
  • Separar documentos.
  • For example, if an HTML implementation also supports SVG, then the Document object implements both HTMLDocument and SVGDocument.
  • Same file with “sprite sheet” containing multiple elements.Embed the same object in several web page locations but with different viewboxs.SHOW SVG FILE DEMO (change viewport)
  • SHOW DEMO: 01_primitives.htmlpoint-in-polygon: uma linha horizontal se cruzar um múmero de fronteiras impar(dentro) ou par(fora)
  • Mostrar exemplo do texto
  • SHOW REUSE EXAMPLE.In retrospective, recap code for TEXT EXAMPLE

HTML5 and SVG HTML5 and SVG Presentation Transcript

  • HTML5 and SVG
    Nuno Rosa
    [Developer | Byclosure]
    [nuno.rosa@byclosure.com]
    [@yarcub]
  • WHo
  • WHere
  • Agenda
    HTML5 & SVG
    Adoption
    SVG 101
    Why & where?
    Q & A
  • SVG is not HTML5...
  • SVG is not HTML5...
    ...but they get along.
  • Are we there yet?
    Real world examples
  • Bing Maps
    Route paths
  • Google Visualization API
    On demand charts (e.g. Google Docs)
  • Vexflow
    Music notation rendering (http://vexflow.com)
  • PepsiCo SXSW 2011 Zeitgeist
    Twitter stream visualization (http://pepsicozeitgeist.com/)
  • SVG 101
    The basics
  • Describes 2D vector images
    Static
    Animation
    XML
    Full DOM support
    Scripting
    Open standard (W3C)
    Modern browsers support (no plugins)
    Fallback options available
    In a nutshell
  • Standalone
    <object data="myfile.svg" type="image/svg+xml" width="100" height="100"/>
    <embedsrc="myfile.svg" width="100" height="100"/>
    <iframesrc="myfile.svg" width="100" height="100"/>
    <imagesrc="myfile.svg" width="100" height="100"/>
    No scripting
    {background-image: url('myfile.svg');}
    No scripting
    SVG on web pages
  • Standalone (scripting)
    HTML Document
    SVG Document
    SVG on web pages
    <object id="svgContainer" data="myfile.svg" type="image/svg+xml" width="100" height="100"/>
    SVGDoc = document.getElementById("#svgContainer") .getSVGDocument();var element = SVGDoc.querySelector("#elementId");element.setAttribute("x", 100);
    <svgxmlns="http://www.w3.org/2000/svg"> <rect id="elementId" width="10" height="10"/></svg>
  • XHTML <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 plus MathML 2.0 plus SVG 1.1//EN" "http://www.w3.org/2002/04/xhtml-math-svg/xhtml-math-svg.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:svg="http://www.w3.org/2000/svg">
    <head></head>
    <body>
    <div id="container">
    <svg:svg width="100" height="100" >
    <svg:rect y="10" X="10" width="20" height="20"/>
    </svg:svg>
    </div>
    </body>
    </html>
    Inline
  • HTML5<!DOCTYPE HTML><html><head></head><body> <div id="container"><svg width="100" height="100" > <rect y="10" X="10" width="20" height="20"/> </svg> </div></body></html>
    Inline
  • Inline (scripting)
    <div id="container"> <svg width="100" height="100" > <rect id="myShape" y="10" X="10" width="20" height="20"/> </svg> </div>
    Core DOM (HTML and SVG documents)var shape = document.querySelector("#myShape");shape.setAttribute("width", 100);
    SVG DOM (SVG documents specific)var shape = document.querySelector("#myShape");shape.width.baseVal.value = 100; //Faster
    SVG on web pages
  • 2D x-y plane
    viewBox defines visible area
    in IE9 default overflow != hidden
    <svgviewBox="0 0 343 501" >
    All element coordinates are absolute
    SVG viewport
  • SVG capabilities overview
    Primitive shapes
    Text
    Fill/Strokes
    Gradients
    Patterns
    Filters
    Scripting
    Metadata
    SMIL(SynchronizedMultimediaIntegrated Language)
    Styling (CSS2)
    Links
    Groups
    Transformations
    Clipping Paths
    Masking
    Foreign Objects
    Conditionals
    DOM events
  • SVG primitive shapes
    <circle />
    <rect />
    <ellipse />
    <line />
    <polyline />
    <polygon />
    <path />
    Linear
    Quad
    Cubic
  • Selectable and searchable
    Even when following paths
    Just another element
    Fill
    Border
    Transformations
    SVG text
  • Group elements, treat them as one
    <g id="aGroup"fill="orange"><rect x="20" y="30" width="40" height="40"/><circle cx="100" cy="100" r="10" />
    </g>
    Group
  • Element property, transform="…"
    Rotation, revolves element around point
    transform="rotate(degrees, cx, cy)"
    Scale, multiply all (x,y) coordinates
    transform="scale(xfactor, yfactor)"
    Translation, add (x,y) positions
    transform="translate(dx, dy)"
    Transform
  • Elements declared inside definitions are not rendered.
    Ideal for reusing elements
    Gradients
    Text paths
    Clipping paths
    Repeated elements
    <defs>
    <circle id="dot"cx="10" cy="10" r="5">
    </defs>
    <use xlink:href="#dot" transform="translate(120,0)" />
    <use xlink:href="#dot" transform="translate(120,100)" />
    Reuse
  • SVG capabilities overview
    Primitive shapes
    Text
    Fill/Strokes
    Gradients
    Patterns
    Filters
    Scripting
    Metadata
    SMIL(SynchronizedMultimediaIntegrated Language)
    Styling (CSS2)
    Links
    Groups
    Transformations
    Clipping Paths
    Masking
    Foreign Objects
    Conditionals
    DOM events
    http://caniuse.com/#search=svg
  • Why SVG?
    Some advantages
  • Scale factor
    Multiscreen applications
    High fidelity graphics
    Text Format
    Accessibility
    Version Control
    Semantic
  • Bandwith
    Small filesize
    Changes can be done in browser
    avoiding server round-trip
    Gzip encoded .svgz
    Server must send reponse headerContent-Enconding: gzip
  • An SVG Primer for Today's Browsers
    http://www.w3.org/Graphics/SVG/IG/resources/svgprimer.html
    Byclosuregithub account
    http://github.com/Byclosure/SVG101
    RaphaelJS
    http://raphaeljs.com/
    jQuery SVG
    http://keith-wood.name/svg.html
    Inkscape
    http://inkscape.org/
    Visual Studio SVG schema Intelisense plugin
    http://visualstudiogallery.msdn.microsoft.com/22479d6b-42d5-499f-b501-18e90e579540
    SVGWeb (cross-browser support)
    http://code.google.com/p/svgweb/
    References
  • Market is adopting SVG
    Different ways to place SVG on HTML
    SVG basic concepts
    Tools & Frameworks
    Recap
  • Check the demos.(http://github.com/Byclosure/SVG101)Go out and play!
  • Thank you.Questions?
    nuno.rosa@byclosure.com
    @yarcub