Save 37% off PRO during our Black Friday Sale! »

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

Cf84ea78e6d365cd813d571dd9e96772?s=47 Coderifleman
January 15, 2021
How-to & DIY
2
760

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

Cf84ea78e6d365cd813d571dd9e96772?s=128

Coderifleman

January 15, 2021
Tweet

More Decks by Coderifleman

See All by Coderifleman
Cf84ea78e6d365cd813d571dd9e96772?s=48 uyeong
3
240
Cf84ea78e6d365cd813d571dd9e96772?s=48 uyeong
4
600

Other Decks in How-to & DIY

See All in How-to & DIY
88f90f23360dccfffe5d4645b6d2da3d?s=48 keicafeblack
0
150
4615930de72ec08f99d3227761ace0d8?s=48 yenlung
0
520
Bb9247b2dcabfdd441d3d886186f71eb?s=48 listonic
1
320
07bc1191973a57cf5aca106db7a5ffa2?s=48 uzuky
0
390
74476e142a767a018d68c5e72e34ee2f?s=48 akkiesoft
0
200
B6287729a60016f4626b52e0dc4d2107?s=48 qx5k_iskw
0
120
E6c980b93d086e757643971b318a40a9?s=48 maepu
0
130
Fc104451852faeb0a42499180f53a1ff?s=48 tkimura12
0
100
32fc21c821f829e470225311c7530832?s=48 n0bisuke2
0
220
7c79a6c043825af5c538fb996430607c?s=48 peacemaker07
2
250
1b0af2793f33bc86768fe97a9443c176?s=48 stwn
0
130
32fc21c821f829e470225311c7530832?s=48 n0bisuke2
0
360

Featured

See All Featured
C86443373fbfe92996aa882d0d7a59f8?s=48 imathis
484
150k
88bc30284c6a424b63a92aad27d0ba36?s=48 jnunemaker
PRO
44
5k
B3d6434763caa0ef5dc4b792662c49f7?s=48 smashingmag
289
47k
0438ae60cde4c7add6f9da48f28c15cc?s=48 chrisshort
6
28k
Fde6c3a50ca518a909ef35c22c0ee0e4?s=48 destraynor
148
20k
7cbd3f5f922d798cc312eaf596de7ae6?s=48 iamctodd
33
3k
7653c7c449918ff6542880a8c284f5e7?s=48 jponch
106
5.4k
027d1ebf66cc039a0bd3b55eeadbe75d?s=48 sachag
449
36k
F716e5f737fcfb03f2cf8d1a184f1dbe?s=48 nonsquared
84
3.7k
0bce06bd06ee7a2c4f5500f25dcf7f18?s=48 paulrobertlloyd
74
1.7k
Ef32e0b1ac5082450dc8c1fca3a26b5c?s=48 cherdarchuk
78
280k
Aff5641764408271f7bc398f2097edd0?s=48 denniskardys
223
120k

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. хࢎ೤פ׮.