5分でわかるSVG/svg_in_5_minutes

4d3749b12f12c3087d8d961a6ad4319d?s=47 konnyaku256
November 21, 2020

 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/

4d3749b12f12c3087d8d961a6ad4319d?s=128

konnyaku256

November 21, 2020
Tweet

Transcript

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

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

  3. 47(ͱ͸ 4DBMBCMF7FDUPS(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. #SPXTFSTVQQPSU IUUQTDBOJVTFDPNTWH

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

    47(5JOZ
  7. 3BTUFSWT7FDUPS 3BTUFS #JUNBQ 1/( +1&( (*' #.1 8FC1 7FDUPS 47(

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

  9. ਎ۙͳ47(

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

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

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

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

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

  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΍ *OMJOF47(ͰදࣔͰ͖Δʂ

  19. 4QFDJBMUIBOLTUP!QBTT

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