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
   ͘Μ͔Β͝ఏڙ͍͍ͨͩͨը૾Λ࢖༻͍ͯ͠·͢
2. ͜ΜʹΌ͘ !LPOOZBLV 4FSWFSTJEF
   &OHJOFFS &
3. 47(ͱ͸ 4DBMBCMF
   7FDUPS
   (SBQIJDT ֦ுࢠɿTWH
   TWH[ .*.&λΠϓɿJNBHFTWH YNM ΈΜͳ͍͖ͩ͢ 8$
   ͕ࡦఆ ϕΫλʔը૾ܗࣜͷͻͱͭ
4. த਎͸9.-Ͱهड़͞ΕͨςΩετ <svg width="805" height="805" viewBox="0 0 805 805" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M262.762 542.384C262.762 542.384 61.0005 574.884 61 401.385C60.9995 238.884 262.762 263.884 262.762 263.884" stroke="#545454" stroke- width="122" stroke-linecap="round"/> <path d="M541.126 541.5C541.126 541.5 573.508 743.999 400.641 744C238.734 744 263.642 542.5 263.642 542.5" stroke="#FFC287" stroke-width="122" stroke-linecap="round"/> <path d="M542.238 263.914C542.238 263.914 743.999 231.414 744 404.913C744 567.414 541.242 541.414 541.242 541.414" stroke="#545454" stroke- width="122" stroke-linecap="round"/> <path d="M264.754 263.5C264.754 263.5 232.372 61.0005 405.239 61C567.147 60.9995 542.238 264.5 542.238 264.5" stroke="#E79572" stroke-width="122" stroke-linecap="round"/> <path d="M264.754 263.884C264.754 263.884 60.9995 238.885 61 401.385" stroke="#545454" stroke- width="122" stroke-linecap="round"/> </svg>
5. #SPXTFS
   TVQQPSU IUUQTDBOJVTFDPNTWH
6. 47(ͷྺ࢙ 
   47(
   %SBGU 
   47(
    
   47(
   
   47(
   5JOZ
   47(
   #BTJD 
   47(
    
   47(
   
   4FDPOE
   &EJUJPO 
   47(
   5JOZ
   
7. 3BTUFS
   WT
   7FDUPS 3BTUFS
   #JUNBQ 1/(
   +1&(
   (*'
   #.1
   8FC1 7FDUPS 47(
   1%'
   &14 ֦େ͢Δͱߥ͍ʂ ߥ͘ͳ͍ʂ
8. ɾΞΠίϯ΍ϩΰͷ࡞੒ʹ޲͍͍ͯΔ ɾϑΝΠϧαΠζΛେ͖ͤͣ͘ɺߴղ૾౓σΟεϓϨΠʹରԠͰ͖Δ ɾ೚ҙͷςΩετΤσΟλͰฤूͰ͖Δ ɾϕΫλʔը૾ܗࣜͷඪ४ͱͯ͠ਁಁ͍ͯ͠ΔͨΊɺ ͍ΖΜͳπʔϧͰαϙʔτ͞Ε͍ͯΔ 47(ͷϝϦοτ
9. ਎ۙͳ47(
10. 47(
    FMFNFOUT ɾMJOF ɾSFDU ɾDJSDMF ɾQPMZHPO ɾQBUI ɾBOJNBUF "OE
    NPSFʜ 47(͸͜ΕΒͷFMFNFOUTΛ࢖ͬͯදݱ͞ΕΔ
11. QBUI
    ͍ͪ͹ΜΑ͘ݟΔཁૉ πʔϧͰॻ͖ग़ͨ͠ը૾͸ ͍͍ͩͨ͜ͷFMFNFOUͰ දݱ͞Ε͍ͯΔ QBUI
    Elz
    
    ͷܗࣜ
12. IUUQTDPEFQFOJPLPOOZBLVQFO-:;W.XB QBUI
    ͷྫ
13. ͪΐͬͱԠ༻ͯ͠ΈΔ
14. 47(
    FMFNFOUT ɾMJOF ɾSFDU ɾDJSDMF ɾQPMZHPO ɾQBUI ɾBOJNBUF "OE
    NPSFʜ
15. 47(
    Λ BOJNBUF
    ͰΞχϝʔγϣϯͯ͠ΈΔ IUUQTDPEFQFOJPLPOOZBLVQFO#B[&++Z
16. Ξχϝʔγϣϯͷ͘͠Έ <svg ...> <g> <path class="left" stroke-dasharray="2400 400" stroke-dashoffset="2800" d="..." stroke="..."> <animate attributeName="stroke-dashoffset" to="0" dur="10s" begin="6s" repeatCount="indefinite" /> </path> <path class="bottom" stroke-dasharray="2400 400" stroke-dashoffset="2800" d="..." stroke="..."> <animate attributeName="stroke-dashoffset" to="0" dur="10s" begin="4s" repeatCount="indefinite" /> </path>
17. Ξχϝʔγϣϯͷ͘͠Έ TUSPLFEBTIBSSBZɿഁઢͷִؒͷࢦఆ TUSPLFEBTIPGGTFUɿഁઢͷ։࢝Ґஔͷࢦఆ  QY 
    QY 
    QY 
    QY T ͔͚ͯ PGGTFUΛʹ ͋ͱ͸ CFHJOlTz ͷΑ͏ʹEFMBZΛ͔͚ͯ ͍͍ײ͡ʹ
18. ΋ͪΖΜϒϥ΢βදࣔ΋0, JNH TSDlIPHFTWHz
    ΍ *OMJOF
    47(
    ͰදࣔͰ͖Δʂ
19. 4QFDJBM
    UIBOLT
    UP
    !QBTT
20. 3FGFSFODFT ɾ IUUQTEFWFMPQFSNP[JMMBPSHFO64EPDT8FC47( ɾ IUUQTKBXJLJQFEJBPSHXJLJ4DBMBCMF@7FDUPS@(SBQIJDT ɾ IUUQXXXUPIPIPXFCDPNFYTWHIUNM ɾ IUUQTTUPDLFSKQEJBSZTWHCBTJD