• Save
SVG overview
Upcoming SlideShare
Loading in...5
×
 

SVG overview

on

  • 3,221 views

 

Statistics

Views

Total Views
3,221
Views on SlideShare
2,424
Embed Views
797

Actions

Likes
4
Downloads
0
Comments
0

12 Embeds 797

http://d.hatena.ne.jp 446
http://sassylog.blogspot.jp 158
http://sassylog.blogspot.com 138
http://a0.twimg.com 20
http://paper.li 14
http://webcache.googleusercontent.com 6
http://b.hatena.ne.jp 5
http://localhost 3
http://sassylog.blogspot.de 2
http://sassylog.blogspot.in 2
http://www.linkedin.com 2
http://www.sassylog.blogspot.com 1
More...

Accessibility

Upload Details

Uploaded via as Apple Keynote

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
  • \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 SVG overview Presentation Transcript

  • SVG Overview 22 HTML5 2011 10 26
  • • SVG ? SVG ?• SVG
  • •• SVG• SVG HTML5• SVG
  • • ( ) – (2011 9 -) – ACCESS (2005 -2011 8 ) • NetFront Browser( Web ) – SVG • NetFront Life Browser(Android WebKit ) – twitter ID (@sassy_watson)
  • •• 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"> <rect x="0" y="0" width="100" height="100" /></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></body></html>
  • <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="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>
  • •• SVG• SVG HTML5• SVG
  • SVG1.1
  • SVG Tiny 1.2
  • ••••• etc...
  • SVG•••
  • • – – path
  • • SVG o rect ( ) o circle ( ) o ellipse ( ) o line ( ) o polyline ( ) o polygon ( )•
  • 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>
  • SVG• SVG• fill stroke• fill:• stroke:• stroke-width: ( )
  • • SVG CSS 2 o CSS <rect style="fill:#ff0000; stroke:#0000ff"> o <rect fill="#ff0000" stroke="#0000ff" />
  • circle• (cx, cy) (r)<svg xmlns="http://www.w3.org/2000/svg"> <circle cx="60" cy="60" r="50" fill="red" stroke="blue" /></svg>
  • 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>
  • 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>
  • 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>
  • 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>
  • 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,50 -150, 0 z" />
  • • (Illustrator )• 2 2• "C 1 , 2 " <path d="M20, 100 C30, 20 70,20 100,100" />
  • • 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" />
  • <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 )<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>
  • • <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>
  • • 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>
  • 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>
  • textPath
  • 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>
  • • SVG transform• o translate ( ) o scale ( ) o rotate ( ) o skew ( / ) o matrix ( )
  • 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>
  • 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>
  • 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>
  • 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
  • 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="10"> <animate attributeName="x" attributeType="XML"begin="0s" dur="5s" fill="freeze" from="10" to="100" /> </rect></svg>
  • 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"> <animateMotion path="M10, 50 C10, 0 100,0 100,50S200,100 200,50" begin="0s" dur="2s" fill="freeze" /> </rect></svg>
  • 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>
  • 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>
  • 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>
  • • SVG• linearGradient:• radialGradient:
  • 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>
  • linearGradient <linearGradient id="myGrad"> <stop offset="10%" stop-color="#f00" /> <stop offset="90%" stop-color="#00f" /> </linearGradient> 10% #f00 90% #00f
  • 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>
  • radialGradient <radialGradient id="myGrad"> <stop offset="10%" stop-color="#f00" /> <stop offset="90%" stop-color="#00f" /> </radialGradient> 90% #00f 10% #f00
  • • 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>
  • • pattern –• mask – ( )• clipPath –• ....
  • SVG @sassy_watson