{"id":26498,"date":"2022-10-07T14:00:26","date_gmt":"2022-10-07T14:00:26","guid":{"rendered":"https:\/\/kb.hostatom.com\/?p=26498"},"modified":"2025-11-04T01:46:44","modified_gmt":"2025-11-04T01:46:44","slug":"html-svg-graphics","status":"publish","type":"post","link":"https:\/\/kb.hostatom.com\/lesson\/26498\/","title":{"rendered":"HTML\u00a0SVG Graphics"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"26498\" class=\"elementor elementor-26498\" data-elementor-post-type=\"post\">\n\t\t\t\t<div class=\"elementor-element elementor-element-7c979ec3 e-flex e-con-boxed e-con e-parent\" data-id=\"7c979ec3\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-6ff1662 elementor-widget elementor-widget-heading\" data-id=\"6ff1662\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">SVG \u0e04\u0e37\u0e2d\u0e2d\u0e30\u0e44\u0e23?<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-6841385 elementor-widget elementor-widget-text-editor\" data-id=\"6841385\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p><strong>SVG<\/strong> \u0e22\u0e48\u0e2d\u0e21\u0e32\u0e08\u0e32\u0e01 <strong>Scalable Vector Graphics<\/strong> \u0e40\u0e1b\u0e47\u0e19\u0e21\u0e32\u0e15\u0e23\u0e10\u0e32\u0e19\u0e02\u0e2d\u0e07 W3C \u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a\u0e2a\u0e23\u0e49\u0e32\u0e07\u0e01\u0e23\u0e32\u0e1f\u0e34\u0e01\u0e41\u0e1a\u0e1a\u0e40\u0e27\u0e01\u0e40\u0e15\u0e2d\u0e23\u0e4c (Vector-based Graphics) \u0e42\u0e14\u0e22\u0e43\u0e0a\u0e49 <strong>XML<\/strong> \u0e40\u0e1b\u0e47\u0e19\u0e20\u0e32\u0e29\u0e32\u0e01\u0e33\u0e2b\u0e19\u0e14\u0e23\u0e39\u0e1b\u0e17\u0e23\u0e07\u0e15\u0e48\u0e32\u0e07 \u0e46<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a59b322 elementor-widget elementor-widget-text-editor\" data-id=\"a59b322\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p>\u0e01\u0e23\u0e32\u0e1f\u0e34\u0e01 SVG \u0e2a\u0e32\u0e21\u0e32\u0e23\u0e16\u0e1d\u0e31\u0e07 (embed) \u0e25\u0e07\u0e43\u0e19\u0e2b\u0e19\u0e49\u0e32 HTML \u0e44\u0e14\u0e49\u0e42\u0e14\u0e22\u0e15\u0e23\u0e07 \u0e41\u0e25\u0e30\u0e2a\u0e32\u0e21\u0e32\u0e23\u0e16\u0e02\u0e22\u0e32\u0e22\u0e2b\u0e23\u0e37\u0e2d\u0e22\u0e48\u0e2d\u0e02\u0e19\u0e32\u0e14\u0e44\u0e14\u0e49\u0e42\u0e14\u0e22 \u0e44\u0e21\u0e48\u0e2a\u0e39\u0e0d\u0e40\u0e2a\u0e35\u0e22\u0e04\u0e38\u0e13\u0e20\u0e32\u0e1e\u0e02\u0e2d\u0e07\u0e20\u0e32\u0e1e SVG \u0e44\u0e14\u0e49\u0e23\u0e31\u0e1a\u0e01\u0e32\u0e23\u0e2a\u0e19\u0e31\u0e1a\u0e2a\u0e19\u0e38\u0e19\u0e08\u0e32\u0e01\u0e40\u0e1a\u0e23\u0e32\u0e27\u0e4c\u0e40\u0e0b\u0e2d\u0e23\u0e4c\u0e2b\u0e25\u0e31\u0e01\u0e17\u0e31\u0e49\u0e07\u0e2b\u0e21\u0e14 (\u0e40\u0e0a\u0e48\u0e19 Chrome, Firefox, Safari, Edge)<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-669fd09 elementor-alert-warning elementor-widget elementor-widget-alert\" data-id=\"669fd09\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"alert.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-alert\" role=\"alert\">\n\n\t\t\t\n\t\t\t\t\t\t<span class=\"elementor-alert-description\">SVG \u0e44\u0e21\u0e48\u0e43\u0e0a\u0e48\u0e41\u0e17\u0e47\u0e01\u0e02\u0e2d\u0e07 HTML \u0e42\u0e14\u0e22\u0e15\u0e23\u0e07 \u0e41\u0e15\u0e48\u0e40\u0e1b\u0e47\u0e19\u0e20\u0e32\u0e29\u0e32\u0e21\u0e32\u0e23\u0e4c\u0e01\u0e2d\u0e31\u0e1b\u0e41\u0e1a\u0e1a XML \u0e17\u0e35\u0e48\u0e2a\u0e32\u0e21\u0e32\u0e23\u0e16\u0e1d\u0e31\u0e07\u0e25\u0e07\u0e43\u0e19\u0e40\u0e2d\u0e01\u0e2a\u0e32\u0e23 HTML5 \u0e44\u0e14\u0e49\u0e42\u0e14\u0e22\u0e15\u0e23\u0e07\u0e1c\u0e48\u0e32\u0e19\u0e41\u0e17\u0e47\u0e01  \u0e0b\u0e36\u0e48\u0e07\u0e40\u0e1a\u0e23\u0e32\u0e27\u0e4c\u0e40\u0e0b\u0e2d\u0e23\u0e4c\u0e2a\u0e21\u0e31\u0e22\u0e43\u0e2b\u0e21\u0e48\u0e23\u0e2d\u0e07\u0e23\u0e31\u0e1a\u0e40\u0e15\u0e47\u0e21\u0e23\u0e39\u0e1b\u0e41\u0e1a\u0e1a<\/span>\n\t\t\t\n\t\t\t\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-4934bbb elementor-widget-divider--view-line elementor-widget elementor-widget-divider\" data-id=\"4934bbb\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"divider.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-divider\">\n\t\t\t<span class=\"elementor-divider-separator\">\n\t\t\t\t\t\t<\/span>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f7aefe3 elementor-widget elementor-widget-heading\" data-id=\"f7aefe3\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">\u0e04\u0e38\u0e13\u0e2a\u0e21\u0e1a\u0e31\u0e15\u0e34\u0e2a\u0e33\u0e04\u0e31\u0e0d\u0e02\u0e2d\u0e07 SVG<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-95c48f9 elementor-widget elementor-widget-text-editor\" data-id=\"95c48f9\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<ul>\n<li>\u0e22\u0e48\u0e2d\u0e21\u0e32\u0e08\u0e32\u0e01 <strong>Scalable Vector Graphics <\/strong><\/li>\n<li>\u0e43\u0e0a\u0e49\u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a\u0e2a\u0e23\u0e49\u0e32\u0e07\u0e01\u0e23\u0e32\u0e1f\u0e34\u0e01\u0e41\u0e1a\u0e1a\u0e40\u0e27\u0e01\u0e40\u0e15\u0e2d\u0e23\u0e4c\u0e1a\u0e19\u0e40\u0e27\u0e47\u0e1a<\/li>\n<li>\u0e40\u0e02\u0e35\u0e22\u0e19\u0e14\u0e49\u0e27\u0e22 <strong>\u0e20\u0e32\u0e29\u0e32 XML <\/strong><\/li>\n<li>\u0e2d\u0e07\u0e04\u0e4c\u0e1b\u0e23\u0e30\u0e01\u0e2d\u0e1a (element) \u0e41\u0e25\u0e30\u0e41\u0e2d\u0e15\u0e17\u0e23\u0e34\u0e1a\u0e34\u0e27\u0e15\u0e4c (attribute) \u0e2a\u0e32\u0e21\u0e32\u0e23\u0e16 <strong>\u0e43\u0e2a\u0e48\u0e41\u0e2d\u0e19\u0e34\u0e40\u0e21\u0e0a\u0e31\u0e19\u0e44\u0e14\u0e49 <\/strong><\/li>\n<li>\u0e40\u0e1b\u0e47\u0e19\u0e21\u0e32\u0e15\u0e23\u0e10\u0e32\u0e19\u0e02\u0e2d\u0e07 <strong>W3C Recommendation <\/strong><\/li>\n<li>\u0e2a\u0e32\u0e21\u0e32\u0e23\u0e16\u0e43\u0e0a\u0e49\u0e07\u0e32\u0e19\u0e23\u0e48\u0e27\u0e21\u0e01\u0e31\u0e1a <strong>CSS, DOM, XSL, \u0e41\u0e25\u0e30 JavaScript<\/strong><\/li>\n<\/ul>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-6ff4049 elementor-widget-divider--view-line elementor-widget elementor-widget-divider\" data-id=\"6ff4049\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"divider.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-divider\">\n\t\t\t<span class=\"elementor-divider-separator\">\n\t\t\t\t\t\t<\/span>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-949879d elementor-widget elementor-widget-heading\" data-id=\"949879d\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">\u0e41\u0e17\u0e47\u0e01 <code>&lt;svg&gt;<\/code><\/h2>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-5b54eb8 elementor-widget elementor-widget-text-editor\" data-id=\"5b54eb8\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t\u0e41\u0e17\u0e47\u0e01 <code>&lt;svg&gt;<\/code> \u0e40\u0e1b\u0e47\u0e19 \u0e04\u0e2d\u0e19\u0e40\u0e17\u0e19\u0e40\u0e19\u0e2d\u0e23\u0e4c (container) \u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a\u0e40\u0e01\u0e47\u0e1a\u0e01\u0e23\u0e32\u0e1f\u0e34\u0e01 SVG\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-315249f elementor-widget elementor-widget-text-editor\" data-id=\"315249f\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\tSVG \u0e21\u0e35\u0e04\u0e33\u0e2a\u0e31\u0e48\u0e07\u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a\u0e27\u0e32\u0e14\u0e23\u0e39\u0e1b\u0e23\u0e48\u0e32\u0e07\u0e2b\u0e25\u0e32\u0e22\u0e41\u0e1a\u0e1a \u0e40\u0e0a\u0e48\u0e19\n\u0e40\u0e2a\u0e49\u0e19\u0e17\u0e32\u0e07 (paths), \u0e2a\u0e35\u0e48\u0e40\u0e2b\u0e25\u0e35\u0e48\u0e22\u0e21 (rectangles), \u0e27\u0e07\u0e01\u0e25\u0e21 (circles), \u0e23\u0e39\u0e1b\u0e2b\u0e25\u0e32\u0e22\u0e40\u0e2b\u0e25\u0e35\u0e48\u0e22\u0e21 (polygons), \u0e41\u0e25\u0e30\u0e02\u0e49\u0e2d\u0e04\u0e27\u0e32\u0e21 (text)\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-cf95e1c elementor-widget-divider--view-line elementor-widget elementor-widget-divider\" data-id=\"cf95e1c\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"divider.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-divider\">\n\t\t\t<span class=\"elementor-divider-separator\">\n\t\t\t\t\t\t<\/span>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1e52de6 elementor-widget elementor-widget-heading\" data-id=\"1e52de6\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">\u0e27\u0e07\u0e01\u0e25\u0e21 (SVG Circle)<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-daa3785 elementor-widget elementor-widget-html\" data-id=\"daa3785\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<svg width=\"100\" height=\"100\">\r\n  <circle cx=\"50\" cy=\"50\" r=\"40\" stroke=\"green\" stroke-width=\"4\" fill=\"yellow\" \/>\r\n<\/svg>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-e8780d6 elementor-widget elementor-widget-code-highlight\" data-id=\"e8780d6\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-html line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-html\">\n\t\t\t\t\t<xmp><svg width=\"100\" height=\"100\">\r\n  <circle cx=\"50\" cy=\"50\" r=\"40\" stroke=\"green\" stroke-width=\"4\" fill=\"yellow\" \/>\r\n<\/svg><\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-741fac4 elementor-widget elementor-widget-button\" data-id=\"741fac4\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"button.default\">\n\t\t\t\t\t\t\t\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-sm\" href=\"https:\/\/kb.hostatom.com\/lesson\/html\/tryhtml-graphics?filename=svg_circle\" target=\"_blank\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t<span class=\"elementor-button-icon\">\n\t\t\t\t<svg aria-hidden=\"true\" class=\"e-font-icon-svg e-fas-external-link-alt\" viewBox=\"0 0 512 512\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M432,320H400a16,16,0,0,0-16,16V448H64V128H208a16,16,0,0,0,16-16V80a16,16,0,0,0-16-16H48A48,48,0,0,0,0,112V464a48,48,0,0,0,48,48H400a48,48,0,0,0,48-48V336A16,16,0,0,0,432,320ZM488,0h-128c-21.37,0-32.05,25.91-17,41l35.73,35.73L135,320.37a24,24,0,0,0,0,34L157.67,377a24,24,0,0,0,34,0L435.28,133.32,471,169c15,15,41,4.5,41-17V24A24,24,0,0,0,488,0Z\"><\/path><\/svg>\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t<span class=\"elementor-button-text\">\u0e14\u0e39\u0e1c\u0e25\u0e25\u0e31\u0e1e\u0e18\u0e4c<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f3df483 elementor-widget-divider--view-line elementor-widget elementor-widget-divider\" data-id=\"f3df483\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"divider.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-divider\">\n\t\t\t<span class=\"elementor-divider-separator\">\n\t\t\t\t\t\t<\/span>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-04cb046 elementor-widget elementor-widget-heading\" data-id=\"04cb046\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">\u0e2a\u0e35\u0e48\u0e40\u0e2b\u0e25\u0e35\u0e48\u0e22\u0e21 (SVG Rectangle)<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-e4f379a elementor-widget elementor-widget-html\" data-id=\"e4f379a\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<svg width=\"400\" height=\"100\">\r\n  <rect width=\"400\" height=\"100\" style=\"fill:rgb(0,0,255);stroke-width:10;stroke:rgb(0,0,0)\" \/>\r\n<\/svg>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-bb0ab24 elementor-widget elementor-widget-code-highlight\" data-id=\"bb0ab24\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-html line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-html\">\n\t\t\t\t\t<xmp><svg width=\"400\" height=\"100\">\r\n  <rect width=\"400\" height=\"100\" style=\"fill:rgb(0,0,255);stroke-width:10;stroke:rgb(0,0,0)\" \/>\r\n<\/svg><\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ade9a1c elementor-widget elementor-widget-button\" data-id=\"ade9a1c\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"button.default\">\n\t\t\t\t\t\t\t\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-sm\" href=\"https:\/\/kb.hostatom.com\/lesson\/html\/tryhtml-graphics?filename=svg_rect\" target=\"_blank\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t<span class=\"elementor-button-icon\">\n\t\t\t\t<svg aria-hidden=\"true\" class=\"e-font-icon-svg e-fas-external-link-alt\" viewBox=\"0 0 512 512\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M432,320H400a16,16,0,0,0-16,16V448H64V128H208a16,16,0,0,0,16-16V80a16,16,0,0,0-16-16H48A48,48,0,0,0,0,112V464a48,48,0,0,0,48,48H400a48,48,0,0,0,48-48V336A16,16,0,0,0,432,320ZM488,0h-128c-21.37,0-32.05,25.91-17,41l35.73,35.73L135,320.37a24,24,0,0,0,0,34L157.67,377a24,24,0,0,0,34,0L435.28,133.32,471,169c15,15,41,4.5,41-17V24A24,24,0,0,0,488,0Z\"><\/path><\/svg>\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t<span class=\"elementor-button-text\">\u0e14\u0e39\u0e1c\u0e25\u0e25\u0e31\u0e1e\u0e18\u0e4c<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d940889 elementor-widget-divider--view-line elementor-widget elementor-widget-divider\" data-id=\"d940889\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"divider.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-divider\">\n\t\t\t<span class=\"elementor-divider-separator\">\n\t\t\t\t\t\t<\/span>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-e916b62 elementor-widget elementor-widget-heading\" data-id=\"e916b62\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">\u0e2a\u0e35\u0e48\u0e40\u0e2b\u0e25\u0e35\u0e48\u0e22\u0e21\u0e21\u0e35\u0e21\u0e38\u0e21\u0e42\u0e04\u0e49\u0e07\u0e41\u0e25\u0e30\u0e42\u0e1b\u0e23\u0e48\u0e07\u0e43\u0e2a (Opacity + Rounded Corners)<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-85159b2 elementor-widget elementor-widget-html\" data-id=\"85159b2\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<svg width=\"400\" height=\"180\">\r\n  <rect x=\"50\" y=\"20\" rx=\"20\" ry=\"20\" width=\"150\" height=\"150\" style=\"fill:red;stroke:black;stroke-width:5;opacity:0.5\" \/>\r\n<\/svg>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-dec0e63 elementor-widget elementor-widget-code-highlight\" data-id=\"dec0e63\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-html line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-html\">\n\t\t\t\t\t<xmp><svg width=\"400\" height=\"180\">\r\n  <rect x=\"50\" y=\"20\" rx=\"20\" ry=\"20\" width=\"150\" height=\"150\" style=\"fill:red;stroke:black;stroke-width:5;opacity:0.5\" \/>\r\n<\/svg><\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-b9c540e elementor-widget elementor-widget-button\" data-id=\"b9c540e\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"button.default\">\n\t\t\t\t\t\t\t\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-sm\" href=\"https:\/\/kb.hostatom.com\/lesson\/html\/tryhtml-graphics?filename=svg_rect_round\" target=\"_blank\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t<span class=\"elementor-button-icon\">\n\t\t\t\t<svg aria-hidden=\"true\" class=\"e-font-icon-svg e-fas-external-link-alt\" viewBox=\"0 0 512 512\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M432,320H400a16,16,0,0,0-16,16V448H64V128H208a16,16,0,0,0,16-16V80a16,16,0,0,0-16-16H48A48,48,0,0,0,0,112V464a48,48,0,0,0,48,48H400a48,48,0,0,0,48-48V336A16,16,0,0,0,432,320ZM488,0h-128c-21.37,0-32.05,25.91-17,41l35.73,35.73L135,320.37a24,24,0,0,0,0,34L157.67,377a24,24,0,0,0,34,0L435.28,133.32,471,169c15,15,41,4.5,41-17V24A24,24,0,0,0,488,0Z\"><\/path><\/svg>\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t<span class=\"elementor-button-text\">\u0e14\u0e39\u0e1c\u0e25\u0e25\u0e31\u0e1e\u0e18\u0e4c<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-7ae6a3c elementor-widget-divider--view-line elementor-widget elementor-widget-divider\" data-id=\"7ae6a3c\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"divider.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-divider\">\n\t\t\t<span class=\"elementor-divider-separator\">\n\t\t\t\t\t\t<\/span>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-016e922 elementor-widget elementor-widget-heading\" data-id=\"016e922\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">\u0e23\u0e39\u0e1b\u0e14\u0e32\u0e27 (SVG Star)<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-b297eb7 elementor-widget elementor-widget-html\" data-id=\"b297eb7\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<svg width=\"300\" height=\"200\">\r\n  <polygon points=\"100,10 40,198 190,78 10,78 160,198\" style=\"fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;\" \/>\r\n<\/svg>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d52b421 elementor-widget elementor-widget-code-highlight\" data-id=\"d52b421\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-html line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-html\">\n\t\t\t\t\t<xmp><svg width=\"300\" height=\"200\">\r\n  <polygon points=\"100,10 40,198 190,78 10,78 160,198\" style=\"fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;\" \/>\r\n<\/svg><\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1f3d9a6 elementor-widget elementor-widget-button\" data-id=\"1f3d9a6\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"button.default\">\n\t\t\t\t\t\t\t\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-sm\" href=\"https:\/\/kb.hostatom.com\/lesson\/html\/tryhtml-graphics?filename=svg_star\" target=\"_blank\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t<span class=\"elementor-button-icon\">\n\t\t\t\t<svg aria-hidden=\"true\" class=\"e-font-icon-svg e-fas-external-link-alt\" viewBox=\"0 0 512 512\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M432,320H400a16,16,0,0,0-16,16V448H64V128H208a16,16,0,0,0,16-16V80a16,16,0,0,0-16-16H48A48,48,0,0,0,0,112V464a48,48,0,0,0,48,48H400a48,48,0,0,0,48-48V336A16,16,0,0,0,432,320ZM488,0h-128c-21.37,0-32.05,25.91-17,41l35.73,35.73L135,320.37a24,24,0,0,0,0,34L157.67,377a24,24,0,0,0,34,0L435.28,133.32,471,169c15,15,41,4.5,41-17V24A24,24,0,0,0,488,0Z\"><\/path><\/svg>\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t<span class=\"elementor-button-text\">\u0e14\u0e39\u0e1c\u0e25\u0e25\u0e31\u0e1e\u0e18\u0e4c<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a4b0144 elementor-widget-divider--view-line elementor-widget elementor-widget-divider\" data-id=\"a4b0144\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"divider.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-divider\">\n\t\t\t<span class=\"elementor-divider-separator\">\n\t\t\t\t\t\t<\/span>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-e8a6ab7 elementor-widget elementor-widget-heading\" data-id=\"e8a6ab7\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">\u0e27\u0e07\u0e23\u0e35\u0e1e\u0e23\u0e49\u0e2d\u0e21\u0e01\u0e32\u0e23\u0e44\u0e25\u0e48\u0e2a\u0e35\u0e41\u0e25\u0e30\u0e02\u0e49\u0e2d\u0e04\u0e27\u0e32\u0e21 (Gradient Ellipse + Text)<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-0cef9af elementor-widget elementor-widget-html\" data-id=\"0cef9af\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<svg height=\"130\" width=\"500\">\r\n  <defs>\r\n    <linearGradient id=\"grad1\" x1=\"0%\" y1=\"0%\" x2=\"100%\" y2=\"0%\">\r\n      <stop offset=\"0%\" style=\"stop-color:rgb(255,255,0);stop-opacity:1\" \/>\r\n      <stop offset=\"100%\" style=\"stop-color:rgb(255,0,0);stop-opacity:1\" \/>\r\n    <\/linearGradient>\r\n  <\/defs>\r\n  <ellipse cx=\"100\" cy=\"70\" rx=\"85\" ry=\"55\" fill=\"url(#grad1)\" \/>\r\n  <text fill=\"#ffffff\" font-size=\"45\" font-family=\"Verdana\" x=\"50\" y=\"86\">SVG<\/text>\r\n<\/svg>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-63098e4 elementor-widget elementor-widget-code-highlight\" data-id=\"63098e4\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-html line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-html\">\n\t\t\t\t\t<xmp><svg height=\"130\" width=\"500\">\r\n  <defs>\r\n    <linearGradient id=\"grad1\" x1=\"0%\" y1=\"0%\" x2=\"100%\" y2=\"0%\">\r\n      <stop offset=\"0%\" style=\"stop-color:rgb(255,255,0);stop-opacity:1\" \/>\r\n      <stop offset=\"100%\" style=\"stop-color:rgb(255,0,0);stop-opacity:1\" \/>\r\n    <\/linearGradient>\r\n  <\/defs>\r\n  <ellipse cx=\"100\" cy=\"70\" rx=\"85\" ry=\"55\" fill=\"url(#grad1)\" \/>\r\n  <text fill=\"#ffffff\" font-size=\"45\" font-family=\"Verdana\" x=\"50\" y=\"86\">SVG<\/text>\r\n<\/svg><\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-35ad281 elementor-widget elementor-widget-button\" data-id=\"35ad281\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"button.default\">\n\t\t\t\t\t\t\t\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-sm\" href=\"https:\/\/kb.hostatom.com\/lesson\/html\/tryhtml-graphics?filename=svg_logo\" target=\"_blank\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t<span class=\"elementor-button-icon\">\n\t\t\t\t<svg aria-hidden=\"true\" class=\"e-font-icon-svg e-fas-external-link-alt\" viewBox=\"0 0 512 512\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M432,320H400a16,16,0,0,0-16,16V448H64V128H208a16,16,0,0,0,16-16V80a16,16,0,0,0-16-16H48A48,48,0,0,0,0,112V464a48,48,0,0,0,48,48H400a48,48,0,0,0,48-48V336A16,16,0,0,0,432,320ZM488,0h-128c-21.37,0-32.05,25.91-17,41l35.73,35.73L135,320.37a24,24,0,0,0,0,34L157.67,377a24,24,0,0,0,34,0L435.28,133.32,471,169c15,15,41,4.5,41-17V24A24,24,0,0,0,488,0Z\"><\/path><\/svg>\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t<span class=\"elementor-button-text\">\u0e14\u0e39\u0e1c\u0e25\u0e25\u0e31\u0e1e\u0e18\u0e4c<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-3f53853 elementor-widget-divider--view-line elementor-widget elementor-widget-divider\" data-id=\"3f53853\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"divider.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-divider\">\n\t\t\t<span class=\"elementor-divider-separator\">\n\t\t\t\t\t\t<\/span>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a92e005 elementor-widget elementor-widget-heading\" data-id=\"a92e005\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">\u0e04\u0e27\u0e32\u0e21\u0e41\u0e15\u0e01\u0e15\u0e48\u0e32\u0e07\u0e23\u0e30\u0e2b\u0e27\u0e48\u0e32\u0e07 SVG \u0e01\u0e31\u0e1a Canvas\n<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-545f74b elementor-widget elementor-widget-html\" data-id=\"545f74b\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<div class=\"ls-tbl-wrap\">\r\n<table class=\"ls-tbl\">\r\n<tr><th>\u0e23\u0e32\u0e22\u0e01\u0e32\u0e23\u0e40\u0e1b\u0e23\u0e35\u0e22\u0e1a\u0e40\u0e17\u0e35\u0e22\u0e1a<\/th><th>SVG<\/th><th>Canvas<\/th><\/tr>\r\n<tr><td>\u0e1b\u0e23\u0e30\u0e40\u0e20\u0e17\u0e01\u0e23\u0e32\u0e1f\u0e34\u0e01<\/td><td>\u0e43\u0e0a\u0e49 XML \u0e01\u0e33\u0e2b\u0e19\u0e14\u0e01\u0e23\u0e32\u0e1f\u0e34\u0e01\u0e41\u0e1a\u0e1a\u0e40\u0e27\u0e01\u0e40\u0e15\u0e2d\u0e23\u0e4c<\/td><td>\u0e27\u0e32\u0e14\u0e01\u0e23\u0e32\u0e1f\u0e34\u0e01\u0e41\u0e1a\u0e1a\u0e1e\u0e34\u0e01\u0e40\u0e0b\u0e25\u0e14\u0e49\u0e27\u0e22 JavaScript<\/td><\/tr>\r\n<tr><td>\u0e25\u0e31\u0e01\u0e29\u0e13\u0e30\u0e01\u0e32\u0e23\u0e17\u0e33\u0e07\u0e32\u0e19<\/td><td>\u0e2d\u0e07\u0e04\u0e4c\u0e1b\u0e23\u0e30\u0e01\u0e2d\u0e1a\u0e17\u0e38\u0e01\u0e0a\u0e34\u0e49\u0e19\u0e40\u0e1b\u0e47\u0e19\u0e27\u0e31\u0e15\u0e16\u0e38\u0e43\u0e19 DOM<\/td><td>\u0e27\u0e32\u0e14\u0e41\u0e25\u0e49\u0e27\u0e16\u0e39\u0e01\u0e25\u0e37\u0e21 \u0e15\u0e49\u0e2d\u0e07\u0e27\u0e32\u0e14\u0e43\u0e2b\u0e21\u0e48\u0e40\u0e21\u0e37\u0e48\u0e2d\u0e21\u0e35\u0e01\u0e32\u0e23\u0e40\u0e1b\u0e25\u0e35\u0e48\u0e22\u0e19\u0e41\u0e1b\u0e25\u0e07<\/td><\/tr>\r\n<tr><td>\u0e01\u0e32\u0e23\u0e08\u0e31\u0e14\u0e01\u0e32\u0e23\u0e40\u0e2b\u0e15\u0e38\u0e01\u0e32\u0e23\u0e13\u0e4c (Events)<\/td><td>\u0e23\u0e2d\u0e07\u0e23\u0e31\u0e1a\u0e01\u0e32\u0e23\u0e1c\u0e39\u0e01 Event Handler (\u0e40\u0e0a\u0e48\u0e19 onClick)<\/td><td> \u0e44\u0e21\u0e48\u0e23\u0e2d\u0e07\u0e23\u0e31\u0e1a\u0e42\u0e14\u0e22\u0e15\u0e23\u0e07<\/td><\/tr>\r\n<tr><td>\u0e04\u0e38\u0e13\u0e20\u0e32\u0e1e\u0e02\u0e2d\u0e07\u0e20\u0e32\u0e1e<\/td><td>\u0e04\u0e21\u0e0a\u0e31\u0e14\u0e17\u0e38\u0e01\u0e02\u0e19\u0e32\u0e14 (Resolution-independent)<\/td><td>\u0e02\u0e36\u0e49\u0e19\u0e2d\u0e22\u0e39\u0e48\u0e01\u0e31\u0e1a\u0e04\u0e27\u0e32\u0e21\u0e25\u0e30\u0e40\u0e2d\u0e35\u0e22\u0e14 (Resolution-dependent)<\/td><\/tr>\r\n<tr><td>\u0e01\u0e32\u0e23\u0e41\u0e2a\u0e14\u0e07\u0e1c\u0e25\u0e02\u0e49\u0e2d\u0e04\u0e27\u0e32\u0e21<\/td><td>\u0e04\u0e38\u0e13\u0e20\u0e32\u0e1e\u0e2a\u0e39\u0e07<\/td><td>\u0e02\u0e49\u0e2d\u0e04\u0e27\u0e32\u0e21\u0e41\u0e1b\u0e25\u0e07\u0e40\u0e1b\u0e47\u0e19\u0e1e\u0e34\u0e01\u0e40\u0e0b\u0e25\u0e04\u0e27\u0e32\u0e21\u0e0a\u0e31\u0e14\u0e25\u0e14\u0e25\u0e07<\/td><\/tr>\r\n<tr><td>\u0e04\u0e27\u0e32\u0e21\u0e40\u0e23\u0e47\u0e27\u0e43\u0e19\u0e01\u0e32\u0e23\u0e40\u0e23\u0e19\u0e40\u0e14\u0e2d\u0e23\u0e4c<\/td><td>\u0e0a\u0e49\u0e32\u0e01\u0e27\u0e48\u0e32\u0e01\u0e23\u0e32\u0e1f\u0e34\u0e01\u0e0b\u0e31\u0e1a\u0e0b\u0e49\u0e2d\u0e19<\/td><td>\u0e40\u0e23\u0e47\u0e27\u0e01\u0e27\u0e48\u0e32\u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a\u0e07\u0e32\u0e19\u0e01\u0e23\u0e32\u0e1f\u0e34\u0e01\u0e2b\u0e19\u0e31\u0e01 \u0e46 \u0e40\u0e0a\u0e48\u0e19 \u0e40\u0e01\u0e21<\/td><\/tr>\r\n<tr><td>\u0e01\u0e32\u0e23\u0e1a\u0e31\u0e19\u0e17\u0e36\u0e01\u0e20\u0e32\u0e1e<\/td><td>\u0e44\u0e21\u0e48\u0e2a\u0e32\u0e21\u0e32\u0e23\u0e16\u0e1a\u0e31\u0e19\u0e17\u0e36\u0e01\u0e42\u0e14\u0e22\u0e15\u0e23\u0e07<\/td><td>\u0e1a\u0e31\u0e19\u0e17\u0e36\u0e01\u0e40\u0e1b\u0e47\u0e19 .png \u0e2b\u0e23\u0e37\u0e2d .jpg \u0e44\u0e14\u0e49\u0e07\u0e48\u0e32\u0e22<\/td><\/tr>\r\n<tr><td>\u0e01\u0e32\u0e23\u0e43\u0e0a\u0e49\u0e07\u0e32\u0e19\u0e40\u0e2b\u0e21\u0e32\u0e30\u0e01\u0e31\u0e1a<\/td><td>\u0e42\u0e25\u0e42\u0e01\u0e49, \u0e44\u0e14\u0e2d\u0e30\u0e41\u0e01\u0e23\u0e21, \u0e41\u0e1c\u0e19\u0e20\u0e32\u0e1e<\/td><td>\u0e40\u0e01\u0e21, \u0e01\u0e23\u0e32\u0e1f\u0e34\u0e01\u0e40\u0e04\u0e25\u0e37\u0e48\u0e2d\u0e19\u0e44\u0e2b\u0e27\u0e15\u0e48\u0e2d\u0e40\u0e19\u0e37\u0e48\u0e2d\u0e07<\/td><\/tr>\r\n<\/table>\r\n<\/div>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-0cc4ba2 elementor-widget elementor-widget-text-editor\" data-id=\"0cc4ba2\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t\u0e42\u0e14\u0e22\u0e17\u0e31\u0e48\u0e27\u0e44\u0e1b SVG \u0e40\u0e2b\u0e21\u0e32\u0e30\u0e01\u0e31\u0e1a\u0e01\u0e23\u0e32\u0e1f\u0e34\u0e01\u0e40\u0e0a\u0e34\u0e07\u0e42\u0e04\u0e23\u0e07\u0e2a\u0e23\u0e49\u0e32\u0e07 \u0e2a\u0e48\u0e27\u0e19 Canvas \u0e40\u0e2b\u0e21\u0e32\u0e30\u0e01\u0e31\u0e1a\u0e01\u0e32\u0e23\u0e40\u0e23\u0e19\u0e40\u0e14\u0e2d\u0e23\u0e4c\u0e20\u0e32\u0e1e\u0e40\u0e04\u0e25\u0e37\u0e48\u0e2d\u0e19\u0e44\u0e2b\u0e27\u0e2b\u0e23\u0e37\u0e2d\u0e01\u0e23\u0e32\u0e1f\u0e34\u0e01\u0e40\u0e23\u0e35\u0e22\u0e25\u0e44\u0e17\u0e21\u0e4c\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>SVG \u0e04\u0e37\u0e2d\u0e2d\u0e30\u0e44\u0e23? SVG \u0e22\u0e48\u0e2d\u0e21\u0e32\u0e08\u0e32\u0e01 Scalable Vector Graphics \u0e40\u0e1b\u0e47\u0e19\u0e21\u0e32\u0e15\u0e23\u0e10\u0e32\u0e19\u0e02\u0e2d\u0e07 W3C \u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a\u0e2a\u0e23\u0e49\u0e32\u0e07\u0e01\u0e23\u0e32\u0e1f\u0e34\u0e01\u0e41\u0e1a\u0e1a\u0e40\u0e27\u0e01\u0e40\u0e15\u0e2d\u0e23\u0e4c (Vector-based Graphics) \u0e42\u0e14\u0e22\u0e43\u0e0a\u0e49 XML \u0e40\u0e1b\u0e47\u0e19\u0e20\u0e32\u0e29\u0e32\u0e01\u0e33\u0e2b\u0e19\u0e14\u0e23\u0e39\u0e1b\u0e17\u0e23\u0e07\u0e15\u0e48\u0e32\u0e07 \u0e46 \u0e01\u0e23\u0e32\u0e1f\u0e34\u0e01 SVG \u0e2a\u0e32\u0e21\u0e32\u0e23\u0e16\u0e1d\u0e31\u0e07 (embed) \u0e25\u0e07\u0e43\u0e19\u0e2b\u0e19\u0e49\u0e32 HTML \u0e44\u0e14\u0e49\u0e42\u0e14\u0e22\u0e15\u0e23\u0e07 \u0e41\u0e25\u0e30\u0e2a\u0e32\u0e21\u0e32\u0e23\u0e16\u0e02\u0e22\u0e32\u0e22\u0e2b\u0e23\u0e37\u0e2d\u0e22\u0e48\u0e2d\u0e02\u0e19\u0e32\u0e14\u0e44\u0e14\u0e49\u0e42\u0e14\u0e22 \u0e44\u0e21\u0e48\u0e2a\u0e39\u0e0d\u0e40\u0e2a\u0e35\u0e22\u0e04\u0e38\u0e13\u0e20\u0e32\u0e1e\u0e02\u0e2d\u0e07\u0e20\u0e32\u0e1e SVG \u0e44\u0e14\u0e49\u0e23\u0e31\u0e1a\u0e01\u0e32\u0e23\u0e2a\u0e19\u0e31\u0e1a\u0e2a\u0e19\u0e38\u0e19\u0e08\u0e32\u0e01\u0e40\u0e1a\u0e23\u0e32\u0e27\u0e4c\u0e40\u0e0b\u0e2d\u0e23\u0e4c\u0e2b\u0e25\u0e31\u0e01\u0e17\u0e31\u0e49\u0e07\u0e2b\u0e21\u0e14 (\u0e40\u0e0a\u0e48\u0e19 Chrome, Firefox, Safari, Edge) SVG \u0e44\u0e21\u0e48\u0e43\u0e0a\u0e48\u0e41\u0e17\u0e47\u0e01\u0e02\u0e2d\u0e07 HTML \u0e42\u0e14\u0e22\u0e15\u0e23\u0e07 \u0e41\u0e15\u0e48\u0e40\u0e1b\u0e47\u0e19\u0e20\u0e32\u0e29\u0e32\u0e21\u0e32\u0e23\u0e4c\u0e01\u0e2d\u0e31\u0e1b\u0e41\u0e1a\u0e1a XML \u0e17\u0e35\u0e48\u0e2a\u0e32\u0e21\u0e32\u0e23\u0e16\u0e1d\u0e31\u0e07\u0e25\u0e07\u0e43\u0e19\u0e40\u0e2d\u0e01\u0e2a\u0e32\u0e23 HTML5 \u0e44\u0e14\u0e49\u0e42\u0e14\u0e22\u0e15\u0e23\u0e07\u0e1c\u0e48\u0e32\u0e19\u0e41\u0e17\u0e47\u0e01 \u0e0b\u0e36\u0e48\u0e07\u0e40\u0e1a\u0e23\u0e32\u0e27\u0e4c\u0e40\u0e0b\u0e2d\u0e23\u0e4c\u0e2a\u0e21\u0e31\u0e22\u0e43\u0e2b\u0e21\u0e48\u0e23\u0e2d\u0e07\u0e23\u0e31\u0e1a\u0e40\u0e15\u0e47\u0e21\u0e23\u0e39\u0e1b\u0e41\u0e1a\u0e1a \u0e04\u0e38\u0e13\u0e2a\u0e21\u0e1a\u0e31\u0e15\u0e34\u0e2a\u0e33\u0e04\u0e31\u0e0d\u0e02\u0e2d\u0e07 SVG \u0e22\u0e48\u0e2d\u0e21\u0e32\u0e08\u0e32\u0e01 Scalable Vector Graphics \u0e43\u0e0a\u0e49\u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a\u0e2a\u0e23\u0e49\u0e32\u0e07\u0e01\u0e23\u0e32\u0e1f\u0e34\u0e01\u0e41\u0e1a\u0e1a\u0e40\u0e27\u0e01\u0e40\u0e15\u0e2d\u0e23\u0e4c\u0e1a\u0e19\u0e40\u0e27\u0e47\u0e1a \u0e40\u0e02\u0e35\u0e22\u0e19\u0e14\u0e49\u0e27\u0e22 \u0e20\u0e32\u0e29\u0e32 XML \u0e2d\u0e07\u0e04\u0e4c\u0e1b\u0e23\u0e30\u0e01\u0e2d\u0e1a (element) \u0e41\u0e25\u0e30\u0e41\u0e2d\u0e15\u0e17\u0e23\u0e34\u0e1a\u0e34\u0e27\u0e15\u0e4c [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6],"tags":[],"class_list":["post-26498","post","type-post","status-publish","format-standard","hentry","category-html"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/kb.hostatom.com\/lesson\/wp-json\/wp\/v2\/posts\/26498","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kb.hostatom.com\/lesson\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kb.hostatom.com\/lesson\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kb.hostatom.com\/lesson\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/kb.hostatom.com\/lesson\/wp-json\/wp\/v2\/comments?post=26498"}],"version-history":[{"count":0,"href":"https:\/\/kb.hostatom.com\/lesson\/wp-json\/wp\/v2\/posts\/26498\/revisions"}],"wp:attachment":[{"href":"https:\/\/kb.hostatom.com\/lesson\/wp-json\/wp\/v2\/media?parent=26498"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kb.hostatom.com\/lesson\/wp-json\/wp\/v2\/categories?post=26498"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kb.hostatom.com\/lesson\/wp-json\/wp\/v2\/tags?post=26498"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}