5分でわかるSVG/svg_in_5_minutes

ベクター形式の画像ファイルフォーマットであるSVGについて解説しています。
応用として、animate 要素を使ったSVGアニメーションにも触れています。

スライド中に登場するCodePenのリンクはこちら
path 要素でハートを描画する例→ https://codepen.io/konnyaku256/pen/LYZvMwa
animate 要素でアニメーションする例→ https://codepen.io/konnyaku256/pen/BazEJJy

p1ass生誕LT会での登壇資料です。
https://connpass.com/event/193445/

Transcript

1. ෼ͰΘ͔Δ47(
   QBTT@-5
   !LPOOZBLV
   
   ͜ͷεϥΠυͰ͸ !QBTT͘Μ͔Β͝ఏڙ͍͍ͨͩͨը૾Λ࢖༻͍ͯ͠·͢
   

   View Slide

2. ͜ΜʹΌ͘
   !LPOOZBLV
   4FSWFSTJEF&OHJOFFS
   &
   

   View Slide

3. 47(ͱ͸
   4DBMBCMF7FDUPS(SBQIJDT
   ֦ுࢠɿTWH TWH[
   .*.&λΠϓɿJNBHFTWHYNM
   ΈΜͳ͍͖ͩ͢ 8$͕ࡦఆ
   ϕΫλʔը૾ܗࣜͷͻͱͭ
   

   View Slide

4. த਎͸9.-Ͱهड़͞ΕͨςΩετ
   fill="none" xmlns="http://www.w3.org/2000/svg">
   width="122" stroke-linecap="round"/>
   stroke-linecap="round"/>
   width="122" stroke-linecap="round"/>
   stroke-linecap="round"/>
   width="122" stroke-linecap="round"/>
   
   

   View Slide

5. #SPXTFSTVQQPSU
   IUUQTDBOJVTFDPNTWH
   

   View Slide

6. 47(ͷྺ࢙
   47( %SBGU
   
   47(
   47( 47(5JOZ 47(#BTJD
   47(
   47( 4FDPOE&EJUJPO
   
   47(5JOZ
   

   View Slide

7. 3BTUFSWT7FDUPS
   3BTUFS #JUNBQ
   
   1/( +1&( (*' #.1 8FC1
   7FDUPS
   47( 1%' &14
   ֦େ͢Δͱߥ͍ʂ ߥ͘ͳ͍ʂ
   

   View Slide

8. ɾΞΠίϯ΍ϩΰͷ࡞੒ʹ޲͍͍ͯΔ
   ɾϑΝΠϧαΠζΛେ͖ͤͣ͘ɺߴղ૾౓σΟεϓϨΠʹରԠͰ͖Δ
   ɾ೚ҙͷςΩετΤσΟλͰฤूͰ͖Δ
   ɾϕΫλʔը૾ܗࣜͷඪ४ͱͯ͠ਁಁ͍ͯ͠ΔͨΊɺ
   ͍ΖΜͳπʔϧͰαϙʔτ͞Ε͍ͯΔ
   47(ͷϝϦοτ
   

   View Slide

9. ਎ۙͳ47(
   

   View Slide

10. 47(FMFNFOUT
    ɾMJOF
    ɾSFDU
    ɾDJSDMF
    ɾQPMZHPO
    ɾQBUI
    ɾBOJNBUF
    "OENPSFʜ
    47(͸͜ΕΒͷFMFNFOUTΛ࢖ͬͯදݱ͞ΕΔ
    

    View Slide

11. QBUI͍ͪ͹ΜΑ͘ݟΔཁૉ
    πʔϧͰॻ͖ग़ͨ͠ը૾͸
    ͍͍ͩͨ͜ͷFMFNFOUͰ
    දݱ͞Ε͍ͯΔ
    QBUIElzͷܗࣜ
    

    View Slide

12. IUUQTDPEFQFOJPLPOOZBLVQFO-:;W.XB
    QBUIͷྫ
    

    View Slide

13. ͪΐͬͱԠ༻ͯ͠ΈΔ
    

    View Slide

14. 47(FMFNFOUT
    ɾMJOF
    ɾSFDU
    ɾDJSDMF
    ɾQPMZHPO
    ɾQBUI
    ɾBOJNBUF
    "OENPSFʜ
    
    

    View Slide

15. 47(Λ BOJNBUFͰΞχϝʔγϣϯͯ͠ΈΔ
    IUUQTDPEFQFOJPLPOOZBLVQFO#B[&++Z
    

    View Slide

16. Ξχϝʔγϣϯͷ͘͠Έ
    
    
    class="left"
    stroke-dasharray="2400 400"
    stroke-dashoffset="2800"
    d="..." stroke="...">
    attributeName="stroke-dashoffset"
    to="0" dur="10s" begin="6s" repeatCount="indefinite" />
    
    class="bottom"
    stroke-dasharray="2400 400"
    stroke-dashoffset="2800"
    d="..." stroke="...">
    attributeName="stroke-dashoffset"
    to="0" dur="10s" begin="4s" repeatCount="indefinite" />
    
    

    View Slide

17. Ξχϝʔγϣϯͷ͘͠Έ
    TUSPLFEBTIBSSBZɿഁઢͷִؒͷࢦఆ
    TUSPLFEBTIPGGTFUɿഁઢͷ։࢝Ґஔͷࢦఆ
    QY QY
    QY QY
    T ͔͚ͯ PGGTFUΛʹ
    ͋ͱ͸ CFHJOlTz
    ͷΑ͏ʹEFMBZΛ͔͚ͯ
    ͍͍ײ͡ʹ
    

    View Slide

18. ΋ͪΖΜϒϥ΢βදࣔ΋0,
    JNH TSDlIPHFTWHz΍ *OMJOF47(ͰදࣔͰ͖Δʂ
    

    View Slide

19. 4QFDJBMUIBOLTUP!QBTT
    

    View Slide

20. 3FGFSFODFT
    ɾ IUUQTEFWFMPQFSNP[JMMBPSHFO64EPDT8FC47(
    ɾ IUUQTKBXJLJQFEJBPSHXJLJ4DBMBCMF@7FDUPS@(SBQIJDT
    ɾ IUUQXXXUPIPIPXFCDPNFYTWHIUNM
    ɾ IUUQTTUPDLFSKQEJBSZTWHCBTJD
    

    View Slide