Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up
for free
Scalable Vector Graphics - SVG와 함께하는 프런트엔드 개발
Coderifleman
January 15, 2021
How-to & DIY
2
630
Scalable Vector Graphics - SVG와 함께하는 프런트엔드 개발
Coderifleman
January 15, 2021
Tweet
Share
More Decks by Coderifleman
See All by Coderifleman
uyeong
3
230
uyeong
4
480
Other Decks in How-to & DIY
See All in How-to & DIY
sobarecord
1
450
a2k3ine
0
140
pintobuns
0
130
n0bisuke2
0
220
akkiesoft
0
570
event2020
0
340
bigtree
0
400
wyamazak
0
540
event2020
0
170
n0bisuke
1
340
anhthii
0
620
soracom
0
140
Featured
See All Featured
eitanlees
112
10k
imathis
479
150k
lara
15
2.7k
jrom
116
7.2k
brad_frost
157
6.4k
shlominoach
176
7.5k
bkeepers
52
4.2k
moore
125
21k
rasmusluckow
318
18k
jasonvnalue
81
8.1k
edds
56
9.4k
samlambert
237
10k
Transcript
Scalable Vector Graphics SVG৬ ೣԋೞח ۠ূ٘ ѐߊ
• SVGח “2ରਗ" ӝ߈ ߭ఠ ഋधਸ ਤೠ XML ӝ߈ ݃স
য. • যځೠ ӝب х হ ۪؊݂ ೡ ࣻ ח Ӓܿਸ “ӝࣿ”ೞӝ ਤ೧ Ҋউػ ఫझ ӝ߈ ѐߑഋ ਢ ળ SVGۆ ޖੋо? MDN - SVG: Scalable Vector Graphics https://developer.mozilla.org/en-US/docs/Web/SVG
SVG ળച അ
• 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
W3Cо Ӓ ݯߡ ࡺ݅ ইפۄ , ܲ ӝࣿ ױ ١
ৈ۞ ழޭפ౭ী Ѩ షܳ ߉ӝ ਤ೧ ҕѐೠ ޙࢲ Working Draft 3 https://www.w3.org/wiki/Process2020 https://www.w3.org/2020/Process-20200915
ਕఊ Ӓܛ ӝࣿ ਃҳ ࢎ೦ਸ ݅ೞѢա ਕఊ Ӓܛ ਬೞ
ঋҊ ҟߧਤೠ Ѩషܳ ߉ ӂ ࢎ೦ਸ पਵ۽ ࣻೞח ޙࢲ Candidate Recommendation 3 https://www.w3.org/wiki/Process2020 https://www.w3.org/2020/Process-20200915
W3C ӂ ࢎ೦ غӝী ࠙ೠ ಿ۽ थੋ ػ ޙࢲ. ӂҊউਵ۽
ѱदೞѢա ୶о সਸ ਤ೧ ਕఊ Ӓܛী ߈ജ ژח ತӝ ೡ Ѫਸ ӂҊ ೡ ࣻח ޙਤਗഥীࢲ ҕधਵ۽ Ѩష. Proposed Recommendation 3 https://www.w3.org/wiki/Process2020 https://www.w3.org/2020/Process-20200915
ҟߧਤೠ Ѩష৬ റ W3C ߂ Ӓ ഥਗٜ थੋਸ
߉ ࢎন ߂ ஜ W3Cח ਢ ળਵ۽ ӂ ࢎ೦ਸ ҟߧਤೞѱ ߓನ ೡ Ѫਸ ӂ 3 https://www.w3.org/wiki/Process2020 https://www.w3.org/2020/Process-20200915 W3C Recommendation
1999֙ ୡ W3Cীࢲ ࢎন ѐߊ द 1999֙ 2ਘ 11ੌ SVG
WD ҕѐ
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
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 ҕѐ
2010֙ 6ਘ 22ੌ SVG 1.1 SE WD ҕѐ 2011֙ 6ਘ
9ੌ SVG 1.1 SE PR ҕѐ 2011֙ 8ਘ 16ੌ SVG 1.1 SE REC ҕѐ
2012֙ 8ਘ 28ੌ SVG 2.0 FWD ҕѐ 2016֙ 9ਘ 15ੌ
SVG 2.0 CR ҕѐ അө ࢎন ଼
SVG 1.0 അ ঌҊח SVG ӝࠄ بഋ, paths, গפݫ࣌, DOM
ੋఠಕझ ١ Ѣ ݽٚ ӝמ ଼
SVG 1.1 ౠ߹ ߄Ո ղਊ হ. 1.0 ࢎনਸ ݽٕച ೠ
ߡ SVG 1.1 Mobile SVG Pro f i les: SVG Tiny(ݽ߄ੌ) and SVG Basic(PDA)
SVG 1.1 SE য়ఎ ࣻ, য় ୶о ࢸݺҳ ࣻ ߂
୶о ࢜۽ ӝמ ୶оח হ
SVG 2.0 1.1 ੌࠗ ӝמਸ ࠺ӂ ೞѢա HTML5 ߂
Web Open Font Format ӝמਸ ా • glyph, altGlyph э ӖԜ ਃࣗ ઁѢ • HTML5 data-*, tabindex ١ ࣘࢿ ୶о • SVG Paths, SVG Makers, SVG Strokes ١ झಖ ݽٕച
SVGо ਃೠо
Canvas • ݺ۸ഋਵ۽ Ӓې ਃࣗ ఐ࢝ ߂ ઑ • ݺ۸ഋਵ۽
झఋੌ ߂ ࢚࢝ ਊ • Frame or Timing ߮ ӝ߈ গפݫ࣌ • Ӓې ਃࣗ ఐ࢝ ߂ ઑਸ ਤ೧ ёച ߂ ҙܻ
SVG • 2ରਗ ߭ఠ Ӓېਸ ࢶਵ۽ ӝࣿ • CSSܳ ഝਊೠ
झఋੌ݂ оמ • SMILਸ ഝਊ೧ গפݫ࣌ ࢶਵ۽ ӝࣿ • ࣼೠ DOMਵ۽ Ӓې ਃࣗ ఐ࢝ ߂ ઑ Canvas • ݺ۸ഋਵ۽ Ӓې ਃ… • ݺ۸ഋਵ۽ झఋੌ ߂… • Frame or Timing … • Ӓې ਃࣗ ఐ࢝ ߂…
SVG • 2ରਗ ߭ఠ Ӓېਸ ࢶਵ۽ ӝࣿ • CSSܳ ഝਊೠ
झఋੌ݂ оמ • SMILਸ ഝਊ೧ গפݫ࣌ ࢶਵ۽ ӝࣿ • ࣼೠ DOMਵ۽ Ӓې ਃࣗ ఐ࢝ ߂ ઑ Canvas • ݺ۸ഋਵ۽ Ӓې ਃ… • ݺ۸ഋਵ۽ झఋੌ ߂… • Frame or Timing … • Ӓې ਃࣗ ఐ࢝ ߂…
SVG • 2ରਗ ߭ఠ Ӓېਸ ࢶਵ۽ ӝࣿ • CSSܳ ഝਊೠ
झఋੌ݂ оמ • SMILਸ ഝਊ೧ গפݫ࣌ ࢶਵ۽ ӝࣿ • ࣼೠ DOMਵ۽ Ӓې ਃࣗ ఐ࢝ ߂ ઑ Canvas • ݺ۸ഋਵ۽ Ӓې ਃ… • ݺ۸ഋਵ۽ झఋੌ ߂… • Frame or Timing … • Ӓې ਃࣗ ఐ࢝ ߂… ࠄਵ۽ 2ରਗ Ӓېӝ ٸޙী ೞ٘ਝয оࣘ ਊغ ঋ(࠳ۄ ҳഅী ٮۄ ܳ ࣻח ) z ઝо হਵ۽ translate3d, perspective ١ 3D ബҗ ਊ оמೞ ঋ (औѱ)
SVG • 2ରਗ ߭ఠ Ӓېਸ ࢶਵ۽ ӝࣿ • CSSܳ ഝਊೠ
झఋੌ݂ оמ • SMILਸ ഝਊ೧ গפݫ࣌ ࢶਵ۽ ӝࣿ • ࣼೠ DOMਵ۽ Ӓې ਃࣗ ఐ࢝ ߂ ઑ Canvas • ݺ۸ഋਵ۽ Ӓې ਃ… • ݺ۸ഋਵ۽ झఋੌ ߂… • Frame or Timing … • Ӓې ਃࣗ ఐ࢝ ߂… ࠄਵ۽ 2ରਗ Ӓېӝ ٸޙী ೞ٘ਝয оࣘ ਊغ ঋ(࠳ۄ ҳഅী ٮۄ ܳ ࣻח ) z ઝо হਵ۽ translate3d, perspective ١ 3D ബҗ ਊ оמೞ ঋ Ҋࢿמ ਃೞݶ Canvas 3D അ ਃೞݶ HTML & Canvas (औѱ)
ࢎ۹ࣗѐ
Insight of flex
ࡈܻ ٜ݅যঠ ೮Ҋ, উঠ ೮Ҋ, ؘఠо ࠂೞ ঋওҊ, ର ஸۢ
ױࣽ೮.
ࡈܻ ٜ݅যঠ ೮Ҋ, উঠ ೮Ҋ, ؘఠо ࠂೞ ঋওҊ, ର ஸۢ
ױࣽ೮. ޖࠁ
٣ց Ѿҗޛਸ زੌೞѱ ҳഅೞחؘ ݾܳ م (ೱറ ࠂೠ ର۽
ߊೡ оמࢿ ֫)
٣ց Ѿҗޛਸ زੌೞѱ ҳഅೞחؘ ݾܳ م (ೱറ ࠂೠ ର۽
ߊೡ оמࢿ ֫)
• பߡझ ӝ߈ ର ۄ࠳۞ܻ • ழझథ झఋੌ݂ য۰ SVG
• SVG ӝ߈ ର ۄ࠳۞ܻ • CSS৬ DOMਸ ਊ೧ ழझథ झఋੌ݂ оמ Canvas ೱറ ࠂೠ ର۽ ߊ -> ର ۄ࠳۞ܻ ਃ Ӓۢীب ৈ ٣ց Ѿҗޛਸ زੌೞѱ ҳഅೞҊ र (100%ח ইפۄب оמೠೠ)
Ѫ݅ ঌݶ नب SVG Ҋࣻ
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>
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 />) ޙ৬ ࣗޙ ҳ߹ ٸٸ۽ ܴ ҕр ਃ
viewBox 0, 0(ਗ) 85 60 500 300 द ߧਤ <sv
g xmlns="http://www.w3.org/2000/svg " viewBox="60 85 500 300 " > (ৈӝী SVG ղਊਸ ࢿ ) </svg > SVG ਗ ೦࢚ ઝஏ ࢚ױী ਤ
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
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 द ߧਤ ߄Ӵী ח Ѥ ࠁ ঋ
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 द ߧਤ ߄Ӵী ח Ѥ ࠁ ঋ
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 द ߧਤ ߄Ӵী ח Ѥ ࠁ ঋ
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 द ߧਤ ߄Ӵী ח Ѥ ࠁ ঋ
viewBox 0, 0(ਗ) SVG div HTML 300 500
viewBox transform: rotate(45deg) 0, 0(ਗ) SVG div HTML 300 500
transform: rotate(45deg) 0, 0(ਗ) SVG div HTML 300 500 viewBox
viewBox transform: rotate(45deg) transform-origin: 250px 150px SVG 0, 0(ਗ) 300
500 150 250
ਗ ݽٚ SVG ਃࣗ, ࣘࢿ ઝ ҅ Ӕਗ. SVGח HTML
ইפ
Basic Shapes line, rect, circle, ellipses, poly line, polygon
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
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
ࢶ ࢲध ࢶ ࢝: stroke stroke="red" stroke="#FF0000 " stroke="#F00" stroke="rgb(255,0,0)
" stroke="rgb(100%, 0%, 0%)" storke="rgba(100%, 0%, 0%, 0.5) "
ࢶ ࢲध ࢶ Ҹӝ: 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
ࢶ ࢲध ࢶ ഋక: 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
ࢶ ࢲध ࢶ ഋక: stroke-linecap 0, 0(ਗ) 500 300
butt round square
ࢶ ࢲध ࢶ : 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
ࢶ ࢲध ࢶ : 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 ࢶ࠙ ӡ рѺ ӡ
ࢶ ࢲध ࢶ द ਤ: 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
ࢶ ࢲध ࢶ द ਤ: 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
ࢶ ࢲध ࢶ द ਤ: 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
ࢶ ࢲध ࢶ द ਤ: 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
ࢶ ࢲध ࢶ ైݺب: 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
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
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: ࢎпഋ ֫
بഋ ࢲध ӝ ࢝: 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
بഋ ࢲध ӝ ࢝ ైݺب: 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
بഋ ࢲध وӔ ݽࢲܻ: 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୷ ߑೱ ߈ܴ
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
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: ߈ܴ
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
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୷ ߑೱ ߈ܴ
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 ীࢲ दਵ۽ যח ࢶ ࢤۚ
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: п ԙ ઝ ৌѢ ীࢲ दਵ۽ যח ࢶ ࢤۚ
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 ীࢲ दਵ۽ যח ࢶਸ Ӓܿ
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: п ԙ ઝ ৌѢ ীࢲ दਵ۽ যח ࢶਸ Ӓܿ
بഋ ࢲध ݽࢲܻ ഋక: 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
<?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 بഋ ࢲध
<?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 بഋ ࢲध
<?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 بഋ ࢲध
<?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 بഋ ࢲध
<?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 بഋ ࢲध
<line /> <polyline /> <circle /> <circle />
ب֊ ର ٜ݅যࠁӝ
ਵ۽
ܖ ঋ Ѫ • path, text, span, image, g, use,
a • Ӓۄؘ࣌җ ಁఢ • ݀ೝҗ ݃झ • SVG Filter Effects • SMIL(झ݃ੌ) • झఋੌद۽ झఋੌ݂ ೞח ߨ • ߄झ݀۽ بഋਸ ઑ, ߸ഋೞח ߨ
ೞ݅, ӝࠄ بഋ݅ ঌইب рױೠ ର بח ࠙ ٜ݅Ҋ ഝਊ
ࣻ
хࢎפ.