{"id":24422,"date":"2021-03-04T21:33:01","date_gmt":"2021-03-04T13:33:01","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=24422"},"modified":"2022-08-17T17:45:19","modified_gmt":"2022-08-17T09:45:19","slug":"svg-tools","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/svg-tools\/","title":{"rendered":"20 Free SVG Tools for Better Graphics (Updated)"},"content":{"rendered":"<p><a target=\"_blank\" href=\"https:\/\/www.hongkiat.com\/blog\/scalable-vector-graphic\/\" rel=\"noopener\">SVG<\/a> is gaining popularity in web design these days and you can use tools like Illustrator or Inkscape to create SVG graphics. But when it comes to web design, we should always optimize for lighter results.<\/p>\n<p>Here are the <strong>20 tools that you can use to work with SVG quickly and efficiently<\/strong>. We have mostly online tools, that can help in optimization, conversion, <a target=\"_blank\" href=\"https:\/\/www.hongkiat.com\/blog\/free-pattern-generators\/\" rel=\"noopener\">making patterns<\/a>, and more.<\/p>\n<div class=\"ref-block ref-block--post\" id=\"ref-post-1\">\n\t\t\t\t\t<a href=\"https:\/\/www.hongkiat.com\/blog\/advanced-svg-animation-css\/\" class=\"ref-block__link\" title=\"Read More: How to Animate SVGs with CSS\" rel=\"bookmark\"><span class=\"screen-reader-text\">How to Animate SVGs with CSS<\/span><\/a>\n<div class=\"ref-block__thumbnail img-thumb img-thumb--jumbo\" data-img='{ \"src\" : \"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/250x160\/advanced-svg-animation-css.jpg\" }'>\n\t\t\t\t\t\t\t<noscript>\n<style>.no-js #ref-block-post-23954 .ref-block__thumbnail { background-image: url(\"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/250x160\/advanced-svg-animation-css.jpg\"); }<\/style>\n<\/noscript>\n\t\t\t\t\t\t<\/div>\n<div class=\"ref-block__summary\">\n<h4 class=\"ref-title\">How to Animate SVGs with CSS<\/h4>\n<p class=\"ref-description\">\n\t\t\t\t\t\t&lt;animate&gt; and &lt;animateMotion&gt; are native elements for animating SVGs, but if you're more comfortable with CSS, you can...\t\t\t\t\t\t<span>Read more<\/span><\/p>\n<\/div>\n<\/div>\n<h3><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.sarasoueidan.com\/demos\/interactive-svg-coordinate-system\/index.html\">Interactive SVG Coordinate System<\/a><\/h3>\n<p>When you work with SVG, you can\u2019t leave its coordinate. This is a great interactive tool by Sara Souiden, to help you <strong>learn how SVG coordinates work<\/strong>. Using the <code>viewBox<\/code> and <code>preserveAspectRatio<\/code> on SVG, guided by orange and purple lines and a handy ruler, you can play while learning how SVG coordinates function.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/svg-tools\/svg-coordinates-system.jpg\" alt=\"svg-graphics-tools\" height=\"401\" width=\"700\"><\/figure>\n<h3><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/b64.io\/\">b64<\/a><\/h3>\n<p><strong>b64<\/strong> is a simple tool to <strong>optimize images then turn them into the base64 format<\/strong>. You can drop your SVG images (other formats such as JPG and PNG work, too), then grab the CSS with a base64 background-image as a result.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/svg-tools\/b64.jpg\" alt=\"svg-graphics-tools\" height=\"334\" width=\"700\"><\/figure>\n<h3><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/github.com\/svg\/svgo\">SVGO<\/a><\/h3>\n<p>SVG that is exported may contain <strong>unnecessary information<\/strong> which can be removed without affecting the rendering result. If you want to <strong>remove editor metadata, comments or hidden elements<\/strong>, you can use SVGO.<\/p>\n<p>You can install SVGO  via npm, <code>$ [sudo] npm install -g svgo<\/code> or use the <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/github.com\/svg\/svgo-gui\">GUI version<\/a> that offers drag and drop to process your SVG optimation.<\/p>\n<h3><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/jakearchibald.github.io\/svgomg\/\">SVG OMG<\/a><\/h3>\n<p><strong>SVG OMG<\/strong> turns the command line of <strong>SVGO<\/strong> (the previous tool) into a <strong>GUI version<\/strong> that more intuitive and easy to use. Just <strong>toggle the buttons<\/strong> to activate or deactivate each feature. In the end, you can grab the result as image files and code as well.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/svg-tools\/svgomg.jpg\" alt=\"svg-graphics-tools\" height=\"508\" width=\"700\"><\/figure>\n<h3><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.creativefabrica.com\/shapecloud\/\">Shapecloud word art generator<\/a><\/h3>\n<p>Shapecloud is an online tool that makes it possible for you to create personalized word art designs by <strong>uploading your own shape via an SVG file<\/strong> (you can also choose a standard shape).<\/p>\n<p>To upload an SVG in Shapecloud, click the \u2018<strong>Upload shape<\/strong>\u2018. Then click \u2018Click to select the file\u2019 and choose the SVG file you want to upload.<\/p>\n<p>When you are done creating, you can instantly download the design to your computer, phone, or tablet. The design can be downloaded as a PNG, SVG, or PDF file.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/svg-tools\/shapecloud.jpg\" alt=\"shapecloud\" height=\"594\" width=\"800\"><\/figure>\n<h3><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/github.com\/davidderaedt\/SVG-NOW\">SVG Now<\/a><\/h3>\n<p>When you work on Illustrator, the exported SVG  contains some information that is not necessary. With this tool, you will <strong>get the optimized version of your exported SVG<\/strong> right from your Illustrator workspace. This tool adds a panel with some options to optimize SVG.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/svg-tools\/svgnow.jpg\" alt=\"svg-graphics-tools\" height=\"333\" width=\"700\"><\/figure>\n<h3><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.drawsvg.org\/doc\/svg2png.html\">SVG to PNG converter<\/a><\/h3>\n<p>Want to <strong>export SVG files to PNG form<\/strong>? Without opening applications like Illustrator to do so? Use this SVG to PNG Converter tool to get image outputs in PNG format and also PNG Base64 data URI if you need it.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/svg-tools\/svg-to-png.jpg\" alt=\"svg-graphics-tools\" height=\"513\" width=\"773\"><\/figure>\n<h3><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/svgcircus.com\/\">SVG Circus<\/a><\/h3>\n<p>If you think loader animations are cool, now you can create it easily by utilizing SVG with <strong>SVG Circus<\/strong>. The tools enable you to <strong>make your own loader, spinner, or anything similar using looped animation<\/strong>. Set the \u2018Actor\u2019, position, size, color, and others from the panel, then export to get the results.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/svg-tools\/svg-circus.jpg\" alt=\"svg-graphics-tools\" height=\"446\" width=\"700\"><\/figure>\n<h3><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/github.com\/svg-sprite\/svg-sprite\">SVG Sprite<\/a><\/h3>\n<p>SVG Sprite is an <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/nodejs.org\/en\/\">Node.js<\/a> module, which optimizes <strong>a bunch of SVG files, <\/strong>and <strong>bakes them into SVG sprite-types<\/strong> including traditional CSS sprites for background and\/or foreground images, SVG stacks and more.<\/p>\n<h3><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/berjon.com\/quasi\/\">Quasi<\/a><\/h3>\n<p>With quasi you can <strong>generate <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/en.wikipedia.org\/wiki\/Quasicrystal\">Quasicrystal<\/a> images<\/strong> like what you see below. This generator is experimental, but the results are definitely cool. You can play around by changing the value of the option, then download the results with the \u2018Save SVG\u2019 button.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/svg-tools\/quasi.jpg\" alt=\"svg-graphics-tools\" height=\"440\" width=\"598\"><\/figure>\n<h3><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.kennethcachia.com\/plain-pattern\/app\/\">Plain Pattern<\/a><\/h3>\n<p><strong>Creating patterns with SVG<\/strong> has never been easier or more fun. Upload your image, scale down or change the spacing, rotate and recolor until you get a beautiful pattern. You can preview the result before downloading it.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/svg-tools\/plain-pattern.jpg\" alt=\"svg-graphics-tools\" height=\"444\" width=\"681\"><\/figure>\n<h3><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/trianglify.io\/\">Trianglify Generator<\/a><\/h3>\n<p><strong>Create beautiful SVG geometric patterns<\/strong> with <strong>Trianglify Generator<\/strong>. You can set the color randomness\/variant, granularity size, and choose a color palette to work with. This tool is a GUI version of <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/qrohlf.com\/trianglify\/\">Trianglify<\/a>.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/svg-tools\/trianglify.jpg\" alt=\"svg-graphics-tools\" height=\"394\" width=\"700\"><\/figure>\n<h3><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/hackingui.com\/export-photoshop-layer-to-svg\/\">Export PSD to SVG<\/a><\/h3>\n<p>If you use Photoshop as the image editor for your work, sometimes you might need to <strong>convert your design on the Photoshop workspace into SVG<\/strong>, which is an unsupported format in Photoshop. Download the Script to this tool, then copy to the <code>Adobe Photoshop\/presets\/scripts<\/code> folder.<\/p>\n<p>Rename a vector layer name with the SVG extension (e.g. layer1 become layer1.svg), and you can now run the script from <strong>File &gt; Scripts &gt; PS to SVG<\/strong>.<\/p>\n<h3><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/jorgeatgu.github.io\/svg-filters\/\">SVG Filters<\/a><\/h3>\n<p>Do you know that with SVG, you are able to add effects such as hue, saturation, blur, linear color overlay, and many others to images? Here is a tool that <strong>visualizes these effects, then gives you a snippet<\/strong> to make it easy to <strong>embed the effect<\/strong> into your project.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/svg-tools\/svg-filters.jpg\" alt=\"svg-graphics-tools\" height=\"426\" width=\"700\"><\/figure>\n<h3><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/alexk111.github.io\/SVG-Morpheus\/\">SVG Morpheous<\/a><\/h3>\n<p><strong>SVG Morpheous<\/strong> is a JavaScript library that allows you to <strong>morph an SVG icon from one shape to another<\/strong>. You can set the easing effect, duration of transition animations, and also rotation direction.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/svg-tools\/svg-morpheous.gif\" alt=\"morpheous\" height=\"237\" width=\"700\"><\/figure>\n<h3><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/cssplant.com\/clip-path-generator\">Clip path generator<\/a><\/h3>\n<p>SVG allows you to click the image clip with Shape. This is quite easy if the shape is in the form of a square or a circle. But what <strong>if the shape is one with a lot of points or is a polygonal shape<\/strong>? That\u2019s where you need this Clip Path Generator tool.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/svg-tools\/clip-path-generator.jpg\" alt=\"svg-graphics-tools\" height=\"425\" width=\"700\"><\/figure>\n<h3><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/gionkunz.github.io\/chartist-js\/\">Chartist.js<\/a><\/h3>\n<p>Chartist.js is a library to <strong>create highly customizable responsive charts<\/strong>. It utilizes SVG to display the charts, which also can be animated using SMIL. With this library, you are able to create line chart, pie chart, bar chart and other types of charts, and even add <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/gionkunz.github.io\/chartist-js\/examples.html\">animation<\/a> to them.<\/p>\n<h3><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/gigacore.github.io\/demos\/svg-stroke-dasharray-generator\/\">SVG stroke dash generator<\/a><\/h3>\n<p>This is a simple tool to <strong>generate dashed lines<\/strong> utilizing SVG <code>stroke-dasharray<\/code>. First, choose one dash type from the list, then customize it in terms of width, height, rotation, or color. Afterward, you can grab the HTML code and CSS to apply this dashed line in your project.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/svg-tools\/svg-dash-generator.jpg\" alt=\"svg-graphics-tools\" height=\"417\" width=\"700\"><\/figure>\n<h3><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/editor.method.ac\/\">Method Draw: A Simple SVG Editor<\/a><\/h3>\n<p>Method Draw is a web-based SVG editor with an <strong>intuitive interface that comes with tools on both sides of the canvas<\/strong>. You can draw lines, and shapes, input text or built-in use shapes, then edit the properties of the drawn objects. Export the image in SVG format (also comes in SVG base64 format) or  save it directly in PNG.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/svg-tools\/method-draw.jpg\" alt=\"svg-graphics-tools\" height=\"436\" width=\"700\"><\/figure>","protected":false},"excerpt":{"rendered":"<p>SVG is gaining popularity in web design these days and you can use tools like Illustrator or Inkscape to create SVG graphics. But when it comes to web design, we should always optimize for lighter results. Here are the 20 tools that you can use to work with SVG quickly and efficiently. We have mostly&hellip;<\/p>\n","protected":false},"author":141,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[3393],"tags":[2175],"topic":[4520],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v22.8 (Yoast SEO v27.6) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>20 Free SVG Tools for Better Graphics (Updated) - Hongkiat<\/title>\n<meta name=\"description\" content=\"SVG is gaining popularity in web design these days and you can use tools like Illustrator or Inkscape to create SVG graphics. But when it comes to web\" \/>\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.hongkiat.com\/blog\/svg-tools\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"20 Free SVG Tools for Better Graphics (Updated)\" \/>\n<meta property=\"og:description\" content=\"SVG is gaining popularity in web design these days and you can use tools like Illustrator or Inkscape to create SVG graphics. But when it comes to web\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/svg-tools\/\" \/>\n<meta property=\"og:site_name\" content=\"Hongkiat\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/hongkiatcom\" \/>\n<meta property=\"article:published_time\" content=\"2021-03-04T13:33:01+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-08-17T09:45:19+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/svg-tools\/svg-coordinates-system.jpg\" \/>\n<meta name=\"author\" content=\"Agus\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@bagusdesain\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Agus\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/svg-tools\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/svg-tools\\\/\"},\"author\":{\"name\":\"Agus\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/b23dad06815dff0bcc222088bed549dd\"},\"headline\":\"20 Free SVG Tools for Better Graphics (Updated)\",\"datePublished\":\"2021-03-04T13:33:01+00:00\",\"dateModified\":\"2022-08-17T09:45:19+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/svg-tools\\\/\"},\"wordCount\":1056,\"commentCount\":11,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/svg-tools\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/svg-tools\\\/svg-coordinates-system.jpg\",\"keywords\":[\"Scalable Vector Graphics (SVG)\"],\"articleSection\":[\"Toolkit\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/svg-tools\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/svg-tools\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/svg-tools\\\/\",\"name\":\"20 Free SVG Tools for Better Graphics (Updated) - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/svg-tools\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/svg-tools\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/svg-tools\\\/svg-coordinates-system.jpg\",\"datePublished\":\"2021-03-04T13:33:01+00:00\",\"dateModified\":\"2022-08-17T09:45:19+00:00\",\"description\":\"SVG is gaining popularity in web design these days and you can use tools like Illustrator or Inkscape to create SVG graphics. But when it comes to web\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/svg-tools\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/svg-tools\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/svg-tools\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/svg-tools\\\/svg-coordinates-system.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/svg-tools\\\/svg-coordinates-system.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/svg-tools\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"20 Free SVG Tools for Better Graphics (Updated)\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"name\":\"Hongkiat\",\"description\":\"Tech and Design Tips\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\",\"name\":\"Hongkiat.com\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"contentUrl\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"width\":1200,\"height\":799,\"caption\":\"Hongkiat.com\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/hongkiatcom\",\"https:\\\/\\\/x.com\\\/hongkiat\",\"https:\\\/\\\/www.pinterest.com\\\/hongkiat\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/b23dad06815dff0bcc222088bed549dd\",\"name\":\"Agus\",\"description\":\"Agus is a music enthusiast, backpacker and code writer. He has an ambition to build a Skynet on top of HTML and CSS.\",\"sameAs\":[\"https:\\\/\\\/x.com\\\/bagusdesain\"],\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/agus\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"20 Free SVG Tools for Better Graphics (Updated) - Hongkiat","description":"SVG is gaining popularity in web design these days and you can use tools like Illustrator or Inkscape to create SVG graphics. But when it comes to web","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.hongkiat.com\/blog\/svg-tools\/","og_locale":"en_US","og_type":"article","og_title":"20 Free SVG Tools for Better Graphics (Updated)","og_description":"SVG is gaining popularity in web design these days and you can use tools like Illustrator or Inkscape to create SVG graphics. But when it comes to web","og_url":"https:\/\/www.hongkiat.com\/blog\/svg-tools\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2021-03-04T13:33:01+00:00","article_modified_time":"2022-08-17T09:45:19+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/svg-tools\/svg-coordinates-system.jpg","type":"","width":"","height":""}],"author":"Agus","twitter_card":"summary_large_image","twitter_creator":"@bagusdesain","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Agus","Est. reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/svg-tools\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/svg-tools\/"},"author":{"name":"Agus","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/b23dad06815dff0bcc222088bed549dd"},"headline":"20 Free SVG Tools for Better Graphics (Updated)","datePublished":"2021-03-04T13:33:01+00:00","dateModified":"2022-08-17T09:45:19+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/svg-tools\/"},"wordCount":1056,"commentCount":11,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/svg-tools\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/svg-tools\/svg-coordinates-system.jpg","keywords":["Scalable Vector Graphics (SVG)"],"articleSection":["Toolkit"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/svg-tools\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/svg-tools\/","url":"https:\/\/www.hongkiat.com\/blog\/svg-tools\/","name":"20 Free SVG Tools for Better Graphics (Updated) - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/svg-tools\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/svg-tools\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/svg-tools\/svg-coordinates-system.jpg","datePublished":"2021-03-04T13:33:01+00:00","dateModified":"2022-08-17T09:45:19+00:00","description":"SVG is gaining popularity in web design these days and you can use tools like Illustrator or Inkscape to create SVG graphics. But when it comes to web","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/svg-tools\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/svg-tools\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/svg-tools\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/svg-tools\/svg-coordinates-system.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/svg-tools\/svg-coordinates-system.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/svg-tools\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"20 Free SVG Tools for Better Graphics (Updated)"}]},{"@type":"WebSite","@id":"https:\/\/www.hongkiat.com\/blog\/#website","url":"https:\/\/www.hongkiat.com\/blog\/","name":"Hongkiat","description":"Tech and Design Tips","publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hongkiat.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.hongkiat.com\/blog\/#organization","name":"Hongkiat.com","url":"https:\/\/www.hongkiat.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","contentUrl":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","width":1200,"height":799,"caption":"Hongkiat.com"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/hongkiatcom","https:\/\/x.com\/hongkiat","https:\/\/www.pinterest.com\/hongkiat\/"]},{"@type":"Person","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/b23dad06815dff0bcc222088bed549dd","name":"Agus","description":"Agus is a music enthusiast, backpacker and code writer. He has an ambition to build a Skynet on top of HTML and CSS.","sameAs":["https:\/\/x.com\/bagusdesain"],"url":"https:\/\/www.hongkiat.com\/blog\/author\/agus\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-6lU","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/24422","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/users\/141"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=24422"}],"version-history":[{"count":3,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/24422\/revisions"}],"predecessor-version":[{"id":61749,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/24422\/revisions\/61749"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=24422"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=24422"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=24422"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=24422"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}