SVG overview

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 ?• 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>

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>

<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>

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" />

•• "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

http://d.hatena.ne.jp	351
http://sassylog.blogspot.com	133
http://sassylog.blogspot.jp	60
http://a0.twimg.com	20
http://paper.li	14
http://b.hatena.ne.jp	5
http://webcache.googleusercontent.com	5
http://localhost	3
http://sassylog.blogspot.de	1

SVG overview

by Satoshi Watanabe on Oct 25, 2011

Accessibility

Categories

Tags

Upload Details

Usage Rights

9 Embeds 592

Statistics

SVG overview — Presentation Transcript