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

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

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

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
230
Cf84ea78e6d365cd813d571dd9e96772?s=48 uyeong
4
480

Other Decks in How-to & DIY

See All in How-to & DIY
828d8c35d49ece8a6eac9718fefdb563?s=48 sobarecord
1
450
7874d8fdfea58f7012ae1287da37013a?s=48 a2k3ine
0
140
1e772c3f6eee3813e4058e17fa7ca540?s=48 pintobuns
0
130
32fc21c821f829e470225311c7530832?s=48 n0bisuke2
0
220
74476e142a767a018d68c5e72e34ee2f?s=48 akkiesoft
0
570
696e66ab859446f91081e37e56444730?s=48 event2020
0
340
9260cf8a1a6dd81ac381c56547f589d5?s=48 bigtree
0
400
A4279da93d5e574c797061134aa42dbb?s=48 wyamazak
0
540
696e66ab859446f91081e37e56444730?s=48 event2020
0
170
Dae1d4cc4599a65a5da6e1a1f9d96f05?s=48 n0bisuke
1
340
9c5d7453fc8afbecfbc9e9ef882656be?s=48 anhthii
0
620
7cd783377515bdf8207062840b7b2f4e?s=48 soracom
0
140

Featured

See All Featured
170b760e0147792d0140e59ec78e9893?s=48 eitanlees
112
10k
C86443373fbfe92996aa882d0d7a59f8?s=48 imathis
479
150k
245cee81a9c424266e5e401d844ea881?s=48 lara
15
2.7k
Aebc2d07a50011e2a30d38435fde564a?s=48 jrom
116
7.2k
F68cb25ae3e5c2106997454b13b7737d?s=48 brad_frost
157
6.4k
168ccec72eee0530b818d44f3fedaacf?s=48 shlominoach
176
7.5k
20bfe76b3d6105641f879fe45cfc9272?s=48 bkeepers
52
4.2k
1b75d89772b7eea1f6c89fbf362607d9?s=48 moore
125
21k
462dad0dd24c568a32dcdb0ae895ae1b?s=48 rasmusluckow
318
18k
11c84dff30266b907714802088852677?s=48 jasonvnalue
81
8.1k
5ce91fa49a613cbc3e20d5f96856473f?s=48 edds
56
9.4k
Be9caeb9d4ef9944d151af909063ed6e?s=48 samlambert
237
10k

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