{"id":15300,"date":"2012-10-24T21:01:13","date_gmt":"2012-10-24T13:01:13","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=15300"},"modified":"2025-04-24T17:18:48","modified_gmt":"2025-04-24T09:18:48","slug":"scalable-vector-graphic-css-styling","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/scalable-vector-graphic-css-styling\/","title":{"rendered":"How to Style SVG Images with CSS: A Simple Guide"},"content":{"rendered":"

Today, we\u2019re diving deeper into Scalable Vector Graphics (SVG)<\/a>. As mentioned in our previous post, one of the great things about SVG is that you can style it using CSS<\/a>.<\/p>\n

SVG Styling Properties<\/h2>\n

Styling SVGs is similar to styling regular HTML<\/a> elements. They even share some common properties. However, SVGs have unique properties that are separate from standard CSS.<\/p>\n

For example<\/strong>, in standard HTML, you can set the background color using either the background-color<\/code> or background<\/code> CSS properties<\/a>. In SVG, you use the fill<\/code> property to set the background color. Similarly, the border of an SVG element is set using the stroke<\/code> property, not the border<\/code> property like in HTML. You can find the complete list of SVG-specific properties here<\/a>.<\/p>\n

If you\u2019re familiar with vector editors like Adobe Illustrator<\/a>, you\u2019ll quickly realize that SVG property names are inspired by such editors.<\/p>\n

\"SVG<\/figure>\n

How to Style SVG Elements<\/h2>\n

There are multiple ways to add styles to SVG elements. Let\u2019s explore them:<\/p>\n

Suggested Reading:<\/strong> Understanding CSS Style Priority<\/a><\/p>\n

Presentation Attributes<\/h3>\n

If you\u2019ve looked at the complete list of SVG properties<\/a>, you\u2019ll know that you can add these directly to the SVG element to change its appearance. For instance, you can add the fill<\/strong> and stroke<\/strong> properties directly to a rect<\/code> element like this:<\/p>\n

\n<svg>\n  <rect width=\"200\" height=\"200\" fill=\"slategrey\" stroke=\"black\" stroke-width=\"3\"\/>\n<\/svg>\n<\/pre>\n
Here\u2019s what the rectangle will look like:<\/p>\n
\"Styled<\/figure>\n
Inline Style Sheet<\/h3>\n
You can also use the style<\/code> attribute to add styles. In the example below, we add fill<\/strong> and stroke<\/strong> to the rect<\/code> element, but this time within the style<\/code> attribute. We also rotate it using the CSS3 transform<\/code> property:<\/p>\n
\n<svg>\n  <rect x=\"203\" width=\"200\" height=\"200\" style=\"fill:slategrey; stroke:black; stroke-width:3; -webkit-transform: rotate(45deg);\"\/>\n<\/svg>\n<\/pre>\n
The rectangle will look the same, but it will also be rotated:<\/p>\n
\"Rotated<\/figure>\n
Internal Styles<\/h3>\n
Adding internal styles to SVG elements in an HTML document is similar to how you would do it for regular HTML elements. The example below demonstrates how to use the style<\/code> tag to style SVG elements in an HTML file.<\/p>\n
\n<style type=\"text\/css\" media=\"screen\">\n  #internal rect {\n    fill: slategrey;\n    stroke: black;\n    stroke-width: 3;\n    -webkit-transition: all 350ms;\n  }\n  #internal rect:hover {\n    fill: green;\n  }\n<\/style>\n<\/pre>\n
When working with SVG files, which are XML-based, you\u2019ll need to wrap your style declarations in cdata<\/code>. This is necessary to avoid conflicts with XML parsers. Here\u2019s how to do it:<\/p>\n
\n<style type=\"text\/css\" media=\"screen\">\n    #internal rect {\n      fill: slategrey;\n      stroke: black;\n      stroke-width: 3;\n      -webkit-transition: all 350ms;\n    }\n    #internal rect:hover {\n      fill: green;\n    }\n  ]]>\n<\/style>\n<\/pre>\n
The use of cdata<\/code> is essential, especially when your CSS includes characters like ><\/code> that could conflict with XML parsers. So, it\u2019s highly recommended to use cdata<\/code> when embedding styles in SVG files.<\/p>\n
\"Example<\/figure>\n
External Style Sheet<\/h3>\n
External style sheets work the same for SVG elements in HTML files.<\/p>\n
\n<link rel=\"stylesheet\" type=\"text\/css\" href=\"style.css\">\n<\/pre>\n
In SVG files, you\u2019ll need to use xml-stylesheet<\/code> to link the external style sheet, like this:<\/p>\n
\n<?xml-stylesheet type=\"text\/css\" href=\"style.css\"?>\n<\/pre>\n
Grouping Elements<\/h3>\n
You can group SVG elements using the <g><\/code> tag. This allows you to apply the same styles to all elements in the group. Here\u2019s an example:<\/p>\n
\n<g style=\"fill:slategrey; stroke:black; stroke-width:3; fill-opacity: 0.5;\">\n  <rect x=\"203\" width=\"200\" height=\"200\"\/>\n  <circle cx=\"120\" cy=\"106\" r=\"100\"\/>\n<\/g>\n<\/pre>\n
Both the rectangle and the circle will look the same.<\/p>\n
\"Example<\/figure>\n
Final Thoughts<\/h2>\n
We\u2019ve covered the basics of styling SVG elements with CSS. This is just one benefit of using SVG for graphics. Stay tuned for more insights in our next post.<\/p>\n
\n  View Demo<\/a>\n  Download Source<\/a>\n<\/div>","protected":false},"excerpt":{"rendered":"
Today, we\u2019re diving deeper into Scalable Vector Graphics (SVG). As mentioned in our previous post, one of the great things about SVG is that you can style it using CSS. SVG Styling Properties Styling SVGs is similar to styling regular HTML elements. They even share some common properties. However, SVGs have unique properties that are…<\/p>\n","protected":false},"author":113,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[3392,352],"tags":[507,2175],"topic":[4520],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"\nHow to Style SVG Images with CSS: A Simple Guide - Hongkiat<\/title>\n<meta name=\"description\" content=\"Today, we're diving deeper into Scalable Vector Graphics (SVG). As mentioned in our previous post, one of the great things about SVG is that you can style\" \/>\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\/scalable-vector-graphic-css-styling\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Style SVG Images with CSS: A Simple Guide\" \/>\n<meta property=\"og:description\" content=\"Today, we're diving deeper into Scalable Vector Graphics (SVG). As mentioned in our previous post, one of the great things about SVG is that you can style\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/scalable-vector-graphic-css-styling\/\" \/>\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=\"2012-10-24T13:01:13+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-04-24T09:18:48+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/scalable-vector-graphic-css-styling\/svg-editor.jpg\" \/>\n<meta name=\"author\" content=\"Thoriq Firdaus\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@tfirdaus\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Thoriq Firdaus\" \/>\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.hongkiat.com\\\/blog\\\/scalable-vector-graphic-css-styling\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/scalable-vector-graphic-css-styling\\\/\"},\"author\":{\"name\":\"Thoriq Firdaus\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e7948c7a175d211496331e4b6ce55807\"},\"headline\":\"How to Style SVG Images with CSS: A Simple Guide\",\"datePublished\":\"2012-10-24T13:01:13+00:00\",\"dateModified\":\"2025-04-24T09:18:48+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/scalable-vector-graphic-css-styling\\\/\"},\"wordCount\":474,\"commentCount\":33,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/scalable-vector-graphic-css-styling\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/scalable-vector-graphic-css-styling\\\/svg-editor.jpg\",\"keywords\":[\"CSS\",\"Scalable Vector Graphics (SVG)\"],\"articleSection\":[\"Coding\",\"Web Design\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/scalable-vector-graphic-css-styling\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/scalable-vector-graphic-css-styling\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/scalable-vector-graphic-css-styling\\\/\",\"name\":\"How to Style SVG Images with CSS: A Simple Guide - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/scalable-vector-graphic-css-styling\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/scalable-vector-graphic-css-styling\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/scalable-vector-graphic-css-styling\\\/svg-editor.jpg\",\"datePublished\":\"2012-10-24T13:01:13+00:00\",\"dateModified\":\"2025-04-24T09:18:48+00:00\",\"description\":\"Today, we're diving deeper into Scalable Vector Graphics (SVG). As mentioned in our previous post, one of the great things about SVG is that you can style\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/scalable-vector-graphic-css-styling\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/scalable-vector-graphic-css-styling\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/scalable-vector-graphic-css-styling\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/scalable-vector-graphic-css-styling\\\/svg-editor.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/scalable-vector-graphic-css-styling\\\/svg-editor.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/scalable-vector-graphic-css-styling\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to Style SVG Images with CSS: A Simple Guide\"}]},{\"@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\\\/e7948c7a175d211496331e4b6ce55807\",\"name\":\"Thoriq Firdaus\",\"description\":\"Thoriq is a writer for Hongkiat.com with a passion for web design and development. He is the author of Responsive Web Design by Examples, where he covered his best approaches in developing responsive websites quickly with a framework.\",\"sameAs\":[\"https:\\\/\\\/thoriq.com\",\"https:\\\/\\\/x.com\\\/tfirdaus\"],\"jobTitle\":\"Web Developer\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/thoriq\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"How to Style SVG Images with CSS: A Simple Guide - Hongkiat","description":"Today, we're diving deeper into Scalable Vector Graphics (SVG). As mentioned in our previous post, one of the great things about SVG is that you can style","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\/scalable-vector-graphic-css-styling\/","og_locale":"en_US","og_type":"article","og_title":"How to Style SVG Images with CSS: A Simple Guide","og_description":"Today, we're diving deeper into Scalable Vector Graphics (SVG). As mentioned in our previous post, one of the great things about SVG is that you can style","og_url":"https:\/\/www.hongkiat.com\/blog\/scalable-vector-graphic-css-styling\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2012-10-24T13:01:13+00:00","article_modified_time":"2025-04-24T09:18:48+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/scalable-vector-graphic-css-styling\/svg-editor.jpg","type":"","width":"","height":""}],"author":"Thoriq Firdaus","twitter_card":"summary_large_image","twitter_creator":"@tfirdaus","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Thoriq Firdaus","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/scalable-vector-graphic-css-styling\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/scalable-vector-graphic-css-styling\/"},"author":{"name":"Thoriq Firdaus","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e7948c7a175d211496331e4b6ce55807"},"headline":"How to Style SVG Images with CSS: A Simple Guide","datePublished":"2012-10-24T13:01:13+00:00","dateModified":"2025-04-24T09:18:48+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/scalable-vector-graphic-css-styling\/"},"wordCount":474,"commentCount":33,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/scalable-vector-graphic-css-styling\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/scalable-vector-graphic-css-styling\/svg-editor.jpg","keywords":["CSS","Scalable Vector Graphics (SVG)"],"articleSection":["Coding","Web Design"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/scalable-vector-graphic-css-styling\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/scalable-vector-graphic-css-styling\/","url":"https:\/\/www.hongkiat.com\/blog\/scalable-vector-graphic-css-styling\/","name":"How to Style SVG Images with CSS: A Simple Guide - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/scalable-vector-graphic-css-styling\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/scalable-vector-graphic-css-styling\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/scalable-vector-graphic-css-styling\/svg-editor.jpg","datePublished":"2012-10-24T13:01:13+00:00","dateModified":"2025-04-24T09:18:48+00:00","description":"Today, we're diving deeper into Scalable Vector Graphics (SVG). As mentioned in our previous post, one of the great things about SVG is that you can style","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/scalable-vector-graphic-css-styling\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/scalable-vector-graphic-css-styling\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/scalable-vector-graphic-css-styling\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/scalable-vector-graphic-css-styling\/svg-editor.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/scalable-vector-graphic-css-styling\/svg-editor.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/scalable-vector-graphic-css-styling\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to Style SVG Images with CSS: A Simple Guide"}]},{"@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\/e7948c7a175d211496331e4b6ce55807","name":"Thoriq Firdaus","description":"Thoriq is a writer for Hongkiat.com with a passion for web design and development. He is the author of Responsive Web Design by Examples, where he covered his best approaches in developing responsive websites quickly with a framework.","sameAs":["https:\/\/thoriq.com","https:\/\/x.com\/tfirdaus"],"jobTitle":"Web Developer","url":"https:\/\/www.hongkiat.com\/blog\/author\/thoriq\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-3YM","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/15300","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\/113"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=15300"}],"version-history":[{"count":3,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/15300\/revisions"}],"predecessor-version":[{"id":74122,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/15300\/revisions\/74122"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=15300"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=15300"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=15300"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=15300"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}