SVG нь векторт суурилсан графикийг XML форматаар тодорхойлдог.
What is SVG? #
- SVG нь Scalable Vector Graphics(багасгах болон томруулах боломжтой вектор график) гэсэн үг юм
- SVG нь Вэбийн графикийг тодорхойлоход хэрэглэгддэг
HTML <svg> элемент #
HTML <svg> элемент бол SVG графикт зориулсан сав юм.
SVG нь зам, хайрцаг, тойрог, текст, график зураг зурах хэд хэдэн аргатай.
Хөтөчийн дэмжлэг #
Хүснэгт дэх тоонууд нь <svg> элементийг бүрэн дэмждэг хөтөчийн анхны хувилбарыг зааж өгдөг.
| элемент | chrome | inernet explorer | mozila firefox | safari | opera |
|---|---|---|---|---|---|
| <svg> | 4.0 | 9.0 | 3.0 | 3.2 | 10.1 |
SVG Тойрог #
<!DOCTYPE html>
<html>
<body>
<svg width="100" height="100">
<circle cx="50" cy="50" r="40"
stroke="green" stroke-width="4" fill="yellow" />
Sorry, your browser does not support inline SVG.
</svg>
</body>
</html>
SVG Тэгш өнцөгт #
<svg width="400" height="180">
<rect x="50" y="20" rx="20" ry="20" width="150" height="150"
style="fill:red;stroke:black;stroke-width:5;opacity:0.5" />
</svg> SVG од #
<svg width="300" height="200">
<polygon points="100,10 40,198 190,78 10,78 160,198"
style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
</svg> SVG лого #
<svg height="130" width="500">
<defs>
<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
</linearGradient>
</defs>
<ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#grad1)" />
<text fill="#ffffff" font-size="45" font-family="Verdana" x="50" y="86">SVG</text>
Sorry, your browser does not support inline SVG.
</svg> SVG ба Canvas-ийн ялгаа #
SVG бол 2 хэмжээст графикийг XML дээр дүрслэх хэл юм.
Canvas нь 2D график зургийг шууд (JavaScript-тэй хамт) зурдаг.
SVG нь XML дээр суурилсан бөгөөд бүх SVG DOM доторх элементүүд боломжтой гэсэн үг юм.
SVG-д зурсан хэлбэр бүрийг объект болгон санадаг. Хэрэв SVG объектын шинж чанарууд өөрчлөгдсөн бол хөтөч нь дүрсийг автоматаар дахин гаргах боломжтой.
Canvas нь пикселээр пикселээр харагдана. Canvas дээр график зураг зурсны дараа хөтөч үүнийг мартдаг. Хэрэв түүний байрлалыг өөрчлөх шаардлагатай бол дүр зургийг бүхэлд нь дахин дүрслэх шаардлагатай болдог бөгөөд үүнд графикт хамрагдсан объектууд хүртэл орно.
