• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Dive Into SVG
 

Dive Into SVG

on

  • 5,235 views

about SVG features

about SVG features

Statistics

Views

Total Views
5,235
Views on SlideShare
4,728
Embed Views
507

Actions

Likes
11
Downloads
44
Comments
0

17 Embeds 507

http://d.hatena.ne.jp 270
http://jise.l 126
http://preview-jisedai.pxgrid.net 63
http://us-w1.rockmelt.com 9
http://seikaisha-shinsho.dev.in.sinap.jp 9
http://twitter.com 8
http://main.local 4
http://tweetedtimes.com 3
http://ji-sedai.test.sinap.jp 3
http://mundo-powerpoints.blogspot.com 2
https://twitter.com 2
http://webcache.googleusercontent.com 2
http://nuevospowerpoints.blogspot.com 2
http://a0.twimg.com 1
http://preview-oldjise.pxgrid.net 1
http://jisedai.localhost 1
http://131.253.14.66 1
More...

Accessibility

Upload Details

Uploaded via as Adobe PDF

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

    Dive Into SVG Dive Into SVG Presentation Transcript

    • 2011 8 21
    • 2011 8 21
    • 2011 8 21
    • 2011 8 21
    • 2011 8 21
    • 2011 8 21
    • <path d="..." transform="translate(30,30)"/> <path d="..." transform="scale(1.5)"/> <path d="..." transform="rotate(30,0,0)"/> <path d="..." transform="skewX(45)"/>2011 8 21
    • <path d="..." transform="translate(30,30)"/> <path d="..." transform="scale(1.5)"/> <path d="..." transform="rotate(30,0,0)"/> <path d="..." transform="skewX(45)"/>2011 8 21
    • <path d="..." transform="translate(30,30)"/> <path d="..." transform="scale(1.5)"/> <path d="..." transform="rotate(30,0,0)"/> <path d="..." transform="skewX(45)"/>2011 8 21
    • transform="scale(1.5) rotate(45)"2011 8 21
    • 2011 8 21
    • 2011 8 21
    • selector { -webkit-transform : rotate(45deg); -moz-transform : rotate(45deg); -ms-transform : rotate(45deg); -o-transform : rotate(45deg); transform : rotate(45deg); }2011 8 21
    • 2011 8 21
    • 2011 8 21
    • 2011 8 21
    • 2011 8 21
    • 2011 8 21
    • <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <a xlink:href="http://google.com"> <path d="..." /> </a> </svg>2011 8 21
    • <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <a xlink:href="http://google.com"> <path d="..." /> </a> </svg>2011 8 21
    • <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <a xlink:href="http://google.com"> <path d="..." /> </a> </svg>2011 8 21
    • <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <a xlink:href="http://google.com"> <path d="..." /> </a> </svg>2011 8 21
    • <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <a xlink:href="http://google.com"> <path d="..." /> </a> </svg>2011 8 21
    • <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <a xlink:href="http://google.com"> <path d="..." /> </a> </svg>2011 8 21
    • 2011 8 21
    • 2011 8 21
    • 2011 8 21
    • <svg xmlns="http://www.w3.org/2000/svg"> <defs> <style type="text/css"> path#sample{ fill: #FFAA00; } </style> </defs> <path id="sample" d="..." /> </svg>2011 8 21
    • <svg xmlns="http://www.w3.org/2000/svg"> <defs> <style type="text/css"> path#sample{ fill: #FFAA00; } </style> </defs> <path id="sample" d="..." /> </svg>2011 8 21
    • <svg xmlns="http://www.w3.org/2000/svg"> <defs> <style type="text/css"> path#sample{ fill: #FFAA00; } </style> </defs> <path id="sample" d="..." /> </svg>2011 8 21
    • <svg xmlns="http://www.w3.org/2000/svg"> <defs> <style type="text/css"> path#sample{ fill: #FFAA00; } </style> </defs> <path id="sample" d="..." /> </svg>2011 8 21
    • <svg xmlns="http://www.w3.org/2000/svg"> <defs> <style type="text/css"> path#sample{ fill: #FFAA00; } </style> </defs> <path id="sample" d="..." /> </svg>2011 8 21
    • <svg xmlns="http://www.w3.org/2000/svg"> <defs> <style type="text/css"> path#sample{ fill: #FFAA00; } </style> </defs> <path id="sample" d="..." /> </svg>2011 8 21
    • <svg xmlns="http://www.w3.org/2000/svg"> <defs> <style type="text/css"> path#sample{ fill: #FFAA00; } </style> </defs> <path id="sample" d="..." /> </svg>2011 8 21
    • 2011 8 21
    • 2011 8 21
    • path:hover{ fill-opacity:0.5; } @media(max-width:400px){ path{ fill:#36f; stroke:#000; stroke-width:6; } }2011 8 21
    • path:hover{ fill-opacity:0.5; } @media(max-width:400px){ path{ fill:#36f; stroke:#000; stroke-width:6; } }2011 8 21
    • path:hover{ fill-opacity:0.5; } @media(max-width:400px){ path{ fill:#36f; stroke:#000; stroke-width:6; } }2011 8 21
    • 2011 8 21
    • 2011 8 21
    • 2011 8 21
    • 2011 8 21
    • 2011 8 21
    • 2011 8 21
    • <svg xmlns="http://www.w3.org/2000/svg"> <defs> <filter id="MyFilter"> <feGaussianBlur stdDeviation="5"> </filter> </defs> <g filter="url(#MyFilter)"> <path d="..." /> </g> </svg>2011 8 21
    • <svg xmlns="http://www.w3.org/2000/svg"> <defs> <filter id="MyFilter"> <feGaussianBlur stdDeviation="5"> </filter> </defs> <g filter="url(#MyFilter)"> <path d="..." /> </g> </svg>2011 8 21
    • <svg xmlns="http://www.w3.org/2000/svg"> <defs> <filter id="MyFilter"> <feGaussianBlur stdDeviation="5"> </filter> </defs> <g filter="url(#MyFilter)"> <path d="..." /> </g> </svg>2011 8 21
    • <svg xmlns="http://www.w3.org/2000/svg"> <defs> <filter id="MyFilter"> <feGaussianBlur stdDeviation="5"> </filter> </defs> <g filter="url(#MyFilter)"> <path d="..." /> </g> </svg>2011 8 21
    • <svg xmlns="http://www.w3.org/2000/svg"> <defs> <filter id="MyFilter"> <feGaussianBlur stdDeviation="5"> </filter> </defs> <g filter="url(#MyFilter)"> <path d="..." /> </g> </svg>2011 8 21
    • <svg xmlns="http://www.w3.org/2000/svg"> <defs> <filter id="MyFilter"> <feGaussianBlur stdDeviation="5"> </filter> </defs> <g filter="url(#MyFilter)"> <path d="..." /> </g> </svg>2011 8 21
    • <svg xmlns="http://www.w3.org/2000/svg"> <defs> <filter id="MyFilter"> <feGaussianBlur stdDeviation="5"> </filter> </defs> <g filter="url(#MyFilter)"> <path d="..." /> </g> </svg>2011 8 21
    • <svg xmlns="http://www.w3.org/2000/svg"> <defs> <filter id="MyFilter"> <feGaussianBlur stdDeviation="5"> </filter> </defs> <g filter="url(#MyFilter)"> <path d="..." /> </g> </svg>2011 8 21
    • <svg xmlns="http://www.w3.org/2000/svg"> <defs> <filter id="MyFilter"> <feGaussianBlur stdDeviation="5"> </filter> </defs> <g filter="url(#MyFilter)"> <path d="..." /> </g> </svg>2011 8 21
    • 2011 8 21
    • 2011 8 21
    • <svg xmlns="http://www.w3.org/2000/svg"> <defs> <filter id="MyFilter"> <feGaussianBlur stdDeviation="5"> </filter> </defs> <g filter="url(#MyFilter)"> <path d="..." /> </g> </svg>2011 8 21
    • 2011 8 21
    • 2011 8 21
    • 2011 8 21
    • 2011 8 21
    • 2011 8 21
    • in="sourceAplha"2011 8 21
    • <feGaussianBlur/>2011 8 21
    • <feOffet/>2011 8 21
    • in="sourceGraphic"2011 8 21
    • <feMerge/>2011 8 21
    • 2011 8 21
    • <filter id="DropShadow"> <feGaussianBlur in="sourceAlpha" stdDeviation="5" result="blur"/> <feOffet in="blur" dx="5" dy="5" result="offetBlur"/> <feMerge> <feMergeNode in="offsetBlur"/> <feMergeNode in="sourceGraphic"/> </feMerge> </filter>2011 8 21
    • <filter id="DropShadow"> <feGaussianBlur in="sourceAlpha" stdDeviation="5" result="blur"/> <feOffet in="blur" dx="5" dy="5" result="offetBlur"/> <feMerge> <feMergeNode in="offsetBlur"/> <feMergeNode in="sourceGraphic"/> </feMerge> </filter>2011 8 21
    • <filter id="DropShadow"> <feGaussianBlur in="sourceAlpha" stdDeviation="5" result="blur"/> <feOffet in="blur" dx="5" dy="5" result="offetBlur"/> <feMerge> <feMergeNode in="offsetBlur"/> <feMergeNode in="sourceGraphic"/> </feMerge> </filter>2011 8 21
    • <filter id="DropShadow"> <feGaussianBlur in="sourceAlpha" stdDeviation="5" result="blur"/> <feOffet in="blur" dx="5" dy="5" result="offetBlur"/> <feMerge> <feMergeNode in="offsetBlur"/> <feMergeNode in="sourceGraphic"/> </feMerge> </filter>2011 8 21
    • <filter id="DropShadow"> <feGaussianBlur in="sourceAlpha" stdDeviation="5" result="blur"/> <feOffet in="blur" dx="5" dy="5" result="offetBlur"/> <feMerge> <feMergeNode in="offsetBlur"/> <feMergeNode in="sourceGraphic"/> </feMerge> </filter>2011 8 21
    • <filter id="DropShadow"> <feGaussianBlur in="sourceAlpha" stdDeviation="5" result="blur"/> <feOffet in="blur" dx="5" dy="5" result="offetBlur"/> <feMerge> <feMergeNode in="offsetBlur"/> <feMergeNode in="sourceGraphic"/> </feMerge> </filter>2011 8 21
    • <filter id="DropShadow"> <feGaussianBlur in="sourceAlpha" stdDeviation="5" result="blur"/> <feOffet in="blur" dx="5" dy="5" result="offetBlur"/> <feMerge> <feMergeNode in="offsetBlur"/> <feMergeNode in="sourceGraphic"/> </feMerge> </filter>2011 8 21
    • 2011 8 21
    • 2011 8 21
    • 2011 8 21
    • 2011 8 21
    • 2011 8 21
    • <rect width="100" height="100" fill="#0099FF"> <animateMotion dur="3s" rotate="auto"> <mpath xlink:href="#guide"/> </animateMotion> </rect> <path id="guide" d="..."/>2011 8 21
    • <rect width="100" height="100" fill="#0099FF"> <animateMotion dur="3s" rotate="auto"> <mpath xlink:href="#guide"/> </animateMotion> </rect> <path id="guide" d="..."/>2011 8 21
    • <rect width="100" height="100" fill="#0099FF"> <animateMotion dur="3s" rotate="auto"> <mpath xlink:href="#guide"/> </animateMotion> </rect> <path id="guide" d="..."/>2011 8 21
    • <rect width="100" height="100" fill="#0099FF"> <animateMotion dur="3s" rotate="auto"> <mpath xlink:href="#guide"/> </animateMotion> </rect> <path id="guide" d="..."/>2011 8 21
    • <rect width="100" height="100" fill="#0099FF"> <animateMotion dur="3s" rotate="auto"> <mpath xlink:href="#guide"/> </animateMotion> </rect> <path id="guide" d="..."/>2011 8 21
    • <rect width="100" height="100" fill="#0099FF"> <animateMotion dur="3s" rotate="auto"> <mpath xlink:href="#guide"/> </animateMotion> </rect> <path id="guide" d="..."/>2011 8 21
    • 2011 8 21
    • 2011 8 21
    • 2011 8 21
    • <svg xmlns="http://www.w3.org/2000/svg"> <g id="sample" ...> <path d="..."/> </g> <script type="application/ecmascript"> document.querySelector("#sample").addEventListener("click", function(){ this.setAttribute("fill","red"); alert("Clicked !!"); }, false); </script> </svg>2011 8 21
    • 2011 8 21
    • 2011 8 21
    • 2011 8 21
    • 2011 8 21
    • <body> <h1>img </h1> <img src="image.svg" alt=""> </body>2011 8 21
    • <body> <h1>img </h1> <img src="image.svg" alt=""> </body>2011 8 21
    • 2011 8 21
    • <body> <h1>img </h1> <svg width="300" height="300"> <path d="..." /> <path d="..." /> <path d="..." /> </svg> </body>2011 8 21
    • <body> <h1>img </h1> <svg width="300" height="300"> <path d="..." /> <path d="..." /> <path d="..." /> </svg> </body>2011 8 21
    • 2011 8 21
    • 2011 8 21
    • 2011 8 21
    • 2011 8 21
    • 2011 8 21
    • 2011 8 21
    • 2011 8 21
    • 2011 8 21
    • 2011 8 21
    • 2011 8 21