SVG Overview      22   HTML5            2011 10   26
•   SVG       ?   SVG          ?•   SVG
•• SVG• SVG HTML5• SVG
•              (                          )    –                       (2011 9    -)    –              ACCESS (2005       ...
•• SVG• SVG HTML5• SVG
SVG           ?• Scalable Vector Graphics••
SVG   ?••
SVG           ?• SVG XML•              SVG•          http://www.w3.org/2000/svg<svg xmlns="http://www.w3.org/2000/svg">   ...
•• SVG• SVG HTML5• SVG
HTML5        SVG• HTML5            SVG•    –    – <object>    – <img>      / background-image
<!DOCTYPE html><html><body><div>SVG contents</div><svg>    <rect x="10" y="10" width="100" height="100"fill="blue" /></svg...
<object><!DOCTYPE html><html><body><div>SVG contents</div>  <object data="./test.svg"></object></body></html>
<img>/background-image• SVG                <img>   background-image    • list-style-image•        script
<foreignObject> • SVG             HTML                            <foreignObject><svg><foreignObject width="400" height="5...
•• SVG• SVG HTML5• SVG
SVG1.1
SVG Tiny 1.2
••••• etc...
SVG•••
•    –    – path
• SVG    o   rect (          )    o   circle (    )    o   ellipse (           )    o   line (       )    o   polyline (  ...
rect•               (x, y)   (width)       (height)• rx(       x            ), ry(    y          )    <svg xmlns="http://w...
SVG• SVG•                 fill   stroke• fill:• stroke:• stroke-width:             (     )
• SVG                               CSS      2  o   CSS       <rect style="fill:#ff0000; stroke:#0000ff">  o          <rec...
circle•      (cx, cy)        (r)<svg xmlns="http://www.w3.org/2000/svg"> <circle cx="60" cy="60" r="50" fill="red" stroke=...
ellipse           (cx, cy)    x       y<svg xmlns="http://www.w3.org/2000/svg"> <ellipse cx="100" cy="100" rx="100" ry="50...
line•            2<svg xmlns="http://www.w3.org/2000/svg"> <line x1="10" y1="10" x2="200" y2="200" stroke="#0ff" stroke-wi...
polyline•<svg xmlns="http://www.w3.org/2000/svg">  <polyline points="10,10 40,200 70,10 100,200 130,10"fill="none" stroke=...
polygon•• <polyline>                                  path<svg xmlns="http://www.w3.org/2000/svg">  <polygon points="100,1...
Path• path• d• d            "(   )(    )"    o   d="M0,0 L150,0 L150,50 L0, 50 Z"•
• M (moveTo)• Z (closeTo)                path• L (LineTo)  <path d="M0,0 L150,0 150,50 0,50 Z" />  <path d="m0,0 l150,0 0,...
•                               (Illustrator   )• 2                      2• "C     1       ,   2              "    <path d...
•           2• "C   1         ,     2          ,       "• "S   2         ,         " =>       1       2•               pat...
<path d="M20, 100C30,20 70,20 100,100C130,180 150,180180,100" /><path d="M20, 100C30,20 70,20 100,100S150,180 180,100" />
•• "Q             "• C<path d="M20, 100 Q60,20 100,100" />
<image>•        <image>     • PNG, JPEG, SVG•      (x,y)  (width),       (height)•        xlink:href      (      SVG      ...
•              <text>•      (x,y)<svg xmlns="http://www.w3.org/2000/svg">  <text x="10" y="40" fill="#0000ff"  font-family...
• rotate<text x="10" y="50" fill="#0000ff" stroke="#ff0000"rotate="45" font-family="MonoSpace" font-size="55">This is SVG....
textPath• path <defs>  <path id="textPath"d="M100,200 C200,100 300,0 400,100  C500,200 600,300 700,200 C800,100 900,100 90...
textPath
SVG font• SVG <font>• <glyph><svg xmlns="http://www.w3.org/2000/svg">  <defs>   <font id="font1">    <font-face font-famil...
• SVG transform•    o   translate (           )    o   scale (           )    o   rotate (      )    o   skew (           ...
transform(translate)translate(x             ,y               )<svg xmlns="http://www.w3.org/2000/svg">  <rect x="10" y="10...
transform(scale)scale(    )<svg xmlns="http://www.w3.org/2000/svg">  <rect x="0" y="0" width="100" height="100" fill="blue...
transform(rotate)rotate(         )<svg xmlns="http://www.w3.org/2000/svg">  <g transform="translate(100, 100)">   <rect x=...
transform(skew)skewX(X                )       XskewY(Y                    )       Y<svg xmlns="http://www.w3.org/2000/svg"...
SVG                2• SMIL Animation• SVG DOM
SMIL Animation•• SMIL•    o   animate    o   set    o   animateColor    o   animateMotion    o   animateTransform
animate••<svg xmlns="http://www.w3.org/2000/svg>   <rect x="10" y="10" width="100" height="100" stroke="blue"stroke-width=...
animate  • begin  • dur  • form  • to  • fill     (freeze       remove               )
setset <set attributeName="visibility" attributeType="CSS"   to="visible" begin="3s" dur="6s" fill="freeze" />
animateMotion<svg xmlns="http://www.w3.org/2000/svg"> <rect x="0" y="0" width="100" height="100" fill="red">   <animateMot...
animateColor<svg xmlns="http://www.w3.org/2000/svg"> <rect x="10" y="10" width="100" height="100" stroke="blue"stroke-widt...
animateTransform<svg xmlns="http://www.w3.org/2000/svg"> <rect x="10" y="10" width="100" height="100" stroke="blue"stroke-...
DOM• setAttribute()<svg xmlns="http://www.w3.org/2000/svg" onload="anim()"> <rect x="10" y="10" width="100" height="100" i...
• SVG• linearGradient:• radialGradient:
linearGradient<svg xmlns="http://www.w3.org/2000/svg"> <defs>   <linearGradient id="myGrad">    <stop offset="10%" stop-co...
linearGradient <linearGradient id="myGrad">  <stop offset="10%" stop-color="#f00" />  <stop offset="90%" stop-color="#00f"...
radialGradient<svg xmlns="http://www.w3.org/2000/svg"> <defs>   <radialGradient id="myGrad">    <stop offset="10%" stop-co...
radialGradient <radialGradient id="myGrad">  <stop offset="10%" stop-color="#f00" />  <stop offset="90%" stop-color="#00f"...
• filter•          blur <svg xmlns="http://www.w3.org/2000/svg"><defs>  <filter id="hello" fill="red">    <feGaussianBlur ...
• pattern   –• mask   –         (   )• clipPath   –• ....
SVG      @sassy_watson
SVG overview
SVG overview
Upcoming SlideShare
Loading in …5
×

SVG overview

3,669 views

Published on

Published in: Technology, Art & Photos
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,669
On SlideShare
0
From Embeds
0
Number of Embeds
811
Actions
Shares
0
Downloads
0
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • SVG overview

    1. 1. SVG Overview 22 HTML5 2011 10 26
    2. 2. • SVG ? SVG ?• SVG
    3. 3. •• SVG• SVG HTML5• SVG
    4. 4. • ( ) – (2011 9 -) – ACCESS (2005 -2011 8 ) • NetFront Browser( Web ) – SVG • NetFront Life Browser(Android WebKit ) – twitter ID (@sassy_watson)
    5. 5. •• SVG• SVG HTML5• SVG
    6. 6. SVG ?• Scalable Vector Graphics••
    7. 7. SVG ?••
    8. 8. SVG ?• SVG XML• SVG• http://www.w3.org/2000/svg<svg xmlns="http://www.w3.org/2000/svg"> <rect x="0" y="0" width="100" height="100" /></svg>
    9. 9. •• SVG• SVG HTML5• SVG
    10. 10. HTML5 SVG• HTML5 SVG• – – <object> – <img> / background-image
    11. 11. <!DOCTYPE html><html><body><div>SVG contents</div><svg> <rect x="10" y="10" width="100" height="100"fill="blue" /></svg></body></html>
    12. 12. <object><!DOCTYPE html><html><body><div>SVG contents</div> <object data="./test.svg"></object></body></html>
    13. 13. <img>/background-image• SVG <img> background-image • list-style-image• script
    14. 14. <foreignObject> • SVG HTML <foreignObject><svg><foreignObject width="400" height="500"><body> <table border="3"> <tr><td>HTML</td><td>http://www.w3.org/1999/xhtml</td></tr> <tr><td>SVG</td><td>http://www.w3.org/2000/svg</td></tr> <tr><td>MathML</td><td>http://www.w3.org/1998/Math/MathML</td></tr> </table></body></foreignObject>
    15. 15. •• SVG• SVG HTML5• SVG
    16. 16. SVG1.1
    17. 17. SVG Tiny 1.2
    18. 18. ••••• etc...
    19. 19. SVG•••
    20. 20. • – – path
    21. 21. • SVG o rect ( ) o circle ( ) o ellipse ( ) o line ( ) o polyline ( ) o polygon ( )•
    22. 22. rect• (x, y) (width) (height)• rx( x ), ry( y ) <svg xmlns="http://www.w3.org/2000/svg> <rect x="10" y="10" width="100" height="100" fill="red" stroke="blue" /> </svg>
    23. 23. SVG• SVG• fill stroke• fill:• stroke:• stroke-width: ( )
    24. 24. • SVG CSS 2 o CSS <rect style="fill:#ff0000; stroke:#0000ff"> o <rect fill="#ff0000" stroke="#0000ff" />
    25. 25. circle• (cx, cy) (r)<svg xmlns="http://www.w3.org/2000/svg"> <circle cx="60" cy="60" r="50" fill="red" stroke="blue" /></svg>
    26. 26. ellipse (cx, cy) x y<svg xmlns="http://www.w3.org/2000/svg"> <ellipse cx="100" cy="100" rx="100" ry="50" fill="red"stroke="blue" /></svg>
    27. 27. line• 2<svg xmlns="http://www.w3.org/2000/svg"> <line x1="10" y1="10" x2="200" y2="200" stroke="#0ff" stroke-width="5" /></svg>
    28. 28. polyline•<svg xmlns="http://www.w3.org/2000/svg"> <polyline points="10,10 40,200 70,10 100,200 130,10"fill="none" stroke="#00f" stroke-width="5" /></svg>
    29. 29. polygon•• <polyline> path<svg xmlns="http://www.w3.org/2000/svg"> <polygon points="100,10 40,180 190,70 10,70 160,180"fill="red" stroke="#00f" stroke-width="5" /></svg>
    30. 30. Path• path• d• d "( )( )" o d="M0,0 L150,0 L150,50 L0, 50 Z"•
    31. 31. • M (moveTo)• Z (closeTo) path• L (LineTo) <path d="M0,0 L150,0 150,50 0,50 Z" /> <path d="m0,0 l150,0 0,50 -150, 0 z" />
    32. 32. • (Illustrator )• 2 2• "C 1 , 2 " <path d="M20, 100 C30, 20 70,20 100,100" />
    33. 33. • 2• "C 1 , 2 , "• "S 2 , " => 1 2• path <path d="M20, 100 C30,20 70,20 100,100 C130,180 150,180 180,100" /> <path d="M20, 100 C30,20 70,20 100,100 S150,180 180,100" />
    34. 34. <path d="M20, 100C30,20 70,20 100,100C130,180 150,180180,100" /><path d="M20, 100C30,20 70,20 100,100S150,180 180,100" />
    35. 35. •• "Q "• C<path d="M20, 100 Q60,20 100,100" />
    36. 36. <image>• <image> • PNG, JPEG, SVG• (x,y) (width), (height)• xlink:href ( SVG )<svg xmlns=”http://www.w3.org/2000/svg” xmlns:xlink=”http://www.w3.org/1999/xlink” <image x="200" y="200" width="100px" height="100px" xlink:href="myimage.png" /></svg>
    37. 37. • <text>• (x,y)<svg xmlns="http://www.w3.org/2000/svg"> <text x="10" y="40" fill="#0000ff" font-family="Serif" font-size="24">This is SVG. </text></svg>
    38. 38. • rotate<text x="10" y="50" fill="#0000ff" stroke="#ff0000"rotate="45" font-family="MonoSpace" font-size="55">This is SVG.</text>• <tspan><text x="10" y="40" fill="blue" font-size="25"> This is <tspan font-weight="bold" fill="red">not</tspan> a pen.</text>
    39. 39. textPath• path <defs> <path id="textPath"d="M100,200 C200,100 300,0 400,100 C500,200 600,300 700,200 C800,100 900,100 900,100" /> </defs> <text font-family="Verdana" font-size="45" fill="blue"> <textPath xlink:href="#textPath"> This is SVG. textPath demo contents. </textPath> </text>
    40. 40. textPath
    41. 41. SVG font• SVG <font>• <glyph><svg xmlns="http://www.w3.org/2000/svg"> <defs> <font id="font1"> <font-face font-family="myfont"/> <glyph unicode="s" horiz-adv-x="500"d="M0,0h500v500h-500z" /> </font> </defs> <text x="10" y="50" font-size="50" font-family="myfont">svgfont</text></svg>
    42. 42. • SVG transform• o translate ( ) o scale ( ) o rotate ( ) o skew ( / ) o matrix ( )
    43. 43. transform(translate)translate(x ,y )<svg xmlns="http://www.w3.org/2000/svg"> <rect x="10" y="10" width="100" height="100" fill="red" /> <rect x="10" y="10" width="100" height="100" fill="blue"transform="translate(30, 30)"/></svg>
    44. 44. transform(scale)scale( )<svg xmlns="http://www.w3.org/2000/svg"> <rect x="0" y="0" width="100" height="100" fill="blue"transform="scale(1.5)"/> <rect x="0" y="0" width="100" height="100" fill="red" /></svg>
    45. 45. transform(rotate)rotate( )<svg xmlns="http://www.w3.org/2000/svg"> <g transform="translate(100, 100)"> <rect x="0" y="0" width="100" height="100" fill="red" /> <rect x="0" y="0" width="100" height="100" fill="blue"transform="rotate(45)"/> </g></svg>
    46. 46. transform(skew)skewX(X ) XskewY(Y ) Y<svg xmlns="http://www.w3.org/2000/svg"> <g transform="translate(100, 100)"> <rect x="0" y="0" width="100" height="100" fill="red" /> <rect x="0" y="0" width="100" height="100" fill="blue"transform="skewX(45)" opacity="0.8" /> </g></svg> X 45
    47. 47. SVG 2• SMIL Animation• SVG DOM
    48. 48. SMIL Animation•• SMIL• o animate o set o animateColor o animateMotion o animateTransform
    49. 49. animate••<svg xmlns="http://www.w3.org/2000/svg> <rect x="10" y="10" width="100" height="100" stroke="blue"stroke-width="10"> <animate attributeName="x" attributeType="XML"begin="0s" dur="5s" fill="freeze" from="10" to="100" /> </rect></svg>
    50. 50. animate • begin • dur • form • to • fill (freeze remove )
    51. 51. setset <set attributeName="visibility" attributeType="CSS" to="visible" begin="3s" dur="6s" fill="freeze" />
    52. 52. animateMotion<svg xmlns="http://www.w3.org/2000/svg"> <rect x="0" y="0" width="100" height="100" fill="red"> <animateMotion path="M10, 50 C10, 0 100,0 100,50S200,100 200,50" begin="0s" dur="2s" fill="freeze" /> </rect></svg>
    53. 53. animateColor<svg xmlns="http://www.w3.org/2000/svg"> <rect x="10" y="10" width="100" height="100" stroke="blue"stroke-width="10"> <animateColor attributeName="fill" attributeType="CSS" begin="0s" dur="6s" from="#f00" to="#00f" fill="freeze" /> </rect></svg>
    54. 54. animateTransform<svg xmlns="http://www.w3.org/2000/svg"> <rect x="10" y="10" width="100" height="100" stroke="blue"stroke-width="10"> <animateTransform attributeName="transform"attributeType="XML" type="rotate" from="-30" to="0" begin="3s" dur="6s" fill="freeze" /> </rect></svg>
    55. 55. DOM• setAttribute()<svg xmlns="http://www.w3.org/2000/svg" onload="anim()"> <rect x="10" y="10" width="100" height="100" id="r1" /> <script><![CDATA[ var x = 10; function anim() { var elem = document.getElementById(r1); elem.setAttribute("x", x); x += 1; if (x < 200) setTimeout("anim()", 10); }; ]]></script></svg>
    56. 56. • SVG• linearGradient:• radialGradient:
    57. 57. linearGradient<svg xmlns="http://www.w3.org/2000/svg"> <defs> <linearGradient id="myGrad"> <stop offset="10%" stop-color="#f00" /> <stop offset="90%" stop-color="#00f" /> </linearGradient> </defs> <rect fill="url(#myGrad)" x="10" y="10" width="200"height="200" /></svg>
    58. 58. linearGradient <linearGradient id="myGrad"> <stop offset="10%" stop-color="#f00" /> <stop offset="90%" stop-color="#00f" /> </linearGradient> 10% #f00 90% #00f
    59. 59. radialGradient<svg xmlns="http://www.w3.org/2000/svg"> <defs> <radialGradient id="myGrad"> <stop offset="10%" stop-color="#f00" /> <stop offset="90%" stop-color="#00f" /> </radialGradient> </defs> <rect fill="url(#myGrad)" x="10" y="10" width="200"height="200" /></svg>
    60. 60. radialGradient <radialGradient id="myGrad"> <stop offset="10%" stop-color="#f00" /> <stop offset="90%" stop-color="#00f" /> </radialGradient> 90% #00f 10% #f00
    61. 61. • filter• blur <svg xmlns="http://www.w3.org/2000/svg"><defs> <filter id="hello" fill="red"> <feGaussianBlur in="SourceGraphic"stdDeviation="4" result="blur" /> </filter></defs><rect x="10" y="10" width="100" height="100"fill="red" filter="url(#hello)" /></svg>
    62. 62. • pattern –• mask – ( )• clipPath –• ....
    63. 63. SVG @sassy_watson

    ×