Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Scalable Vector Graphics - SVG와 함께하는 프런트엔드 개발

Scalable Vector Graphics - SVG와 함께하는 프런트엔드 개발

Cf84ea78e6d365cd813d571dd9e96772?s=128

Coderifleman

January 15, 2021
Tweet

Transcript

  1. Scalable Vector Graphics SVG৬ ೣԋೞח ೐۠౟ূ٘ ѐߊ

  2. • SVGח “2ରਗ" ӝ߈ ߭ఠ ഋधਸ ਤೠ
 XML ӝ߈੄ ݃௼স

    ঱য. • যځೠ ௼ӝب ੉૕х হ੉ ۪؊݂
 ೡ ࣻ ੓ח Ӓܿਸ “ӝࣿ”ೞӝ ਤ೧ 
 Ҋউػ ఫझ౟ ӝ߈੄ ѐߑഋ ਢ ಴ળ SVGۆ ޖ঺ੋо? MDN - SVG: Scalable Vector Graphics https://developer.mozilla.org/en-US/docs/Web/SVG
  3. SVG ಴ળച അ੤

  4. • Recommendation Track • Working Draft (WD)
 ୡউ • Candidate

    Recommendation (CR)
 റࠁӂҊউ • Proposed Recommendation (PR)
 ઁউӂҊউ • W3C Recommendation(REC) 
 ӂҊউ • Note Track W3C ಴ળച ઁ੿ 3 https://www.w3.org/wiki/Process2020 https://www.w3.org/2020/Process-20200915
  5. W3Cо Ӓ ݯߡ ࡺ݅ ইפۄ ؀઺, ׮ܲ ӝࣿ ױ୓ ١

    ৈ۞ ழޭפ౭ী Ѩ షܳ ߉ӝ ਤ೧ ҕѐೠ ޙࢲ Working Draft 3 https://www.w3.org/wiki/Process2020 https://www.w3.org/2020/Process-20200915
  6. ਕఊ Ӓܛ੄ ӝࣿ੸ ਃҳ ࢎ೦ਸ ݅઒ೞѢա 
 ਕఊ Ӓܛ੉ ਬ૑ೞ૑

    ঋҊ ҟߧਤೠ
 Ѩషܳ ߉਷ ӂ੢ ࢎ೦ਸ प૕੸ਵ۽ 
 ࣻ੿ೞח ޙࢲ Candidate 
 Recommendation 3 https://www.w3.org/wiki/Process2020 https://www.w3.org/2020/Process-20200915
  7. W3C ӂ੢ ࢎ೦੉ غӝী ୽࠙ೠ ಿ૕۽
 थੋ ػ ޙࢲ. ӂҊউਵ۽

    ѱदೞѢա ୶о ੘সਸ ਤ೧ ਕఊ Ӓܛী ߈ജ
 ژח ತӝ ೡ Ѫਸ ӂҊ ೡ ࣻ੓ח 
 ੗ޙਤਗഥীࢲ ҕधਵ۽ Ѩష. Proposed 
 Recommendation 3 https://www.w3.org/wiki/Process2020 https://www.w3.org/2020/Process-20200915
  8. ҟߧਤೠ Ѩష৬ ೤੄ ੉റ W3C ߂ 
 Ӓ ഥਗٜ੄ थੋਸ

    ߉਷ ࢎন ߂ ૑ஜ W3Cח ਢ ಴ળਵ۽ ӂ੢ ࢎ೦ਸ ҟߧਤೞѱ ߓನ ೡ Ѫਸ ӂ੢ 3 https://www.w3.org/wiki/Process2020 https://www.w3.org/2020/Process-20200915 W3C Recommendation
  9. 1999֙ ୡ W3Cীࢲ ࢎন ѐߊ द੘ 1999֙ 2ਘ 11ੌ SVG

    WD ҕѐ
  10. 1999֙ 7ਘ 30ੌ SVG 1.0 WD ҕѐ 2000֙ 8ਘ 2ੌ

    SVG 1.0 CR ҕѐ 2001֙ 9ਘ 4ੌ SVG 1.0 REC ҕѐ SVG 1.0 is A Superseded Recommendation
  11. 2001֙ 10ਘ 30ੌ SVG 1.1 FWD ҕѐ 2002֙ 4ਘ 30ੌ

    SVG 1.1 CR ҕѐ 2002֙ 11ਘ 15ੌ SVG 1.1 PR ҕѐ 2003֙ 1ਘ 14ੌ SVG 1.1 REC ҕѐ
  12. 2010֙ 6ਘ 22ੌ SVG 1.1 SE WD ҕѐ 2011֙ 6ਘ

    9ੌ SVG 1.1 SE PR ҕѐ 2011֙ 8ਘ 16ੌ SVG 1.1 SE REC ҕѐ
  13. 2012֙ 8ਘ 28ੌ SVG 2.0 FWD ҕѐ 2016֙ 9ਘ 15ੌ

    SVG 2.0 CR ҕѐ അ੤ө૑ ࢎন ଼੿ ઺
  14. SVG 1.0 അ੤ ঌҊ੓ח SVG੄ ӝࠄ بഋ, paths, গפݫ੉࣌, DOM

    ੋఠಕ੉झ ١ Ѣ੄ 
 ݽٚ ӝמ ଼੿
  15. SVG 1.1 ౠ߹൤ ߄Ո ղਊ਷ হ਺.
 1.0 ࢎনਸ ݽٕച ೠ

    ߡ੹ SVG 1.1 Mobile SVG Pro f i les: 
 SVG Tiny(ݽ߄ੌ) and 
 SVG Basic(PDA)
  16. SVG 1.1 SE য়ఎ੗ ࣻ੿, ੿য়಴ ୶о
 ࢸݺҳ ࣻ੿ ߂

    ୶о
 ࢜۽਍ ӝמ ୶оח হ਺
  17. SVG 2.0 1.1੄ ੌࠗ ӝמਸ ࠺ӂ੢ ೞѢա 
 HTML5 ߂

    Web Open Font Format 
 ӝמਸ ా೤ • glyph, altGlyph э਷ ӖԜ ਃࣗ ઁѢ • HTML5 data-*, tabindex ١੄ ࣘࢿ ୶о • SVG Paths, SVG Makers, SVG Strokes ١ झಖ ݽٕച
  18. SVGо ೙ਃೠо

  19. Canvas • ݺ۸ഋਵ۽ Ӓې೗ ਃࣗ ఐ࢝ ߂ ઑ੘ • ݺ۸ഋਵ۽

    झఋੌ ߂ ࢚࢝ ੸ਊ • Frame or Timing ੉߮౟ ӝ߈ গפݫ੉࣌ • Ӓې೗ ਃࣗ੄ ఐ࢝ ߂ ઑ੘ਸ ਤ೧ ё୓ച ߂ ҙܻ
  20. SVG • 2ରਗ ߭ఠ Ӓې೗ਸ ࢶ঱੸ਵ۽ ӝࣿ • CSSܳ ഝਊೠ

    झఋੌ݂ оמ • SMILਸ ഝਊ೧ গפݫ੉࣌ ࢶ঱੸ਵ۽ ӝࣿ • ੊ࣼೠ DOMਵ۽ Ӓې೗ ਃࣗ ఐ࢝ ߂ ઑ੘ Canvas • ݺ۸ഋਵ۽ Ӓې೗ ਃ… • ݺ۸ഋਵ۽ झఋੌ ߂… • Frame or Timing ੉… • Ӓې೗ ਃࣗ੄ ఐ࢝ ߂…
  21. SVG • 2ରਗ ߭ఠ Ӓې೗ਸ ࢶ঱੸ਵ۽ ӝࣿ • CSSܳ ഝਊೠ

    झఋੌ݂ оמ • SMILਸ ഝਊ೧ গפݫ੉࣌ ࢶ঱੸ਵ۽ ӝࣿ • ੊ࣼೠ DOMਵ۽ Ӓې೗ ਃࣗ ఐ࢝ ߂ ઑ੘ Canvas • ݺ۸ഋਵ۽ Ӓې೗ ਃ… • ݺ۸ഋਵ۽ झఋੌ ߂… • Frame or Timing ੉… • Ӓې೗ ਃࣗ੄ ఐ࢝ ߂…
  22. SVG • 2ରਗ ߭ఠ Ӓې೗ਸ ࢶ঱੸ਵ۽ ӝࣿ • CSSܳ ഝਊೠ

    झఋੌ݂ оמ • SMILਸ ഝਊ೧ গפݫ੉࣌ ࢶ঱੸ਵ۽ ӝࣿ • ੊ࣼೠ DOMਵ۽ Ӓې೗ ਃࣗ ఐ࢝ ߂ ઑ੘ Canvas • ݺ۸ഋਵ۽ Ӓې೗ ਃ… • ݺ۸ഋਵ۽ झఋੌ ߂… • Frame or Timing ੉… • Ӓې೗ ਃࣗ੄ ఐ࢝ ߂… ࠄ૕੸ਵ۽ 2ରਗ Ӓې೗੉ӝ ٸޙী ೞ٘ਝয оࣘ੉ ੸ਊغ૑ ঋ਺(࠳ۄ਋੷ ҳഅী ٮۄ ׮ܳ ࣻח ੓਺) z ઝ಴о হਵ޲۽ translate3d, perspective ١ 3D ബҗ ੸ ਊ੉ оמೞ૑ ঋ਺ (औѱ)
  23. SVG • 2ରਗ ߭ఠ Ӓې೗ਸ ࢶ঱੸ਵ۽ ӝࣿ • CSSܳ ഝਊೠ

    झఋੌ݂ оמ • SMILਸ ഝਊ೧ গפݫ੉࣌ ࢶ঱੸ਵ۽ ӝࣿ • ੊ࣼೠ DOMਵ۽ Ӓې೗ ਃࣗ ఐ࢝ ߂ ઑ੘ Canvas • ݺ۸ഋਵ۽ Ӓې೗ ਃ… • ݺ۸ഋਵ۽ झఋੌ ߂… • Frame or Timing ੉… • Ӓې೗ ਃࣗ੄ ఐ࢝ ߂… ࠄ૕੸ਵ۽ 2ରਗ Ӓې೗੉ӝ ٸޙী ೞ٘ਝয оࣘ੉ ੸ਊغ૑ ঋ਺(࠳ۄ਋੷ ҳഅী ٮۄ ׮ܳ ࣻח ੓਺) z ઝ಴о হਵ޲۽ translate3d, perspective ١ 3D ബҗ ੸ ਊ੉ оמೞ૑ ঋ਺ Ҋࢿמ੉ ೙ਃೞݶ Canvas 3D ಴അ੉ ೙ਃೞ׮ݶ HTML & Canvas (औѱ)
  24. ࢎ۹ࣗѐ

  25. Insight of flex

  26. ࡈܻ ٜ݅যঠ ೮Ҋ, উ੿੸੉ঠ ೮Ҋ, ؘ੉ఠо ࠂ੟ೞ૑ ঋওҊ, ର౟ ஸۢ੉

    ױࣽ೮׮.
  27. ࡈܻ ٜ݅যঠ ೮Ҋ, উ੿੸੉ঠ ೮Ҋ, ؘ੉ఠо ࠂ੟ೞ૑ ঋওҊ, ର౟ ஸۢ੉

    ױࣽ೮׮. ޖ঺ࠁ׮
  28. ٣੗੉ց੄ Ѿҗޛਸ زੌೞѱ 
 ҳഅೞחؘ ݾ಴ܳ م
 (ೱറ ࠂ੟ೠ ର౟۽

    ߊ੹ೡ оמࢿ ֫਺)
  29. ٣੗੉ց੄ Ѿҗޛਸ زੌೞѱ 
 ҳഅೞחؘ ݾ಴ܳ م
 (ೱറ ࠂ੟ೠ ର౟۽

    ߊ੹ೡ оמࢿ ֫਺)
  30. • பߡझ ӝ߈ ର౟ ۄ੉࠳۞ܻ • ழझథ झఋੌ݂੉ য۰਑ SVG

    • SVG ӝ߈ ର౟ ۄ੉࠳۞ܻ • CSS৬ DOMਸ ੉ਊ೧ 
 ழझథ झఋੌ݂ оמ Canvas ೱറ ࠂ੟ೠ ର౟۽ ߊ੹ -> ର౟ ۄ੉࠳۞ܻ ೙ਃ Ӓۢীب ৈ੹൤ ٣੗੉ց੄ Ѿҗޛਸ زੌೞѱ ҳഅೞҊ र׮ (100%ח ইפۄب оמೠೠ)
  31. ੉Ѫ݅ ঌݶ ׼नب SVG Ҋࣻ

  32. SVGSVGElement <?xml version="1.0" encoding="utf-8"? > <sv g xmlns="http://www.w3.org/2000/svg " viewBox="x

    y width height " width="(಩ ૑੿) " height="(֫੉ ૑੿) " > (ৈӝী SVG ղਊਸ ੘ࢿ ) </svg>
  33. SVGSVGElement <?xml version="1.0" encoding="utf-8"? > <sv g xmlns="http://www.w3.org/2000/svg " viewBox="x

    y width height " width="(಩ ૑੿) " height="(֫੉ ૑੿) " > (ৈӝী SVG ղਊਸ ੘ࢿ ) </svg> SVGח XML ӝ߈ ݃௼স ঱য SVG ੉ܴ ҕр SVG ಴द ߧਤ ײח కӒ۽ ݃ޖܻ(<circle />) ؀ޙ੗৬ ࣗޙ੗ ҳ߹ ٸٸ۽ ੉ܴ ҕр ೙ਃ
  34. viewBox 0, 0(ਗ੼) 85 60 500 300 ಴द ߧਤ <sv

    g xmlns="http://www.w3.org/2000/svg " viewBox="60 85 500 300 " > (ৈӝী SVG ղਊਸ ੘ࢿ ) </svg > SVG੄ ਗ੼਷ ೦࢚ ઝஏ ࢚ױী ਤ஖
  35. viewBox 0, 0(ਗ੼) ݅ড ߃ীࢲ ࢲࢲ൤ ৢۄয়ח Ӓې೐ܳ
 ٜ݅Ҋ र׮ݶ?

    <?xml version="1.0" encoding="utf-8"? > <sv g xmlns="http://www.w3.org/2000/svg " viewBox="0 0 500 300 " > <rect width="50" height="300" x="225" y=“?" fill="white"/ > </svg> 500 300
  36. viewBox ݅ড ߃ীࢲ ࢲࢲ൤ ৢۄয়ח Ӓې೐ܳ
 ٜ݅Ҋ र׮ݶ? 0, 0(ਗ੼)

    300 <?xml version="1.0" encoding="utf-8"? > <sv g xmlns="http://www.w3.org/2000/svg " viewBox="0 0 500 300 " > <rect width="50" height="300" x="225" y=“300” fill="white"/ > </svg> 300 500 225 ಴द ߧਤ ߄Ӵী ੓ח Ѥ ࠁ੉૑ ঋ਺
  37. viewBox ݅ড ߃ীࢲ ࢲࢲ൤ ৢۄয়ח Ӓې೐ܳ
 ٜ݅Ҋ र׮ݶ? 0, 0(ਗ੼)

    300 <?xml version="1.0" encoding="utf-8"? > <sv g xmlns="http://www.w3.org/2000/svg " viewBox="0 0 500 300 " > <rect width="50" height="300" x="225" y=“200” fill="white"/ > </svg> 200 500 225 ಴द ߧਤ ߄Ӵী ੓ח Ѥ ࠁ੉૑ ঋ਺
  38. viewBox ݅ড ߃ীࢲ ࢲࢲ൤ ৢۄয়ח Ӓې೐ܳ
 ٜ݅Ҋ र׮ݶ? 0, 0(ਗ੼)

    300 <?xml version="1.0" encoding="utf-8"? > <sv g xmlns="http://www.w3.org/2000/svg " viewBox="0 0 500 300 " > <rect width="50" height="300" x="225" y=“100” fill="white"/ > </svg> 100 500 225 ಴द ߧਤ ߄Ӵী ੓ח Ѥ ࠁ੉૑ ঋ਺
  39. viewBox ݅ড ߃ীࢲ ࢲࢲ൤ ৢۄয়ח Ӓې೐ܳ
 ٜ݅Ҋ र׮ݶ? 0, 0(ਗ੼)

    300 <?xml version="1.0" encoding="utf-8"? > <sv g xmlns="http://www.w3.org/2000/svg " viewBox="0 0 500 300 " > <rect width="50" height="300" x="225" y=“0” fill="white"/ > </svg> 500 ಴द ߧਤ ߄Ӵী ੓ח Ѥ ࠁ੉૑ ঋ਺
  40. viewBox 0, 0(ਗ੼) SVG div HTML 300 500

  41. viewBox transform: rotate(45deg) 0, 0(ਗ੼) SVG div HTML 300 500

  42. transform: rotate(45deg) 0, 0(ਗ੼) SVG div HTML 300 500 viewBox

  43. viewBox transform: rotate(45deg)
 transform-origin: 250px 150px SVG 0, 0(ਗ੼) 300

    500 150 250
  44. ਗ੼਷ ݽٚ SVG ਃࣗ, ࣘࢿ ઝ಴ ҅࢑੄ Ӕਗ. SVGח HTML੉

    ইפ׮
  45. Basic Shapes line, rect, circle, ellipses, poly line, polygon

  46. line ૒ࢶਸ Ӓܻ੗ <?xml version="1.0" encoding="utf-8"? > <sv g xmlns="http://www.w3.org/2000/svg

    " viewBox="0 0 300 200 " > <line x1="80" y1="50" x2="450" y2="250" stroke="white" / > </svg> 0, 0(ਗ੼) 500 300
  47. line <?xml version="1.0" encoding="utf-8"? > <sv g xmlns="http://www.w3.org/2000/svg " viewBox="0

    0 300 200 " > <line x1="80" y1="50" x2="450" y2="250" stroke="white" / > </svg> ૒ࢶਸ Ӓܻ੗ x1, y1ח द੘੼੄ ઝ಴ܳ աఋն(moveto) x2, y2ח ՘੼੄ ઝ಴ܳ աఋն(lineto) ઝ಴ ૑੿ ױਤ۽ em, ex, px, in, cm, mm, pt, pc ١ ഝਊ 0, 0(ਗ੼) 500 300 50 80 250 450
  48. ࢶ੄ ࢲध ࢶ੄ ࢝: stroke stroke="red" stroke="#FF0000 " stroke="#F00" stroke="rgb(255,0,0)

    " stroke="rgb(100%, 0%, 0%)" storke="rgba(100%, 0%, 0%, 0.5) "
  49. ࢶ੄ ࢲध ࢶ੄ Ҹӝ: stroke-width <?xml version="1.0" encoding="utf-8"? > <sv

    g xmlns="http://www.w3.org/2000/svg " viewBox="0 0 300 200 " > <line x1="50" y1="70" x2="450" y2="70" stroke="white" stroke-width="4" / > <line x1="50" y1="150" x2="450" y2="150" stroke="white" stroke-width="10" / > <line x1="50" y1="230" x2="450" y2="230" stroke="white" stroke-width="0.5cm" / > </svg> 0, 0(ਗ੼) 500 300
  50. ࢶ੄ ࢲध ࢶ੄ ՘ ഋక: stroke-linecap <?xml version="1.0" encoding="utf-8"? >

    <sv g xmlns="http://www.w3.org/2000/svg " viewBox="0 0 300 200 " > <line x1="50" y1="70" x2="450" y2="70 " stroke="white" stroke-width="25" stroke-linecap="butt" / > <line x1="50" y1="150" x2="450" y2="150 " stroke="white" stroke-width="25" stroke-linecap="round" / > <line x1="50" y1="230" x2="450" y2="230 " stroke="white" stroke-width="25" stroke-linecap="square" / > </svg> 0, 0(ਗ੼) 500 300
  51. ࢶ੄ ࢲध ࢶ੄ ՘ ഋక: stroke-linecap 0, 0(ਗ੼) 500 300

    butt round square
  52. ࢶ੄ ࢲध ੼ࢶ ૑੿: stroke-dasharray <?xml version="1.0" encoding="utf-8"? > <sv

    g xmlns="http://www.w3.org/2000/svg " viewBox="0 0 300 200 " > <line x1="50" y1="70" x2="450" y2="70 " stroke="white" stroke-width="5" stroke-dasharray="10,4" / > <line x1="50" y1="150" x2="450" y2="150 " stroke="white" stroke-width="5" stroke-dasharray="20,7" / > <line x1="50" y1="230" x2="450" y2="230 " stroke="white" stroke-width="5" stroke-dasharray="40,7,10,7" / > </svg> 0, 0(ਗ੼) 500 300
  53. ࢶ੄ ࢲध ੼ࢶ ૑੿: stroke-dasharray <?xml version="1.0" encoding="utf-8"? > <sv

    g xmlns="http://www.w3.org/2000/svg " viewBox="0 0 300 200 " > <line x1="50" y1="70" x2="450" y2="70 " stroke="white" stroke-width="5" stroke-dasharray="10,4" / > <line x1="50" y1="150" x2="450" y2="150 " stroke="white" stroke-width="5" stroke-dasharray="20,7" / > <line x1="50" y1="230" x2="450" y2="230 " stroke="white" stroke-width="5" stroke-dasharray="40,7,10,7" / > </svg> 0, 0(ਗ੼) 500 300 ࢶ࠙੄ ӡ੉ рѺ੄ ӡ੉
  54. ࢶ੄ ࢲध ੼ࢶ੄ द੘ ਤ஖: stroke-dashoffset <?xml version="1.0" encoding="utf-8"? >

    <sv g xmlns="http://www.w3.org/2000/svg " viewBox="0 0 300 200 " > <line x1="50" y1="70" x2="450" y2="70" 
 stroke="white" stroke-width="5 " stroke-dasharray="80,10" / > <line x1="50" y1="150" x2="450" y2="150" 
 stroke="white" stroke-width="5 " stroke-dasharray="80,10" stroke-dashoffset="30" / > <line x1="50" y1="230" x2="450" y2="230" 
 stroke="white" stroke-width="5 " stroke-dasharray="80,10" stroke-dashoffset="60" / > </svg> 0, 0(ਗ੼) 500 300
  55. ࢶ੄ ࢲध ੼ࢶ੄ द੘ ਤ஖: stroke-dashoffset <?xml version="1.0" encoding="utf-8"? >

    <sv g xmlns="http://www.w3.org/2000/svg " viewBox="0 0 300 200 " > <line x1="200" y1="150" x2="450" y2="150" 
 stroke="white" stroke-width="8 " stroke-dasharray="80,10" stroke-dashoffset="0" / > </svg> 0, 0(ਗ੼) 500 300
  56. ࢶ੄ ࢲध ੼ࢶ੄ द੘ ਤ஖: stroke-dashooffset <?xml version="1.0" encoding="utf-8"? >

    <sv g xmlns="http://www.w3.org/2000/svg " viewBox="0 0 300 200 " > <line x1="200" y1="150" x2="450" y2="150" 
 stroke="white" stroke-width="8 " stroke-dasharray="80,10" stroke-dashoffset=“30" / > </svg> 0, 0(ਗ੼) 500 300 30
  57. ࢶ੄ ࢲध ੼ࢶ੄ द੘ ਤ஖: stroke-dashooffset <?xml version="1.0" encoding="utf-8"? >

    <sv g xmlns="http://www.w3.org/2000/svg " viewBox="0 0 300 200 " > <line x1="200" y1="150" x2="450" y2="150" 
 stroke="white" stroke-width="8 " stroke-dasharray="80,10" stroke-dashoffset=“60" / > </svg> 0, 0(ਗ੼) 500 300 60
  58. ࢶ੄ ࢲध ࢶ੄ ైݺب: stroke-opacity <?xml version="1.0" encoding="utf-8"? > <sv

    g xmlns="http://www.w3.org/2000/svg " viewBox="0 0 300 200 " > <line x1="50" y1="70" x2="450" y2="70" 
 stroke="white" stroke-width="20 " stroke-opacity="1.0" / > <line x1="50" y1="150" x2="450" y2="150" stroke="white" stroke-width="8 " stroke-opacity="0.6" / > <line x1="50" y1="230" x2="450" y2="230" stroke="white" stroke-width="8 " stroke-opacity="0.3" / > </svg> 0, 0(ਗ੼) 500 300
  59. rect ࢎпഋਸ Ӓܻ੗ <?xml version="1.0" encoding="utf-8"? > <sv g xmlns="http://www.w3.org/2000/svg

    " viewBox="0 0 300 200 " > <rect x="30" y="50" width="350" height="150 " fill="#FF9933" stroke="white" stroke-width="5" 
 stroke-dasharray="20,7" / > <rect x="300" y="120" width="150" height="150" fill="#0033CC" / > </svg> 0, 0(ਗ੼) 500 300
  60. rect ࢎпഋਸ Ӓܻ੗ <?xml version="1.0" encoding="utf-8"? > <sv g xmlns="http://www.w3.org/2000/svg

    " viewBox="0 0 300 200 " > <rect x="30" y="50" width="350" height="150 " fill="#FF9933" stroke="white" stroke-width="5" 
 stroke-dasharray="20,7" / > <rect x="300" y="120" width="150" height="150" fill="#0033CC" / > </svg> 0, 0(ਗ੼) 500 300 x, y: ৽ଃ ࢚ױ੄ ઝ಴ width: ࢎпഋ੄ ց࠺ height: ࢎпഋ੄ ֫੉
  61. بഋ੄ ࢲध ଻਋ӝ ࢝: fill <?xml version="1.0" encoding="utf-8"? > <sv

    g xmlns="http://www.w3.org/2000/svg " viewBox="0 0 300 200 " > <rect x="30" y="50" width="350" height="150 " fill="#FF9933" stroke="white" stroke-width="5" 
 stroke-dasharray="20,7" / > <rect x="300" y="120" width="150" height="150" fill="#0033CC" / > </svg> 0, 0(ਗ੼) 500 300
  62. بഋ੄ ࢲध ଻਋ӝ ࢝ ైݺب: fill-opacity <?xml version="1.0" encoding="utf-8"? >

    <sv g xmlns="http://www.w3.org/2000/svg " viewBox="0 0 300 200 " > <rect x="30" y="50" width="350" height="150 " fill="#FF9933" stroke="black" 
 stroke-width="5" stroke-dasharray="20,7" / > <rect x="300" y="120" width="150" height="150 " fill="#0033CC" fill-opacity="0.5" / > </svg> 0, 0(ਗ੼) 500 300
  63. بഋ੄ ࢲध وӔ ݽࢲܻ: rx, ry <?xml version="1.0" encoding="utf-8"? >

    <sv g xmlns="http://www.w3.org/2000/svg " viewBox="0 0 300 200 " > <rect x="30" y="50" width="350" height="150" fill="#FF9933" rx="30" ry="30" stroke="white" stroke-width="5" / > </svg> 0, 0(ਗ੼) 500 300 rx: x୷ ߑೱ੄ ߈૑ܴ ry: y୷ ߑೱ੄ ߈૑ܴ
  64. circle ਗਸ Ӓܻ੗ <?xml version="1.0" encoding="utf-8"? > <sv g xmlns="http://www.w3.org/2000/svg

    " viewBox="0 0 300 200 " > <circle cx="150" cy="180" r="100" fill="blue" / > <circle cx="300" cy="80" r="40" fill="yellow" / > </svg> 0, 0(ਗ੼) 500 300
  65. circle ਗਸ Ӓܻ੗ <?xml version="1.0" encoding="utf-8"? > <sv g xmlns="http://www.w3.org/2000/svg

    " viewBox="0 0 300 200 " > <circle cx="150" cy="180" r="100" fill="blue" / > <circle cx="300" cy="80" r="40" fill="yellow" / > </svg> 0, 0(ਗ੼) 500 300 cx, cy: ਗ੄ ઺ब ઝ಴ r: ߈૑ܴ
  66. ellipse ఋਗਸ Ӓܻ੗ <?xml version="1.0" encoding="utf-8"? > <sv g xmlns="http://www.w3.org/2000/svg

    " viewBox="0 0 300 200 " > <ellipse cx="110" cy="150" rx="80" ry="120" fill="#6699CC" stroke="#333399" stroke-width="10" / > <ellipse cx="350" cy="150" rx="120" ry="80" fill="#FFFF00" stroke="white" stroke-width="7" stroke-linecap="round" stroke-dasharray="0.01, 12" / > </svg> 0, 0(ਗ੼) 500 300
  67. ellipse ఋਗਸ Ӓܻ੗ <?xml version="1.0" encoding="utf-8"? > <sv g xmlns="http://www.w3.org/2000/svg

    " viewBox="0 0 300 200 " > <ellipse cx="110" cy="150" rx="80" ry="120" fill="#6699CC" stroke="#333399" stroke-width="10" / > <ellipse cx="350" cy="150" rx="120" ry="80" fill="#FFFF00" stroke="white" stroke-width="7" stroke-linecap="round" stroke-dasharray="0.01, 12" / > </svg> 0, 0(ਗ੼) 500 300 cx, cy: ਗ੄ ઺ब ઝ಴ rx: x୷ ߑೱ੄ ߈૑ܴ ry: y୷ ߑೱ੄ ߈૑ܴ
  68. polyline ԃ਷ࢶਸ Ӓܻ੗ <?xml version="1.0" encoding="utf-8"? > <sv g xmlns="http://www.w3.org/2000/svg

    " viewBox="0 0 300 200 " > <polyline points="20,250 120,80 220,250 " fill="none" stroke="white" stroke-width="5" / > <polyline points="300,50 450,140 350,140 450,250 300,250 " fill="none" stroke="blue" stroke-width="5" / > </svg> 0, 0(ਗ੼) 500 300 ՘੼ীࢲ द੘੼ਵ۽ ੉য૑ח ࢶ਷ ࢤۚ
  69. polyline ԃ਷ࢶਸ Ӓܻ੗ <?xml version="1.0" encoding="utf-8"? > <sv g xmlns="http://www.w3.org/2000/svg

    " viewBox="0 0 300 200 " > <polyline points="20,250 120,80 220,250 " fill="none" stroke="white" stroke-width="5" / > <polyline points="300,50 450,140 350,140 450,250 300,250 " fill="none" stroke="blue" stroke-width="5" / > </svg> 0, 0(ਗ੼) 500 300 points: п ԙ૑੼ ઝ಴ ৌѢ ՘੼ীࢲ द੘੼ਵ۽ ੉য૑ח ࢶ਷ ࢤۚ
  70. polygon ׮пഋਸ Ӓܻ੗ <?xml version="1.0" encoding="utf-8"? > <sv g xmlns="http://www.w3.org/2000/svg

    " viewBox="0 0 300 200 " > <polygon points="20,250 120,80 220,250 " fill="blue" stroke="white " stroke-width="5" / > <polygon points="300,50 450,140 350,14 0 450,250 300,250 " fill="green" stroke="blue " stroke-width="5" / > </svg> 0, 0(ਗ੼) 500 300 ՘੼ীࢲ द੘੼ਵ۽ ੉য૑ח ࢶਸ Ӓܿ
  71. polygon ׮пഋਸ Ӓܻ੗ <?xml version="1.0" encoding="utf-8"? > <sv g xmlns="http://www.w3.org/2000/svg

    " viewBox="0 0 300 200 " > <polygon points="20,250 120,80 220,250 " fill="blue" stroke="white " stroke-width="5" / > <polygon points="300,50 450,140 350,14 0 450,250 300,250 " fill="green" stroke="blue " stroke-width="5" / > </svg> 0, 0(ਗ੼) 500 300 points: п ԙ૑੼ ઝ಴ ৌѢ ՘੼ীࢲ द੘੼ਵ۽ ੉য૑ח ࢶਸ Ӓܿ
  72. بഋ੄ ࢲध ݽࢲܻ ഋక: stroke-linejoin <?xml version="1.0" encoding="utf-8"? > <sv

    g xmlns="http://www.w3.org/2000/svg " viewBox="0 0 300 200 " > <polyline points="40,50 140,250 40,250 " fill="none" stroke="white" stroke-width="30 " stroke-linejoin="miter" / > <polyline points="200,50 300,250 200,250 " fill="none" stroke="white" stroke-width="30 " stroke-linejoin="round" / > <polyline points="360,50 460,250 360,250 " fill="none" stroke="white" stroke-width="30 " stroke-linejoin="bevel" / > </svg> 0, 0(ਗ੼) 500 300
  73. <?xml version="1.0" encoding="utf-8"? > <sv g xmlns="http://www.w3.org/2000/svg " viewBox="0 0

    300 200 " > <polyline points="40,50 140,250 40,250 " fill="none" stroke="white" stroke-width="30 " stroke-linejoin="miter" / > <polyline points="200,50 300,250 200,250 " fill="none" stroke="white" stroke-width="30 " stroke-linejoin="round" / > <polyline points="360,50 460,250 360,250 " fill="none" stroke="white" stroke-width="30 " stroke-linejoin="bevel" / > </svg> 0, 0(ਗ੼) 500 300 ݽࢲܻ ഋక: stroke-linejoin بഋ੄ ࢲध
  74. <?xml version="1.0" encoding="utf-8"? > <sv g xmlns="http://www.w3.org/2000/svg " viewBox="0 0

    300 200 " > <polyline points="40,50 140,250 40,250 " fill="none" stroke="white" stroke-width="30 " stroke-linejoin="miter" / > <polyline points="200,150 300,250 200,250 " fill="none" stroke="white" stroke-width="30 " stroke-linejoin="miter" / > <polyline points="360,200 460,250 360,250 " fill="none" stroke="white" stroke-width="30 " stroke-linejoin="miter" / > </svg> 0, 0(ਗ੼) 500 300 ݽࢲܻ ഋక: stroke-linejoin بഋ੄ ࢲध
  75. <?xml version="1.0" encoding="utf-8"? > <sv g xmlns="http://www.w3.org/2000/svg " viewBox="0 0

    300 200 " > <polyline points="40,50 140,250 40,250 " fill="none" stroke="white" stroke-width="30 " stroke-linejoin="miter" / > <polyline points="200,150 300,250 200,250 " fill="none" stroke="white" stroke-width="30 " stroke-linejoin="miter" / > <polyline points="360,200 460,250 360,250 " fill="none" stroke="white" stroke-width="30 " stroke-linejoin="miter " stroke-miterlimit="5" / > </svg> 0, 0(ਗ੼) 500 300 ݽࢲܻ ഋక: stroke-linejoin بഋ੄ ࢲध
  76. <?xml version="1.0" encoding="utf-8"? > <sv g xmlns="http://www.w3.org/2000/svg " viewBox="0 0

    300 200 " > <polygon points="50,50 450,50 450,25 0 150,250, 150,100 300,10 0 300,200 50,200 " fill="#FF9966" stroke="white " fill-rule="nonzero" stroke-width="10" / > </svg> 0, 0(ਗ੼) 500 300 ࢝ ଻਋ח ߑߨ: fill-rule بഋ੄ ࢲध
  77. <?xml version="1.0" encoding="utf-8"? > <sv g xmlns="http://www.w3.org/2000/svg " viewBox="0 0

    300 200 " > <polygon points="50,50 450,50 450,25 0 150,250, 150,100 300,10 0 300,200 50,200 " fill="#FF9966" stroke="white " fill-rule=“evenodd" stroke-width="10" / > </svg> 0, 0(ਗ੼) 500 300 ࢝ ଻਋ח ߑߨ: fill-rule بഋ੄ ࢲध
  78. <line /> <polyline /> <circle /> <circle />

  79. ب֊ ର౟ ٜ݅যࠁӝ

  80. ՘ਵ۽

  81. ׮ܖ૑ ঋ਷ Ѫ • path, text, span, image, g, use,

    a • Ӓۄؘ੉࣌җ ಁఢ • ௿݀ೝҗ ݃झ௼ • SVG Filter Effects • SMIL(झ݃ੌ) • झఋੌद౟۽ झఋੌ݂ ೞח ߨ • ੗߄झ௼݀౟۽ بഋਸ ઑ੘, ߸ഋೞח ߨ
  82. ೞ૑݅, ӝࠄ بഋ݅ ঌইب рױೠ ର౟ ੿بח ୽࠙൤ ٜ݅Ҋ ഝਊ

    ࣻ ੓׮
  83. хࢎ೤פ׮.