{"id":1768,"date":"2018-08-31T02:39:38","date_gmt":"2018-08-31T02:39:38","guid":{"rendered":"https:\/\/spiceworksmyanmar.com\/blog\/?p=1768"},"modified":"2018-08-31T02:39:38","modified_gmt":"2018-08-31T02:39:38","slug":"scalable-vector-graphic%e3%80%8csvg%e3%80%8d","status":"publish","type":"post","link":"https:\/\/www.spiceworksmyanmar.com\/blog\/scalable-vector-graphic%e3%80%8csvg%e3%80%8d\/","title":{"rendered":"Scalable Vector Graphic\u300cSVG\u300d"},"content":{"rendered":"<p>Hello! I\u2019m Thuzar San working as a Web Designer at Spiceworks Myanmar Co.,Ltd. Today I want to share about one of the vector graphic SVG .<\/p>\n<p><span style=\"color: #808080\"><em>Topics:<\/em><\/span><\/p>\n<ul>\n<li>What is SVG?<\/li>\n<li>About Vector Graphics<\/li>\n<li>SVG in websites<\/li>\n<li>Browser support<\/li>\n<li>Creating svg Images<\/li>\n<li>View of SVG element<\/li>\n<li>Exporting SVG image from the Adobe Illustrator<\/li>\n<\/ul>\n<p><strong>What is SVG?<\/strong><\/p>\n<p>Scalable Vector Graphic &#8221; SVG &#8221; is one of\u00a0 image format like .jpg \/ .gif \/.png and etc&#8230;They can scale infinitely, zoom in with any size.<\/p>\n<p>Every element and every attribute in SVG\u00a0image\u00a0can be animated with CSS and JS.You can add additional class name in the svg element.<\/p>\n<p><strong>Vector Graphics<\/strong><\/p>\n<p>Vector graphics\u00a0are\u00a0computer graphics\u00a0images\u00a0which are connected by lines and curves to form polygons and other shapes (not pixels).<\/p>\n<p>Each shape have various properties including values for stroke color, shape, curve, thickness, and fill color.<\/p>\n<p>Vector graphics are commonly found today in the\u00a0SVG,\u00a0EPS\u00a0and\u00a0PDF file formats and They are perfect illustrations logo, icon and etc \u2026 created with shapes.<\/p>\n<p>They are different from the more common\u00a0raster graphics\u00a0file formats of JPG,JPEG,\u00a0PNG\u00a0.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-1877 size-full\" src=\"https:\/\/spiceworksmyanmar.com\/blog\/wp-content\/uploads\/2018\/08\/blog_svg_01.jpg\" alt=\"\" width=\"700\" height=\"366\" srcset=\"https:\/\/www.spiceworksmyanmar.com\/blog\/wp-content\/uploads\/2018\/08\/blog_svg_01.jpg 700w, https:\/\/www.spiceworksmyanmar.com\/blog\/wp-content\/uploads\/2018\/08\/blog_svg_01-300x157.jpg 300w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/><\/p>\n<p><strong>Browser support<\/strong><\/p>\n<p>All major modern\u00a0web browsers\u2014including\u00a0Mozilla Firefox,\u00a0Internet Explorer,\u00a0Google Chrome,\u00a0Opera,\u00a0Safari, and\u00a0Microsoft Edge\u2014have\u00a0SVG rendering support.<\/p>\n<p>Internet Explorer 8 and older versions do not support SVG.<\/p>\n<p><strong>SVG in websites<\/strong><\/p>\n<p>SVG has some predefined shape elements that can be used by developers.<\/p>\n<ul>\n<li><span style=\"color: #999999\">Rectangle<\/span>\u00a0&lt;rect&gt;<\/li>\n<li><span style=\"color: #999999\">Circle<\/span>\u00a0&lt;circle&gt;<\/li>\n<li><span style=\"color: #999999\">Ellipse<\/span>\u00a0&lt;ellipse&gt;<\/li>\n<li><span style=\"color: #999999\">Line<\/span>\u00a0&lt;line&gt;<\/li>\n<li><span style=\"color: #999999\">Polyline<\/span>\u00a0&lt;polyline&gt;<\/li>\n<li><span style=\"color: #999999\">Polygon<\/span>\u00a0&lt;polygon&gt;<\/li>\n<li><span style=\"color: #999999\">Path<\/span>\u00a0&lt;path&gt;<\/li>\n<li><span style=\"color: #999999\">Text<\/span>\u00a0&lt;text&gt;\u00a0\u00a0 &lt;tspan&gt;<\/li>\n<li><span style=\"color: #999999\">Group<\/span>\u00a0&lt;g&gt;<\/li>\n<li><span style=\"color: #999999\">Filters<\/span>\u00a0\u00a0&lt;defs&gt; &lt;filter&gt; &lt;\/filter&gt; &lt;\/defs&gt;<\/li>\n<li><span style=\"color: #999999\">Linear\/Radial Gradient<\/span>\u00a0\u00a0&lt;defs&gt; &lt;linearGradient&gt;&lt;\/ linearGradient &gt; &lt;\/defs&gt;<\/li>\n<\/ul>\n<hr \/>\n<p><strong>Creating SVG Images\u00a0<\/strong><\/p>\n<p>SVG images can be created with any text editor, but it is often more convenient to create SVG images with a drawing program.<\/p>\n<p>SVG images can be produced by the use of a\u00a0vector graphics editor, such as\u00a0Inkscape,\u00a0Adobe Illustrator,\u00a0 or\u00a0CorelDRAW and export as SVG.<\/p>\n<p><span style=\"color: #333399\"><span style=\"color: #333333\">This\u00a0\u00a0<\/span><a style=\"color: #333399\" href=\"https:\/\/svg-edit.github.io\/svgedit\/releases\/latest\/editor\/svg-editor.html\">SVG Editor<\/a><\/span>\u00a0\u00a0help you to create SVG image easily and you can learn about how svg element work. Create some polygons and shapes in the SVG editor.<\/p>\n<p><em><span style=\"color: #808080\">This is the view\u00a0of polygons and shapes that I created\u00a0 in the SVG Editor<\/span><\/em><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-1828 size-full\" src=\"https:\/\/spiceworksmyanmar.com\/blog\/wp-content\/uploads\/2018\/08\/blog_svg_02.jpg\" alt=\"\" width=\"700\" height=\"366\" srcset=\"https:\/\/www.spiceworksmyanmar.com\/blog\/wp-content\/uploads\/2018\/08\/blog_svg_02.jpg 700w, https:\/\/www.spiceworksmyanmar.com\/blog\/wp-content\/uploads\/2018\/08\/blog_svg_02-300x157.jpg 300w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/><\/p>\n<p><em><span style=\"color: #808080\">This is the code of that shapes from the editor<\/span><\/em><\/p>\n<pre class=\"brush:html; notranslate\" title=\"\">&lt;svg width=\"640\" height=\"480\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" xmlns:svg=\"http:\/\/www.w3.org\/2000\/svg\"&gt;\r\n &lt;!-- Created with SVG-edit - https:\/\/github.com\/SVG-Edit\/svgedit--&gt;\r\n &lt;g class=\"layer\"&gt;\r\n &lt;title&gt;Layer 1&lt;\/title&gt;\r\n &lt;polygon cx=\"75.5\" cy=\"46.5\" edge=\"39.95553\" fill=\"none\" id=\"svg_19\" orient=\"x\" points=\"104.48820495605469,52.5 81.0029296875,84.82470703125 43.00296401977539,72.47776794433594 43.00296401977539,32.522233963012695 81.0029296875,20.175296783447266 104.48820495605469,52.5 \" shape=\"regularPoly\" sides=\"5\" stroke=\"#000000\" stroke-width=\"5\" strokeWidth=\"5\" strokecolor=\"#000000\"\/&gt;\r\n &lt;ellipse cx=\"181.5\" cy=\"52.5\" fill=\"none\" id=\"svg_20\" rx=\"31\" ry=\"31\" stroke=\"#000000\" stroke-dasharray=\"null\" stroke-linecap=\"null\" stroke-linejoin=\"null\" stroke-width=\"5\"\/&gt;\r\n &lt;rect fill=\"none\" height=\"49\" id=\"svg_21\" stroke=\"#000000\" stroke-dasharray=\"null\" stroke-linecap=\"null\" stroke-linejoin=\"null\" stroke-width=\"5\" width=\"109\" x=\"258.5\" y=\"26.5\"\/&gt;\r\n &lt;line fill=\"none\" id=\"svg_24\" stroke=\"#000000\" stroke-dasharray=\"null\" stroke-linecap=\"null\" stroke-linejoin=\"null\" stroke-width=\"5\" x1=\"415.5\" x2=\"478.56346\" y1=\"83.5\" y2=\"20.43654\"\/&gt;\r\n &lt;path d=\"m522.5,40.5c-1.56403,-0.64667 -1.94788,-1.48558 -1.98932,-2.28267c-0.0545,-1.0493 -0.01068,-1.688 -0.01068,-2.759c0,-0.76733 0,-1.95833 0,-2.757c0,-0.79066 0,-1.56533 0,-2.316c0,-1.06383 0,-2.04933 0,-2.67467c0,-1.21067 0,-2.10617 0,-2.68983c0,-0.8355 -0.00201,-2.05917 0,-2.85917c0.00226,-0.90451 0.10968,-1.89073 0.80133,-2.37633c0.71259,-0.50026 1.48663,-1.00283 1.89868,-1.63717c0.58313,-0.89767 1.12732,-1.30203 1.93597,-1.7095c0.88385,-0.44533 1.36511,-0.98354 1.96533,-1.456c0.97284,-0.76573 1.62396,-1.0973 2.56537,-1.48267c0.77319,-0.31651 1.55701,-0.62234 2.5,-0.83333c0.90576,-0.20266 1.64264,-0.166 2.76129,-0.16667c0.47601,-0.00028 1.52405,0 2.07202,0c1.08398,0 2.5,0 3.18933,0c0.88269,0 1.79468,-0.00216 2.65802,0c0.89996,0.00225 1.83337,0.13461 2.47797,0.436c0.70782,0.33094 1.55377,0.99905 2.22937,1.44933c0.69287,0.46179 1.62799,0.93936 2.26929,1.32533c0.6308,0.37966 1.65637,1.15894 2.11353,1.7685c0.61365,0.81821 1.15564,1.44506 1.50983,2.32533c0.33209,0.82533 0.44519,1.54565 0.854,2.2115c0.54315,0.8846 1.39069,1.51652 1.7627,2.12c0.48285,0.78324 0.42285,1.61069 0.43616,2.785c0.00885,0.78302 -0.03705,1.55223 0.42517,2.503c0.37946,0.7805 0.56659,1.5966 0.5733,2.30933c0.01044,1.10532 -0.1344,1.94692 -0.44531,2.61333c-0.40094,0.85933 -0.85547,1.58706 -1.37866,2.35733c-0.50378,0.74171 -1.20789,1.35676 -1.87018,1.89684c-0.66254,0.54028 -1.13501,1.39193 -1.28369,2.37833c-0.12244,0.81205 -0.2843,1.74034 -0.82214,2.32083c-0.57605,0.62175 -1.29974,1.29888 -1.89868,1.9c-0.60565,0.60786 -1.19202,1.26564 -1.78534,2.068c-0.35468,0.47969 -0.85608,1.28939 -1.71448,2.089c-0.55212,0.5143 -1.39465,0.84145 -2.03851,1.443c-0.74878,0.69956 -0.68005,1.64603 -1.37231,2.264c-0.66748,0.59587 -1.61456,0.99183 -1.98932,1.65733c-0.42957,0.76278 -0.68262,1.64621 -1.20001,2.208c-0.70837,0.76911 -1.19934,1.372 -1.20001,2.27067c-0.00061,0.82083 0,1.78533 0,2.51067c0,0.98917 0,1.7685 0,2.768c0,0.90533 -0.00171,1.85733 0,2.62267c0.00226,0.99867 0.05719,1.79867 0.284,2.79733l0.29065,0.76534l0.30402,0.81433l0.28802,0.855\" fill=\"none\" id=\"svg_65\" stroke=\"#000000\" stroke-dasharray=\"null\" stroke-linecap=\"null\" stroke-linejoin=\"null\" stroke-width=\"5\"\/&gt;\r\n &lt;path d=\"m543.5,85.5c0,-1.7 -0.00293,-2.81563 0.80133,-2.99866c0.87628,-0.19942 1.79865,-0.00673 2.69867,-0.00134c0.8894,0.00533 1.62842,0.53185 1.48932,1.4c-0.13373,0.83475 -0.5744,1.74972 -1.15601,2.43333c-0.56659,0.66599 -1.18903,1.13806 -2.03333,1.16666c-0.89948,0.03047 -1.80084,0.03719 -2.59998,0c-0.91766,-0.04272 -1.19867,-0.88667 -1.18933,-1.82533l0.07465,-0.69067l0.43549,-0.94234\" fill=\"none\" id=\"svg_66\" stroke=\"#000000\" stroke-dasharray=\"null\" stroke-linecap=\"null\" stroke-linejoin=\"null\" stroke-width=\"5\"\/&gt;\r\n &lt;\/g&gt;\r\n&lt;\/svg&gt;\r\n<\/pre>\n<p>To see your code click <span style=\"color: #993300\">&lt;<\/span><span style=\"color: #008080\">svg<span style=\"color: #993300\">&gt;<\/span><\/span>\u00a0 from the menu bar. Copy it and paste in your HTML document.<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"wp-image-1798 size-full aligncenter\" src=\"https:\/\/spiceworksmyanmar.com\/blog\/wp-content\/uploads\/2018\/07\/blog_svg_03.jpg\" alt=\"\" width=\"700\" height=\"124\" srcset=\"https:\/\/www.spiceworksmyanmar.com\/blog\/wp-content\/uploads\/2018\/07\/blog_svg_03.jpg 700w, https:\/\/www.spiceworksmyanmar.com\/blog\/wp-content\/uploads\/2018\/07\/blog_svg_03-300x53.jpg 300w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/><\/p>\n<p><em><span style=\"color: #808080\">Online SVG editor is only suitable for testing. So we use <\/span><\/em><span style=\"color: #808080\"><span style=\"color: #333333\">Adobe Illustrator<\/span><\/span><em><span style=\"color: #808080\"> to create SVG images.<\/span><\/em><\/p>\n<hr \/>\n<p><strong>Exporting SVG Image from the Adobe Illustrator<\/strong><\/p>\n<p>file &gt; save as &gt; save as type :\u00a0<span style=\"color: #808080\">*.svg<\/span> <span style=\"color: #999999\">\u00a0<span style=\"color: #333333\">&gt;\u00a0save<\/span><\/span><\/p>\n<p>Then the\u00a0SVG Options dialog will appear.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-1807 size-full\" src=\"https:\/\/spiceworksmyanmar.com\/blog\/wp-content\/uploads\/2018\/07\/blog_svg_04.jpg\" alt=\"\" width=\"700\" height=\"366\" srcset=\"https:\/\/www.spiceworksmyanmar.com\/blog\/wp-content\/uploads\/2018\/07\/blog_svg_04.jpg 700w, https:\/\/www.spiceworksmyanmar.com\/blog\/wp-content\/uploads\/2018\/07\/blog_svg_04-300x157.jpg 300w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/><\/p>\n<p>To avoid font missing \u00a0problem, be sure to always convert your text to vector art.<\/p>\n<p><span style=\"color: #999999\"><em>see the image below\u00a0<\/em><\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-1830 size-full\" src=\"https:\/\/spiceworksmyanmar.com\/blog\/wp-content\/uploads\/2018\/08\/blog_svg_05.jpg\" alt=\"\" width=\"700\" height=\"366\" srcset=\"https:\/\/www.spiceworksmyanmar.com\/blog\/wp-content\/uploads\/2018\/08\/blog_svg_05.jpg 700w, https:\/\/www.spiceworksmyanmar.com\/blog\/wp-content\/uploads\/2018\/08\/blog_svg_05-300x157.jpg 300w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/><\/p>\n<p>Choose Fonts type\u00a0&#8221; <span style=\"color: #808080\">Convert to Outline<\/span> &#8220;.<\/p>\n<p>And choose &#8221;\u00a0<span style=\"color: #999999\"><span style=\"color: #808080\">Embed<\/span> <span style=\"color: #333333\">&#8220;<\/span><\/span> for image location and click &#8221; <span style=\"color: #808080\">OK<\/span> &#8220;.<\/p>\n<p>To get the svg code &#8211;\u00a0 click &#8221;\u00a0<span style=\"color: #999999\"><span style=\"color: #808080\">SVG Code<\/span><span style=\"color: #333333\"> &#8220;<\/span>\u00a0<\/span>in the SVG options dialog (or) open your svg image in the text editor.<\/p>\n<p>Thank You For Your Attention!<br \/>\nGood Day To You!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Hello! I\u2019m Thuzar San working as a Web Designer at Spiceworks Myanmar Co.,Ltd. Today I want to share about one<\/p>\n","protected":false},"author":29,"featured_media":1864,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2],"tags":[],"class_list":["post-1768","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-design"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v28.8 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Scalable Vector Graphic\u300cSVG\u300d - Web Development &amp; Tech Blog | Spiceworks Myanmar<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.spiceworksmyanmar.com\/blog\/scalable-vector-graphic\u300csvg\u300d\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Scalable Vector Graphic\u300cSVG\u300d - Web Development &amp; Tech Blog | Spiceworks Myanmar\" \/>\n<meta property=\"og:description\" content=\"Hello! I\u2019m Thuzar San working as a Web Designer at Spiceworks Myanmar Co.,Ltd. Today I want to share about one\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.spiceworksmyanmar.com\/blog\/scalable-vector-graphic\u300csvg\u300d\/\" \/>\n<meta property=\"og:site_name\" content=\"Web Development &amp; Tech Blog | Spiceworks Myanmar\" \/>\n<meta property=\"article:published_time\" content=\"2018-08-31T02:39:38+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.spiceworksmyanmar.com\/blog\/wp-content\/uploads\/2018\/08\/cover_svg.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"700\" \/>\n\t<meta property=\"og:image:height\" content=\"366\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Spiceworks Myanmar\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Spiceworks Myanmar\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.spiceworksmyanmar.com\\\/blog\\\/scalable-vector-graphic%e3%80%8csvg%e3%80%8d\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.spiceworksmyanmar.com\\\/blog\\\/scalable-vector-graphic%e3%80%8csvg%e3%80%8d\\\/\"},\"author\":{\"name\":\"Spiceworks Myanmar\",\"@id\":\"https:\\\/\\\/www.spiceworksmyanmar.com\\\/blog\\\/#\\\/schema\\\/person\\\/1d6a9f621461e22a60a21d9ebf34bd86\"},\"headline\":\"Scalable Vector Graphic\u300cSVG\u300d\",\"datePublished\":\"2018-08-31T02:39:38+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.spiceworksmyanmar.com\\\/blog\\\/scalable-vector-graphic%e3%80%8csvg%e3%80%8d\\\/\"},\"wordCount\":534,\"image\":{\"@id\":\"https:\\\/\\\/www.spiceworksmyanmar.com\\\/blog\\\/scalable-vector-graphic%e3%80%8csvg%e3%80%8d\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.spiceworksmyanmar.com\\\/blog\\\/wp-content\\\/uploads\\\/2018\\\/08\\\/cover_svg.jpg\",\"articleSection\":[\"Design\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.spiceworksmyanmar.com\\\/blog\\\/scalable-vector-graphic%e3%80%8csvg%e3%80%8d\\\/\",\"url\":\"https:\\\/\\\/www.spiceworksmyanmar.com\\\/blog\\\/scalable-vector-graphic%e3%80%8csvg%e3%80%8d\\\/\",\"name\":\"Scalable Vector Graphic\u300cSVG\u300d - Web Development &amp; Tech Blog | Spiceworks Myanmar\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.spiceworksmyanmar.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.spiceworksmyanmar.com\\\/blog\\\/scalable-vector-graphic%e3%80%8csvg%e3%80%8d\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.spiceworksmyanmar.com\\\/blog\\\/scalable-vector-graphic%e3%80%8csvg%e3%80%8d\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.spiceworksmyanmar.com\\\/blog\\\/wp-content\\\/uploads\\\/2018\\\/08\\\/cover_svg.jpg\",\"datePublished\":\"2018-08-31T02:39:38+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.spiceworksmyanmar.com\\\/blog\\\/#\\\/schema\\\/person\\\/1d6a9f621461e22a60a21d9ebf34bd86\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.spiceworksmyanmar.com\\\/blog\\\/scalable-vector-graphic%e3%80%8csvg%e3%80%8d\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.spiceworksmyanmar.com\\\/blog\\\/scalable-vector-graphic%e3%80%8csvg%e3%80%8d\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.spiceworksmyanmar.com\\\/blog\\\/scalable-vector-graphic%e3%80%8csvg%e3%80%8d\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.spiceworksmyanmar.com\\\/blog\\\/wp-content\\\/uploads\\\/2018\\\/08\\\/cover_svg.jpg\",\"contentUrl\":\"https:\\\/\\\/www.spiceworksmyanmar.com\\\/blog\\\/wp-content\\\/uploads\\\/2018\\\/08\\\/cover_svg.jpg\",\"width\":700,\"height\":366},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.spiceworksmyanmar.com\\\/blog\\\/scalable-vector-graphic%e3%80%8csvg%e3%80%8d\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.spiceworksmyanmar.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Scalable Vector Graphic\u300cSVG\u300d\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.spiceworksmyanmar.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.spiceworksmyanmar.com\\\/blog\\\/\",\"name\":\"Web Development &amp; Tech Blog | Spiceworks Myanmar\",\"description\":\"Read Spiceworks Myanmar\u2019s blog on web development, design trends, and IT solutions. Stay informed with tips and insights from our experienced developers.\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.spiceworksmyanmar.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.spiceworksmyanmar.com\\\/blog\\\/#\\\/schema\\\/person\\\/1d6a9f621461e22a60a21d9ebf34bd86\",\"name\":\"Spiceworks Myanmar\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/de75beb6a85e1e4d704a6c2ae4fc5ce6e481e8943bb693c8638c80f1ea551e1d?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/de75beb6a85e1e4d704a6c2ae4fc5ce6e481e8943bb693c8638c80f1ea551e1d?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/de75beb6a85e1e4d704a6c2ae4fc5ce6e481e8943bb693c8638c80f1ea551e1d?s=96&d=mm&r=g\",\"caption\":\"Spiceworks Myanmar\"},\"url\":\"https:\\\/\\\/www.spiceworksmyanmar.com\\\/blog\\\/author\\\/spiceworks-myanmar\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Scalable Vector Graphic\u300cSVG\u300d - Web Development &amp; Tech Blog | Spiceworks Myanmar","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.spiceworksmyanmar.com\/blog\/scalable-vector-graphic\u300csvg\u300d\/","og_locale":"en_US","og_type":"article","og_title":"Scalable Vector Graphic\u300cSVG\u300d - Web Development &amp; Tech Blog | Spiceworks Myanmar","og_description":"Hello! I\u2019m Thuzar San working as a Web Designer at Spiceworks Myanmar Co.,Ltd. Today I want to share about one","og_url":"https:\/\/www.spiceworksmyanmar.com\/blog\/scalable-vector-graphic\u300csvg\u300d\/","og_site_name":"Web Development &amp; Tech Blog | Spiceworks Myanmar","article_published_time":"2018-08-31T02:39:38+00:00","og_image":[{"width":700,"height":366,"url":"https:\/\/www.spiceworksmyanmar.com\/blog\/wp-content\/uploads\/2018\/08\/cover_svg.jpg","type":"image\/jpeg"}],"author":"Spiceworks Myanmar","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Spiceworks Myanmar","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.spiceworksmyanmar.com\/blog\/scalable-vector-graphic%e3%80%8csvg%e3%80%8d\/#article","isPartOf":{"@id":"https:\/\/www.spiceworksmyanmar.com\/blog\/scalable-vector-graphic%e3%80%8csvg%e3%80%8d\/"},"author":{"name":"Spiceworks Myanmar","@id":"https:\/\/www.spiceworksmyanmar.com\/blog\/#\/schema\/person\/1d6a9f621461e22a60a21d9ebf34bd86"},"headline":"Scalable Vector Graphic\u300cSVG\u300d","datePublished":"2018-08-31T02:39:38+00:00","mainEntityOfPage":{"@id":"https:\/\/www.spiceworksmyanmar.com\/blog\/scalable-vector-graphic%e3%80%8csvg%e3%80%8d\/"},"wordCount":534,"image":{"@id":"https:\/\/www.spiceworksmyanmar.com\/blog\/scalable-vector-graphic%e3%80%8csvg%e3%80%8d\/#primaryimage"},"thumbnailUrl":"https:\/\/www.spiceworksmyanmar.com\/blog\/wp-content\/uploads\/2018\/08\/cover_svg.jpg","articleSection":["Design"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.spiceworksmyanmar.com\/blog\/scalable-vector-graphic%e3%80%8csvg%e3%80%8d\/","url":"https:\/\/www.spiceworksmyanmar.com\/blog\/scalable-vector-graphic%e3%80%8csvg%e3%80%8d\/","name":"Scalable Vector Graphic\u300cSVG\u300d - Web Development &amp; Tech Blog | Spiceworks Myanmar","isPartOf":{"@id":"https:\/\/www.spiceworksmyanmar.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.spiceworksmyanmar.com\/blog\/scalable-vector-graphic%e3%80%8csvg%e3%80%8d\/#primaryimage"},"image":{"@id":"https:\/\/www.spiceworksmyanmar.com\/blog\/scalable-vector-graphic%e3%80%8csvg%e3%80%8d\/#primaryimage"},"thumbnailUrl":"https:\/\/www.spiceworksmyanmar.com\/blog\/wp-content\/uploads\/2018\/08\/cover_svg.jpg","datePublished":"2018-08-31T02:39:38+00:00","author":{"@id":"https:\/\/www.spiceworksmyanmar.com\/blog\/#\/schema\/person\/1d6a9f621461e22a60a21d9ebf34bd86"},"breadcrumb":{"@id":"https:\/\/www.spiceworksmyanmar.com\/blog\/scalable-vector-graphic%e3%80%8csvg%e3%80%8d\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.spiceworksmyanmar.com\/blog\/scalable-vector-graphic%e3%80%8csvg%e3%80%8d\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.spiceworksmyanmar.com\/blog\/scalable-vector-graphic%e3%80%8csvg%e3%80%8d\/#primaryimage","url":"https:\/\/www.spiceworksmyanmar.com\/blog\/wp-content\/uploads\/2018\/08\/cover_svg.jpg","contentUrl":"https:\/\/www.spiceworksmyanmar.com\/blog\/wp-content\/uploads\/2018\/08\/cover_svg.jpg","width":700,"height":366},{"@type":"BreadcrumbList","@id":"https:\/\/www.spiceworksmyanmar.com\/blog\/scalable-vector-graphic%e3%80%8csvg%e3%80%8d\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.spiceworksmyanmar.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Scalable Vector Graphic\u300cSVG\u300d"}]},{"@type":"WebSite","@id":"https:\/\/www.spiceworksmyanmar.com\/blog\/#website","url":"https:\/\/www.spiceworksmyanmar.com\/blog\/","name":"Web Development &amp; Tech Blog | Spiceworks Myanmar","description":"Read Spiceworks Myanmar\u2019s blog on web development, design trends, and IT solutions. Stay informed with tips and insights from our experienced developers.","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.spiceworksmyanmar.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.spiceworksmyanmar.com\/blog\/#\/schema\/person\/1d6a9f621461e22a60a21d9ebf34bd86","name":"Spiceworks Myanmar","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/de75beb6a85e1e4d704a6c2ae4fc5ce6e481e8943bb693c8638c80f1ea551e1d?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/de75beb6a85e1e4d704a6c2ae4fc5ce6e481e8943bb693c8638c80f1ea551e1d?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/de75beb6a85e1e4d704a6c2ae4fc5ce6e481e8943bb693c8638c80f1ea551e1d?s=96&d=mm&r=g","caption":"Spiceworks Myanmar"},"url":"https:\/\/www.spiceworksmyanmar.com\/blog\/author\/spiceworks-myanmar\/"}]}},"_links":{"self":[{"href":"https:\/\/www.spiceworksmyanmar.com\/blog\/wp-json\/wp\/v2\/posts\/1768","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.spiceworksmyanmar.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.spiceworksmyanmar.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.spiceworksmyanmar.com\/blog\/wp-json\/wp\/v2\/users\/29"}],"replies":[{"embeddable":true,"href":"https:\/\/www.spiceworksmyanmar.com\/blog\/wp-json\/wp\/v2\/comments?post=1768"}],"version-history":[{"count":67,"href":"https:\/\/www.spiceworksmyanmar.com\/blog\/wp-json\/wp\/v2\/posts\/1768\/revisions"}],"predecessor-version":[{"id":1880,"href":"https:\/\/www.spiceworksmyanmar.com\/blog\/wp-json\/wp\/v2\/posts\/1768\/revisions\/1880"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.spiceworksmyanmar.com\/blog\/wp-json\/wp\/v2\/media\/1864"}],"wp:attachment":[{"href":"https:\/\/www.spiceworksmyanmar.com\/blog\/wp-json\/wp\/v2\/media?parent=1768"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.spiceworksmyanmar.com\/blog\/wp-json\/wp\/v2\/categories?post=1768"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.spiceworksmyanmar.com\/blog\/wp-json\/wp\/v2\/tags?post=1768"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}