{"id":159,"date":"2025-08-18T02:08:17","date_gmt":"2025-08-18T02:08:17","guid":{"rendered":"https:\/\/iotnoob.com\/wordpress\/?p=159"},"modified":"2025-08-18T05:53:53","modified_gmt":"2025-08-18T05:53:53","slug":"%e0%b8%81%e0%b8%b2%e0%b8%a3%e0%b8%aa%e0%b8%a3%e0%b9%89%e0%b8%b2%e0%b8%87%e0%b8%a0%e0%b8%b2%e0%b8%9e-svg","status":"publish","type":"post","link":"https:\/\/iotnoob.com\/wordpress\/2025\/08\/18\/%e0%b8%81%e0%b8%b2%e0%b8%a3%e0%b8%aa%e0%b8%a3%e0%b9%89%e0%b8%b2%e0%b8%87%e0%b8%a0%e0%b8%b2%e0%b8%9e-svg\/","title":{"rendered":"\u0e01\u0e32\u0e23\u0e2a\u0e23\u0e49\u0e32\u0e07\u0e20\u0e32\u0e1e SVG"},"content":{"rendered":"\n<h4 class=\"wp-block-heading\">\u0e01\u0e32\u0e23\u0e43\u0e0a\u0e49\u0e07\u0e32\u0e19\u0e40\u0e1a\u0e37\u0e49\u0e2d\u0e07\u0e15\u0e49\u0e19<\/h4>\n\n\n\n<p>\u0e2a\u0e48\u0e27\u0e19\u0e1b\u0e23\u0e30\u0e01\u0e2d\u0e1a\u0e15\u0e48\u0e32\u0e07\u0e46 \u0e43\u0e19 SVG \u0e08\u0e30\u0e16\u0e39\u0e01\u0e01\u0e33\u0e2b\u0e19\u0e14\u0e14\u0e49\u0e27\u0e22\u0e41\u0e17\u0e47\u0e01 XML \u0e17\u0e35\u0e48\u0e41\u0e15\u0e01\u0e15\u0e48\u0e32\u0e07\u0e01\u0e31\u0e19\u0e44\u0e1b \u0e42\u0e14\u0e22\u0e2a\u0e48\u0e27\u0e19\u0e17\u0e35\u0e48\u0e2a\u0e33\u0e04\u0e31\u0e0d\u0e41\u0e25\u0e30\u0e43\u0e0a\u0e49\u0e07\u0e32\u0e19\u0e01\u0e31\u0e19\u0e40\u0e1b\u0e47\u0e19\u0e1b\u0e23\u0e30\u0e08\u0e33\u0e21\u0e35\u0e14\u0e31\u0e07\u0e19\u0e35\u0e49:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong><code>&lt;svg&gt;<\/code> (The Canvas \ud83c\udfa8):<\/strong> \u0e41\u0e17\u0e47\u0e01\u0e23\u0e32\u0e01 (root element) \u0e17\u0e35\u0e48\u0e40\u0e1b\u0e47\u0e19\u0e08\u0e38\u0e14\u0e40\u0e23\u0e34\u0e48\u0e21\u0e15\u0e49\u0e19\u0e41\u0e25\u0e30\u0e08\u0e38\u0e14\u0e2a\u0e34\u0e49\u0e19\u0e2a\u0e38\u0e14\u0e02\u0e2d\u0e07\u0e44\u0e1f\u0e25\u0e4c SVG \u0e17\u0e33\u0e2b\u0e19\u0e49\u0e32\u0e17\u0e35\u0e48\u0e01\u0e33\u0e2b\u0e19\u0e14\u0e02\u0e2d\u0e1a\u0e40\u0e02\u0e15\u0e41\u0e25\u0e30\u0e04\u0e38\u0e13\u0e2a\u0e21\u0e1a\u0e31\u0e15\u0e34\u0e15\u0e48\u0e32\u0e07\u0e46 \u0e02\u0e2d\u0e07\u0e1e\u0e37\u0e49\u0e19\u0e17\u0e35\u0e48\u0e27\u0e32\u0e14\u0e20\u0e32\u0e1e \u0e40\u0e0a\u0e48\u0e19 <code>width<\/code> (\u0e04\u0e27\u0e32\u0e21\u0e01\u0e27\u0e49\u0e32\u0e07), <code>height<\/code> (\u0e04\u0e27\u0e32\u0e21\u0e2a\u0e39\u0e07), \u0e41\u0e25\u0e30 <code>viewBox<\/code> (\u0e01\u0e23\u0e2d\u0e1a\u0e01\u0e32\u0e23\u0e21\u0e2d\u0e07\u0e40\u0e2b\u0e47\u0e19)\n<ul class=\"wp-block-list\">\n<li><strong>\u0e15\u0e31\u0e27\u0e2d\u0e22\u0e48\u0e32\u0e07:<\/strong> <code>&lt;svg width=\"100\" height=\"100\"&gt;<\/code> \u0e04\u0e37\u0e2d\u0e01\u0e32\u0e23\u0e2a\u0e23\u0e49\u0e32\u0e07\u0e1e\u0e37\u0e49\u0e19\u0e17\u0e35\u0e48\u0e27\u0e32\u0e14\u0e20\u0e32\u0e1e\u0e02\u0e19\u0e32\u0e14 100&#215;100 \u0e1e\u0e34\u0e01\u0e40\u0e0b\u0e25<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong><code>&lt;g&gt;<\/code> (The Group \ud83d\udcc2):<\/strong> \u0e22\u0e48\u0e2d\u0e21\u0e32\u0e08\u0e32\u0e01 &#8220;group&#8221; \u0e43\u0e0a\u0e49\u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a\u0e08\u0e31\u0e14\u0e01\u0e25\u0e38\u0e48\u0e21\u0e2d\u0e07\u0e04\u0e4c\u0e1b\u0e23\u0e30\u0e01\u0e2d\u0e1a\u0e2b\u0e25\u0e32\u0e22\u0e46 \u0e0a\u0e34\u0e49\u0e19\u0e40\u0e02\u0e49\u0e32\u0e44\u0e27\u0e49\u0e14\u0e49\u0e27\u0e22\u0e01\u0e31\u0e19 \u0e17\u0e33\u0e43\u0e2b\u0e49\u0e2a\u0e32\u0e21\u0e32\u0e23\u0e16\u0e01\u0e33\u0e2b\u0e19\u0e14\u0e04\u0e38\u0e13\u0e2a\u0e21\u0e1a\u0e31\u0e15\u0e34 (\u0e40\u0e0a\u0e48\u0e19 \u0e2a\u0e35, \u0e02\u0e19\u0e32\u0e14\u0e40\u0e2a\u0e49\u0e19) \u0e2b\u0e23\u0e37\u0e2d\u0e43\u0e0a\u0e49\u0e04\u0e33\u0e2a\u0e31\u0e48\u0e07\u0e41\u0e1b\u0e25\u0e07\u0e23\u0e39\u0e1b (\u0e40\u0e0a\u0e48\u0e19 \u0e22\u0e48\u0e2d\u0e02\u0e22\u0e32\u0e22, \u0e2b\u0e21\u0e38\u0e19) \u0e01\u0e31\u0e1a\u0e17\u0e38\u0e01\u0e2d\u0e07\u0e04\u0e4c\u0e1b\u0e23\u0e30\u0e01\u0e2d\u0e1a\u0e43\u0e19\u0e01\u0e25\u0e38\u0e48\u0e21\u0e44\u0e14\u0e49\u0e1e\u0e23\u0e49\u0e2d\u0e21\u0e01\u0e31\u0e19\u0e43\u0e19\u0e04\u0e23\u0e31\u0e49\u0e07\u0e40\u0e14\u0e35\u0e22\u0e27\n<ul class=\"wp-block-list\">\n<li><strong>\u0e15\u0e31\u0e27\u0e2d\u0e22\u0e48\u0e32\u0e07:<\/strong> <code>&lt;g fill=\"red\"&gt; ... &lt;\/g&gt;<\/code> \u0e08\u0e30\u0e17\u0e33\u0e43\u0e2b\u0e49\u0e17\u0e38\u0e01\u0e2d\u0e22\u0e48\u0e32\u0e07\u0e17\u0e35\u0e48\u0e2d\u0e22\u0e39\u0e48\u0e43\u0e19\u0e01\u0e25\u0e38\u0e48\u0e21\u0e19\u0e35\u0e49\u0e21\u0e35\u0e2a\u0e35\u0e41\u0e14\u0e07<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>\u0e23\u0e39\u0e1b\u0e17\u0e23\u0e07\u0e1e\u0e37\u0e49\u0e19\u0e10\u0e32\u0e19 (Basic Shapes):<\/strong> \u0e40\u0e1b\u0e47\u0e19\u0e41\u0e17\u0e47\u0e01\u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a\u0e2a\u0e23\u0e49\u0e32\u0e07\u0e23\u0e39\u0e1b\u0e17\u0e23\u0e07\u0e40\u0e23\u0e02\u0e32\u0e04\u0e13\u0e34\u0e15\u0e17\u0e35\u0e48\u0e44\u0e21\u0e48\u0e0b\u0e31\u0e1a\u0e0b\u0e49\u0e2d\u0e19 \u0e0b\u0e36\u0e48\u0e07\u0e43\u0e0a\u0e49\u0e07\u0e32\u0e19\u0e07\u0e48\u0e32\u0e22\u0e41\u0e25\u0e30\u0e2a\u0e30\u0e14\u0e27\u0e01\u0e21\u0e32\u0e01\n<ul class=\"wp-block-list\">\n<li><strong><code>&lt;rect&gt;<\/code>:<\/strong> \u0e2a\u0e23\u0e49\u0e32\u0e07\u0e23\u0e39\u0e1b <strong>\u0e2a\u0e35\u0e48\u0e40\u0e2b\u0e25\u0e35\u0e48\u0e22\u0e21<\/strong> \u0e42\u0e14\u0e22\u0e01\u0e33\u0e2b\u0e19\u0e14\u0e15\u0e33\u0e41\u0e2b\u0e19\u0e48\u0e07 (<code>x<\/code>, <code>y<\/code>), \u0e04\u0e27\u0e32\u0e21\u0e01\u0e27\u0e49\u0e32\u0e07 (<code>width<\/code>), \u0e41\u0e25\u0e30\u0e04\u0e27\u0e32\u0e21\u0e2a\u0e39\u0e07 (<code>height<\/code>)<\/li>\n\n\n\n<li><strong><code>&lt;circle&gt;<\/code>:<\/strong> \u0e2a\u0e23\u0e49\u0e32\u0e07\u0e23\u0e39\u0e1b <strong>\u0e27\u0e07\u0e01\u0e25\u0e21<\/strong> \u0e42\u0e14\u0e22\u0e01\u0e33\u0e2b\u0e19\u0e14\u0e08\u0e38\u0e14\u0e28\u0e39\u0e19\u0e22\u0e4c\u0e01\u0e25\u0e32\u0e07 (<code>cx<\/code>, <code>cy<\/code>) \u0e41\u0e25\u0e30\u0e23\u0e31\u0e28\u0e21\u0e35 (<code>r<\/code>)<\/li>\n\n\n\n<li><strong><code>&lt;ellipse&gt;<\/code>:<\/strong> \u0e2a\u0e23\u0e49\u0e32\u0e07\u0e23\u0e39\u0e1b <strong>\u0e27\u0e07\u0e23\u0e35<\/strong> \u0e04\u0e25\u0e49\u0e32\u0e22\u0e27\u0e07\u0e01\u0e25\u0e21 \u0e41\u0e15\u0e48\u0e01\u0e33\u0e2b\u0e19\u0e14\u0e23\u0e31\u0e28\u0e21\u0e35\u0e41\u0e19\u0e27\u0e19\u0e2d\u0e19 (<code>rx<\/code>) \u0e41\u0e25\u0e30\u0e41\u0e19\u0e27\u0e15\u0e31\u0e49\u0e07 (<code>ry<\/code>) \u0e41\u0e22\u0e01\u0e01\u0e31\u0e19<\/li>\n\n\n\n<li><strong><code>&lt;line&gt;<\/code>:<\/strong> \u0e2a\u0e23\u0e49\u0e32\u0e07 <strong>\u0e40\u0e2a\u0e49\u0e19\u0e15\u0e23\u0e07<\/strong> \u0e42\u0e14\u0e22\u0e01\u0e33\u0e2b\u0e19\u0e14\u0e08\u0e38\u0e14\u0e40\u0e23\u0e34\u0e48\u0e21\u0e15\u0e49\u0e19 (<code>x1<\/code>, <code>y1<\/code>) \u0e41\u0e25\u0e30\u0e08\u0e38\u0e14\u0e2a\u0e34\u0e49\u0e19\u0e2a\u0e38\u0e14 (<code>x2<\/code>, <code>y2<\/code>)<\/li>\n\n\n\n<li><strong><code>&lt;polyline&gt;<\/code>:<\/strong> \u0e2a\u0e23\u0e49\u0e32\u0e07 <strong>\u0e40\u0e2a\u0e49\u0e19\u0e2b\u0e31\u0e01\u0e21\u0e38\u0e21<\/strong> \u0e17\u0e35\u0e48\u0e21\u0e35\u0e2b\u0e25\u0e32\u0e22\u0e2a\u0e48\u0e27\u0e19\u0e15\u0e48\u0e2d\u0e01\u0e31\u0e19 \u0e42\u0e14\u0e22\u0e01\u0e33\u0e2b\u0e19\u0e14\u0e0a\u0e38\u0e14\u0e02\u0e2d\u0e07\u0e08\u0e38\u0e14\u0e1e\u0e34\u0e01\u0e31\u0e14 (<code>points<\/code>)<\/li>\n\n\n\n<li><strong><code>&lt;polygon&gt;<\/code>:<\/strong> \u0e2a\u0e23\u0e49\u0e32\u0e07 <strong>\u0e23\u0e39\u0e1b\u0e2b\u0e25\u0e32\u0e22\u0e40\u0e2b\u0e25\u0e35\u0e48\u0e22\u0e21\u0e1b\u0e34\u0e14<\/strong> \u0e42\u0e14\u0e22\u0e01\u0e33\u0e2b\u0e19\u0e14\u0e0a\u0e38\u0e14\u0e02\u0e2d\u0e07\u0e08\u0e38\u0e14\u0e1e\u0e34\u0e01\u0e31\u0e14 (<code>points<\/code>) \u0e04\u0e25\u0e49\u0e32\u0e22 <code>&lt;polyline&gt;<\/code> \u0e41\u0e15\u0e48\u0e40\u0e2a\u0e49\u0e19\u0e08\u0e30\u0e16\u0e39\u0e01\u0e1b\u0e34\u0e14\u0e42\u0e14\u0e22\u0e2d\u0e31\u0e15\u0e42\u0e19\u0e21\u0e31\u0e15\u0e34<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong><code>&lt;path&gt;<\/code> (The Pen Tool \u2712\ufe0f):<\/strong> \u0e40\u0e1b\u0e47\u0e19\u0e2d\u0e07\u0e04\u0e4c\u0e1b\u0e23\u0e30\u0e01\u0e2d\u0e1a\u0e17\u0e35\u0e48\u0e17\u0e23\u0e07\u0e1e\u0e25\u0e31\u0e07\u0e41\u0e25\u0e30\u0e43\u0e0a\u0e49\u0e07\u0e32\u0e19\u0e1a\u0e48\u0e2d\u0e22\u0e17\u0e35\u0e48\u0e2a\u0e38\u0e14 \u0e2a\u0e32\u0e21\u0e32\u0e23\u0e16\u0e2a\u0e23\u0e49\u0e32\u0e07\u0e23\u0e39\u0e1b\u0e17\u0e23\u0e07\u0e44\u0e14\u0e49\u0e17\u0e38\u0e01\u0e23\u0e39\u0e1b\u0e41\u0e1a\u0e1a \u0e15\u0e31\u0e49\u0e07\u0e41\u0e15\u0e48\u0e40\u0e2a\u0e49\u0e19\u0e15\u0e23\u0e07\u0e18\u0e23\u0e23\u0e21\u0e14\u0e32\u0e44\u0e1b\u0e08\u0e19\u0e16\u0e36\u0e07\u0e40\u0e2a\u0e49\u0e19\u0e42\u0e04\u0e49\u0e07\u0e17\u0e35\u0e48\u0e0b\u0e31\u0e1a\u0e0b\u0e49\u0e2d\u0e19 \u0e42\u0e14\u0e22\u0e43\u0e0a\u0e49\u0e0a\u0e38\u0e14\u0e04\u0e33\u0e2a\u0e31\u0e48\u0e07\u0e17\u0e35\u0e48\u0e40\u0e23\u0e35\u0e22\u0e01\u0e27\u0e48\u0e32 &#8220;d&#8221; attribute (data) \u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e01\u0e33\u0e2b\u0e19\u0e14\u0e40\u0e2a\u0e49\u0e19\u0e17\u0e32\u0e07\u0e02\u0e2d\u0e07\u0e01\u0e32\u0e23\u0e27\u0e32\u0e14 \u0e40\u0e1b\u0e23\u0e35\u0e22\u0e1a\u0e40\u0e2a\u0e21\u0e37\u0e2d\u0e19\u0e01\u0e32\u0e23\u0e43\u0e0a\u0e49\u0e40\u0e04\u0e23\u0e37\u0e48\u0e2d\u0e07\u0e21\u0e37\u0e2d Pen Tool \u0e43\u0e19\u0e42\u0e1b\u0e23\u0e41\u0e01\u0e23\u0e21\u0e2d\u0e2d\u0e01\u0e41\u0e1a\u0e1a\u0e01\u0e23\u0e32\u0e1f\u0e34\u0e01\n<ul class=\"wp-block-list\">\n<li><strong>\u0e15\u0e31\u0e27\u0e2d\u0e22\u0e48\u0e32\u0e07:<\/strong><code>&lt;path d=\"M10 10 H 90 V 90 H 10 Z\" \/&gt;<\/code> \u0e04\u0e37\u0e2d\u0e04\u0e33\u0e2a\u0e31\u0e48\u0e07\u0e43\u0e2b\u0e49\u0e27\u0e32\u0e14\u0e40\u0e2a\u0e49\u0e19\u0e2a\u0e35\u0e48\u0e40\u0e2b\u0e25\u0e35\u0e48\u0e22\u0e21 \u0e42\u0e14\u0e22:\n<ul class=\"wp-block-list\">\n<li><code>M10 10<\/code>: <strong>M<\/strong>ove to (\u0e22\u0e49\u0e32\u0e22\u0e44\u0e1b\u0e17\u0e35\u0e48\u0e08\u0e38\u0e14) x=10, y=10<\/li>\n\n\n\n<li><code>H 90<\/code>: Draw a <strong>H<\/strong>orizontal line to (\u0e25\u0e32\u0e01\u0e40\u0e2a\u0e49\u0e19\u0e41\u0e19\u0e27\u0e19\u0e2d\u0e19\u0e44\u0e1b\u0e17\u0e35\u0e48) x=90<\/li>\n\n\n\n<li><code>V 90<\/code>: Draw a <strong>V<\/strong>ertical line to (\u0e25\u0e32\u0e01\u0e40\u0e2a\u0e49\u0e19\u0e41\u0e19\u0e27\u0e15\u0e31\u0e49\u0e07\u0e44\u0e1b\u0e17\u0e35\u0e48) y=90<\/li>\n\n\n\n<li><code>H 10<\/code>: Draw a <strong>H<\/strong>orizontal line to (\u0e25\u0e32\u0e01\u0e40\u0e2a\u0e49\u0e19\u0e41\u0e19\u0e27\u0e19\u0e2d\u0e19\u0e44\u0e1b\u0e17\u0e35\u0e48) x=10<\/li>\n\n\n\n<li><code>Z<\/code>: Close path (\u0e1b\u0e34\u0e14\u0e40\u0e2a\u0e49\u0e19\u0e17\u0e32\u0e07 \u0e01\u0e25\u0e31\u0e1a\u0e44\u0e1b\u0e17\u0e35\u0e48\u0e08\u0e38\u0e14\u0e40\u0e23\u0e34\u0e48\u0e21\u0e15\u0e49\u0e19)<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong><code>&lt;text&gt;<\/code> (The Type Tool \u270d\ufe0f):<\/strong> \u0e43\u0e0a\u0e49\u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a\u0e43\u0e2a\u0e48\u0e02\u0e49\u0e2d\u0e04\u0e27\u0e32\u0e21\u0e25\u0e07\u0e43\u0e19\u0e20\u0e32\u0e1e \u0e42\u0e14\u0e22\u0e01\u0e33\u0e2b\u0e19\u0e14\u0e15\u0e33\u0e41\u0e2b\u0e19\u0e48\u0e07 (<code>x<\/code>, <code>y<\/code>) \u0e41\u0e25\u0e30\u0e43\u0e2a\u0e48\u0e02\u0e49\u0e2d\u0e04\u0e27\u0e32\u0e21\u0e17\u0e35\u0e48\u0e15\u0e49\u0e2d\u0e07\u0e01\u0e32\u0e23\u0e23\u0e30\u0e2b\u0e27\u0e48\u0e32\u0e07\u0e41\u0e17\u0e47\u0e01\u0e40\u0e1b\u0e34\u0e14\u0e41\u0e25\u0e30\u0e1b\u0e34\u0e14\n<ul class=\"wp-block-list\">\n<li><strong>\u0e15\u0e31\u0e27\u0e2d\u0e22\u0e48\u0e32\u0e07:<\/strong> <code>&lt;text x=\"50\" y=\"50\"&gt;Hello SVG&lt;\/text&gt;<\/code><\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>\u0e04\u0e38\u0e13\u0e25\u0e31\u0e01\u0e29\u0e13\u0e30 (Attributes):<\/strong> \u0e40\u0e1b\u0e47\u0e19\u0e2a\u0e48\u0e27\u0e19\u0e17\u0e35\u0e48\u0e43\u0e0a\u0e49\u0e2d\u0e18\u0e34\u0e1a\u0e32\u0e22\u0e23\u0e32\u0e22\u0e25\u0e30\u0e40\u0e2d\u0e35\u0e22\u0e14\u0e41\u0e25\u0e30\u0e15\u0e01\u0e41\u0e15\u0e48\u0e07\u0e2d\u0e07\u0e04\u0e4c\u0e1b\u0e23\u0e30\u0e01\u0e2d\u0e1a\u0e15\u0e48\u0e32\u0e07\u0e46 \u0e40\u0e0a\u0e48\u0e19 <code>fill<\/code> (\u0e2a\u0e35\u0e40\u0e15\u0e34\u0e21), <code>stroke<\/code> (\u0e2a\u0e35\u0e40\u0e2a\u0e49\u0e19), <code>stroke-width<\/code> (\u0e04\u0e27\u0e32\u0e21\u0e2b\u0e19\u0e32\u0e40\u0e2a\u0e49\u0e19), \u0e41\u0e25\u0e30 <code>transform<\/code> (\u0e01\u0e32\u0e23\u0e41\u0e1b\u0e25\u0e07\u0e23\u0e39\u0e1b\u0e17\u0e23\u0e07 \u0e40\u0e0a\u0e48\u0e19 <code>rotate<\/code>, <code>scale<\/code>)<\/li>\n<\/ul>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;svg width=\"200\" height=\"200\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n  &lt;g>\n    &lt;circle cx=\"100\" cy=\"100\" r=\"90\" fill=\"skyblue\" \/>\n    &lt;polygon points=\"100,10 40,198 190,78 10,78 160,198\"\n             fill=\"yellow\" stroke=\"orange\" stroke-width=\"5\" \/>\n  &lt;\/g>\n&lt;\/svg><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">\u0e01\u0e32\u0e23\u0e2a\u0e23\u0e49\u0e32\u0e07\u0e41\u0e25\u0e30\u0e43\u0e0a\u0e49 symbol<\/h4>\n\n\n\n<p>\u0e01\u0e32\u0e23\u0e2a\u0e23\u0e49\u0e32\u0e07\u0e41\u0e25\u0e30\u0e43\u0e0a\u0e49\u0e07\u0e32\u0e19 Symbol \u0e43\u0e19 SVG \u0e1b\u0e23\u0e30\u0e01\u0e2d\u0e1a\u0e14\u0e49\u0e27\u0e22 3 \u0e2a\u0e48\u0e27\u0e19\u0e2a\u0e33\u0e04\u0e31\u0e0d\u0e04\u0e37\u0e2d:<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">1. <code>&lt;defs&gt;<\/code> (Definitions)<\/h4>\n\n\n\n<p>\u0e40\u0e1b\u0e23\u0e35\u0e22\u0e1a\u0e40\u0e2a\u0e21\u0e37\u0e2d\u0e19 <strong>&#8220;\u0e42\u0e1f\u0e25\u0e40\u0e14\u0e2d\u0e23\u0e4c\u0e40\u0e01\u0e47\u0e1a\u0e02\u0e2d\u0e07&#8221;<\/strong> \ud83d\udce6. \u0e17\u0e38\u0e01\u0e2d\u0e22\u0e48\u0e32\u0e07\u0e17\u0e35\u0e48\u0e16\u0e39\u0e01\u0e1b\u0e23\u0e30\u0e01\u0e32\u0e28\u0e44\u0e27\u0e49\u0e20\u0e32\u0e22\u0e43\u0e19\u0e41\u0e17\u0e47\u0e01 <code>&lt;defs&gt;<\/code> <strong>\u0e08\u0e30\u0e44\u0e21\u0e48\u0e16\u0e39\u0e01\u0e41\u0e2a\u0e14\u0e07\u0e1c\u0e25\u0e2b\u0e23\u0e37\u0e2d\u0e27\u0e32\u0e14\u0e25\u0e07\u0e1a\u0e19\u0e2b\u0e19\u0e49\u0e32\u0e08\u0e2d\u0e42\u0e14\u0e22\u0e15\u0e23\u0e07<\/strong> \u0e21\u0e31\u0e19\u0e40\u0e1b\u0e47\u0e19\u0e40\u0e1e\u0e35\u0e22\u0e07\u0e1e\u0e37\u0e49\u0e19\u0e17\u0e35\u0e48\u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a &#8220;\u0e19\u0e34\u0e22\u0e32\u0e21&#8221; \u0e2b\u0e23\u0e37\u0e2d &#8220;\u0e01\u0e33\u0e2b\u0e19\u0e14&#8221; \u0e2d\u0e07\u0e04\u0e4c\u0e1b\u0e23\u0e30\u0e01\u0e2d\u0e1a\u0e15\u0e48\u0e32\u0e07\u0e46 \u0e17\u0e35\u0e48\u0e40\u0e23\u0e32\u0e15\u0e49\u0e2d\u0e07\u0e01\u0e32\u0e23\u0e08\u0e30\u0e19\u0e33\u0e44\u0e1b\u0e43\u0e0a\u0e49\u0e43\u0e19\u0e20\u0e32\u0e22\u0e2b\u0e25\u0e31\u0e07<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">2. <code>&lt;symbol&gt;<\/code><\/h4>\n\n\n\n<p>\u0e40\u0e1b\u0e23\u0e35\u0e22\u0e1a\u0e40\u0e2a\u0e21\u0e37\u0e2d\u0e19 <strong>&#8220;\u0e41\u0e21\u0e48\u0e1e\u0e34\u0e21\u0e1e\u0e4c&#8221;<\/strong> \u0e2b\u0e23\u0e37\u0e2d <strong>&#8220;\u0e15\u0e49\u0e19\u0e41\u0e1a\u0e1a&#8221;<\/strong> \u2699\ufe0f \u0e17\u0e35\u0e48\u0e40\u0e23\u0e32\u0e2a\u0e23\u0e49\u0e32\u0e07\u0e40\u0e01\u0e47\u0e1a\u0e44\u0e27\u0e49\u0e43\u0e19\u0e42\u0e1f\u0e25\u0e40\u0e14\u0e2d\u0e23\u0e4c <code>&lt;defs&gt;<\/code> \u0e40\u0e23\u0e32\u0e2a\u0e32\u0e21\u0e32\u0e23\u0e16\u0e2d\u0e2d\u0e01\u0e41\u0e1a\u0e1a\u0e23\u0e39\u0e1b\u0e17\u0e23\u0e07\u0e2d\u0e30\u0e44\u0e23\u0e01\u0e47\u0e44\u0e14\u0e49\u0e17\u0e35\u0e48\u0e0b\u0e31\u0e1a\u0e0b\u0e49\u0e2d\u0e19\u0e44\u0e27\u0e49\u0e20\u0e32\u0e22\u0e43\u0e19 <code>&lt;symbol&gt;<\/code> \u0e19\u0e35\u0e49 \u0e40\u0e0a\u0e48\u0e19 \u0e44\u0e2d\u0e04\u0e2d\u0e19, \u0e42\u0e25\u0e42\u0e01\u0e49, \u0e2b\u0e23\u0e37\u0e2d\u0e23\u0e39\u0e1b\u0e17\u0e23\u0e07\u0e43\u0e14\u0e46 \u0e17\u0e35\u0e48\u0e08\u0e30\u0e16\u0e39\u0e01\u0e43\u0e0a\u0e49\u0e0b\u0e49\u0e33\u0e46<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>\u0e08\u0e38\u0e14\u0e40\u0e14\u0e48\u0e19\u0e02\u0e2d\u0e07 <code>&lt;symbol&gt;<\/code>:<\/strong>\n<ul class=\"wp-block-list\">\n<li>\u0e21\u0e31\u0e19\u0e21\u0e35 <strong><code>viewBox<\/code><\/strong> \u0e40\u0e1b\u0e47\u0e19\u0e02\u0e2d\u0e07\u0e15\u0e31\u0e27\u0e40\u0e2d\u0e07 \u0e17\u0e33\u0e43\u0e2b\u0e49\u0e2a\u0e32\u0e21\u0e32\u0e23\u0e16\u0e01\u0e33\u0e2b\u0e19\u0e14\u0e01\u0e23\u0e2d\u0e1a\u0e41\u0e25\u0e30\u0e2a\u0e31\u0e14\u0e2a\u0e48\u0e27\u0e19\u0e02\u0e2d\u0e07 Symbol \u0e44\u0e14\u0e49\u0e2d\u0e22\u0e48\u0e32\u0e07\u0e2d\u0e34\u0e2a\u0e23\u0e30 \u0e44\u0e21\u0e48\u0e02\u0e36\u0e49\u0e19\u0e01\u0e31\u0e1a\u0e02\u0e19\u0e32\u0e14\u0e02\u0e2d\u0e07 <code>&lt;svg&gt;<\/code> \u0e2b\u0e25\u0e31\u0e01<\/li>\n\n\n\n<li>\u0e40\u0e23\u0e32\u0e2a\u0e32\u0e21\u0e32\u0e23\u0e16\u0e01\u0e33\u0e2b\u0e19\u0e14 <code>id<\/code> \u0e17\u0e35\u0e48\u0e44\u0e21\u0e48\u0e0b\u0e49\u0e33\u0e01\u0e31\u0e19\u0e43\u0e2b\u0e49\u0e01\u0e31\u0e1a\u0e41\u0e15\u0e48\u0e25\u0e30 <code>&lt;symbol&gt;<\/code> \u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e43\u0e0a\u0e49\u0e40\u0e1b\u0e47\u0e19\u0e0a\u0e37\u0e48\u0e2d\u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a\u0e2d\u0e49\u0e32\u0e07\u0e2d\u0e34\u0e07<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\">3. <code>&lt;use&gt;<\/code><\/h4>\n\n\n\n<p>\u0e40\u0e1b\u0e23\u0e35\u0e22\u0e1a\u0e40\u0e2a\u0e21\u0e37\u0e2d\u0e19\u0e01\u0e32\u0e23 <strong>&#8220;\u0e1b\u0e31\u0e4a\u0e21\u0e2a\u0e33\u0e40\u0e19\u0e32&#8221;<\/strong> \u0e2b\u0e23\u0e37\u0e2d <strong>&#8220;\u0e40\u0e23\u0e35\u0e22\u0e01\u0e43\u0e0a\u0e49\u0e41\u0e21\u0e48\u0e1e\u0e34\u0e21\u0e1e\u0e4c&#8221;<\/strong> \ud83d\udcdd. \u0e40\u0e21\u0e37\u0e48\u0e2d\u0e40\u0e23\u0e32\u0e15\u0e49\u0e2d\u0e07\u0e01\u0e32\u0e23\u0e43\u0e2b\u0e49 Symbol \u0e17\u0e35\u0e48\u0e2a\u0e23\u0e49\u0e32\u0e07\u0e44\u0e27\u0e49\u0e1b\u0e23\u0e32\u0e01\u0e0f\u0e1a\u0e19\u0e2b\u0e19\u0e49\u0e32\u0e08\u0e2d \u0e40\u0e23\u0e32\u0e08\u0e30\u0e43\u0e0a\u0e49\u0e41\u0e17\u0e47\u0e01 <code>&lt;use&gt;<\/code> \u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e2d\u0e49\u0e32\u0e07\u0e2d\u0e34\u0e07\u0e16\u0e36\u0e07 <code>id<\/code> \u0e02\u0e2d\u0e07 Symbol \u0e19\u0e31\u0e49\u0e19\u0e46<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>\u0e08\u0e38\u0e14\u0e40\u0e14\u0e48\u0e19\u0e02\u0e2d\u0e07 <code>&lt;use&gt;<\/code>:<\/strong>\n<ul class=\"wp-block-list\">\n<li>\u0e40\u0e23\u0e32\u0e2a\u0e32\u0e21\u0e32\u0e23\u0e16\u0e01\u0e33\u0e2b\u0e19\u0e14\u0e15\u0e33\u0e41\u0e2b\u0e19\u0e48\u0e07\u0e17\u0e35\u0e48\u0e08\u0e30\u0e27\u0e32\u0e07\u0e2a\u0e33\u0e40\u0e19\u0e32 (<code>x<\/code>, <code>y<\/code>), \u0e02\u0e19\u0e32\u0e14 (<code>width<\/code>, <code>height<\/code>), \u0e41\u0e25\u0e30\u0e2a\u0e44\u0e15\u0e25\u0e4c (<code>fill<\/code>, <code>stroke<\/code>) \u0e02\u0e2d\u0e07\u0e41\u0e15\u0e48\u0e25\u0e30\u0e2a\u0e33\u0e40\u0e19\u0e32\u0e44\u0e14\u0e49\u0e2d\u0e22\u0e48\u0e32\u0e07\u0e2d\u0e34\u0e2a\u0e23\u0e30 \u0e42\u0e14\u0e22\u0e44\u0e21\u0e48\u0e01\u0e23\u0e30\u0e17\u0e1a\u0e01\u0e31\u0e1a\u0e15\u0e49\u0e19\u0e41\u0e1a\u0e1a<\/li>\n\n\n\n<li>\u0e01\u0e32\u0e23\u0e40\u0e23\u0e35\u0e22\u0e01\u0e43\u0e0a\u0e49\u0e0b\u0e49\u0e33\u0e46 \u0e08\u0e30\u0e40\u0e1b\u0e47\u0e19\u0e01\u0e32\u0e23\u0e2d\u0e49\u0e32\u0e07\u0e2d\u0e34\u0e07\u0e16\u0e36\u0e07\u0e15\u0e49\u0e19\u0e41\u0e1a\u0e1a\u0e40\u0e14\u0e34\u0e21 \u0e44\u0e21\u0e48\u0e43\u0e0a\u0e48\u0e01\u0e32\u0e23\u0e04\u0e31\u0e14\u0e25\u0e2d\u0e01\u0e42\u0e04\u0e49\u0e14\u0e17\u0e31\u0e49\u0e07\u0e2b\u0e21\u0e14\u0e21\u0e32\u0e43\u0e2b\u0e21\u0e48 \u0e17\u0e33\u0e43\u0e2b\u0e49\u0e02\u0e19\u0e32\u0e14\u0e44\u0e1f\u0e25\u0e4c SVG \u0e40\u0e25\u0e47\u0e01\u0e25\u0e07\u0e2d\u0e22\u0e48\u0e32\u0e07\u0e21\u0e32\u0e01<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;svg width=\"300\" height=\"120\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n  &lt;defs>\n    &lt;symbol id=\"my-star\" viewBox=\"0 0 51 48\">\n      &lt;path d=\"m25,1 6,17h18l-14,11 5,17-15-10-15,10 5-17-14-11h18z\"\/>\n    &lt;\/symbol>\n  &lt;\/defs>\n  &lt;use href=\"#my-star\" x=\"10\" y=\"10\" width=\"50\" height=\"50\" fill=\"gold\" \/>\n  &lt;use href=\"#my-star\" x=\"80\" y=\"20\" width=\"60\" height=\"60\" fill=\"silver\" \/>\n  &lt;use href=\"#my-star\" x=\"160\" y=\"0\" width=\"80\" height=\"80\" fill=\"#B87333\" \/>\n&lt;\/svg><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>\u0e01\u0e32\u0e23\u0e43\u0e0a\u0e49\u0e07\u0e32\u0e19\u0e40\u0e1a\u0e37\u0e49\u0e2d\u0e07\u0e15\u0e49\u0e19 \u0e2a\u0e48\u0e27\u0e19\u0e1b\u0e23\u0e30\u0e01\u0e2d\u0e1a\u0e15\u0e48\u0e32\u0e07\u0e46 \u0e43\u0e19 SVG \u0e08\u0e30\u0e16\u0e39\u0e01\u0e01\u0e33\u0e2b\u0e19\u0e14\u0e14\u0e49\u0e27\u0e22\u0e41\u0e17\u0e47\u0e01 XML \u0e17\u0e35\u0e48\u0e41\u0e15\u0e01\u0e15\u0e48\u0e32\u0e07\u0e01\u0e31\u0e19\u0e44\u0e1b \u0e42\u0e14\u0e22\u0e2a\u0e48\u0e27\u0e19\u0e17\u0e35\u0e48\u0e2a\u0e33\u0e04\u0e31\u0e0d\u0e41\u0e25\u0e30\u0e43\u0e0a\u0e49\u0e07\u0e32\u0e19\u0e01\u0e31\u0e19\u0e40\u0e1b\u0e47\u0e19\u0e1b\u0e23\u0e30\u0e08\u0e33\u0e21\u0e35\u0e14\u0e31\u0e07\u0e19\u0e35\u0e49: \u0e01\u0e32\u0e23\u0e2a\u0e23\u0e49\u0e32\u0e07\u0e41\u0e25\u0e30\u0e43\u0e0a\u0e49 symbol \u0e01\u0e32\u0e23\u0e2a\u0e23\u0e49\u0e32\u0e07\u0e41\u0e25\u0e30\u0e43\u0e0a\u0e49\u0e07\u0e32\u0e19 Symbol \u0e43\u0e19 SVG \u0e1b\u0e23\u0e30\u0e01\u0e2d\u0e1a\u0e14\u0e49\u0e27\u0e22&hellip;<\/p>\n","protected":false},"author":1,"featured_media":166,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2],"tags":[],"class_list":["post-159","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-programming"],"_links":{"self":[{"href":"https:\/\/iotnoob.com\/wordpress\/wp-json\/wp\/v2\/posts\/159","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/iotnoob.com\/wordpress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/iotnoob.com\/wordpress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/iotnoob.com\/wordpress\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/iotnoob.com\/wordpress\/wp-json\/wp\/v2\/comments?post=159"}],"version-history":[{"count":6,"href":"https:\/\/iotnoob.com\/wordpress\/wp-json\/wp\/v2\/posts\/159\/revisions"}],"predecessor-version":[{"id":171,"href":"https:\/\/iotnoob.com\/wordpress\/wp-json\/wp\/v2\/posts\/159\/revisions\/171"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/iotnoob.com\/wordpress\/wp-json\/wp\/v2\/media\/166"}],"wp:attachment":[{"href":"https:\/\/iotnoob.com\/wordpress\/wp-json\/wp\/v2\/media?parent=159"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/iotnoob.com\/wordpress\/wp-json\/wp\/v2\/categories?post=159"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/iotnoob.com\/wordpress\/wp-json\/wp\/v2\/tags?post=159"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}