{"id":10966,"date":"2019-06-11T10:47:06","date_gmt":"2019-06-11T10:47:06","guid":{"rendered":"https:\/\/ampforwp.com\/tutorials\/?post_type=ht_kb&#038;p=10966"},"modified":"2019-06-11T10:58:51","modified_gmt":"2019-06-11T10:58:51","slug":"how-to-show-svg-images-in-amp","status":"publish","type":"ht_kb","link":"https:\/\/ampforwp.com\/tutorials\/article\/how-to-show-svg-images-in-amp\/","title":{"rendered":"How to show SVG Images in AMP"},"content":{"rendered":"\n<p>The SVG images will have the default  width and height of 1px in WordPress like below the screenshot<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" loading=\"lazy\" width=\"1024\" height=\"477\" src=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/06\/svg-1-1024x477.png\" alt=\"\" class=\"wp-image-10967\" srcset=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/06\/svg-1-1024x477.png 1024w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/06\/svg-1-300x140.png 300w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/06\/svg-1-768x358.png 768w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/06\/svg-1-50x23.png 50w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/06\/svg-1-60x28.png 60w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/06\/svg-1-100x47.png 100w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/06\/svg-1.png 1344w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>If you want to display SVG image in AMP you need to enter the specific width and height like &#8211;<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" loading=\"lazy\" width=\"1024\" height=\"477\" src=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/06\/svg-2-1024x477.png\" alt=\"\" class=\"wp-image-10969\" srcset=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/06\/svg-2-1024x477.png 1024w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/06\/svg-2-300x140.png 300w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/06\/svg-2-768x358.png 768w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/06\/svg-2-50x23.png 50w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/06\/svg-2-60x28.png 60w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/06\/svg-2-100x47.png 100w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/06\/svg-2.png 1338w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h4><strong>The output of SVG Image in AMP<\/strong><\/h4>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" loading=\"lazy\" width=\"1024\" height=\"496\" src=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/06\/svg-3-1024x496.png\" alt=\"\" class=\"wp-image-10976\" srcset=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/06\/svg-3-1024x496.png 1024w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/06\/svg-3-300x145.png 300w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/06\/svg-3-768x372.png 768w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/06\/svg-3-50x24.png 50w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/06\/svg-3-60x29.png 60w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/06\/svg-3-100x48.png 100w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/06\/svg-3.png 1352w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p><strong>That\u2019s it for this tutorial!<\/strong><\/p>\n\n\n\n<p>We hope it helped you. If you have any feedback or questions, then please share them in the comments section below.<\/p>\n<div id=\"div-1\" class=\"hkb-feedback\">\n\t\t\t<strong class=\"ht-mobile-exit__title\">Ask your Questions Directly!<\/strong><br>\n\t\t\t<div class=\"hkb_widget_exit__content\" style=\"font-size: 14px;\">If you can't find the solutions in this article, then just ask us in the comments and we will answer it for you!<\/div>\n\t\t\t<a href=\"https:\/\/ampforwp.com\/support\/#contact\" id=\"button\" target=\"_blank\" rel=\"noopener noreferrer\"><button>Yes, I have a Question<\/button><\/a>\n\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>The SVG images will have the default width and height of 1px in WordPress like below the screenshot If you want to display SVG image in AMP you need to enter the specific width and height like &#8211; The output of SVG Image in AMP That\u2019s it for this tutorial!&#8230;<\/p>\n","protected":false},"author":18,"comment_status":"open","ping_status":"closed","template":"","format":"standard","meta":[],"ht-kb-category":[34],"ht-kb-tag":[],"_links":{"self":[{"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/ht-kb\/10966"}],"collection":[{"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/ht-kb"}],"about":[{"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/types\/ht_kb"}],"author":[{"embeddable":true,"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/comments?post=10966"}],"version-history":[{"count":7,"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/ht-kb\/10966\/revisions"}],"predecessor-version":[{"id":10977,"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/ht-kb\/10966\/revisions\/10977"}],"wp:attachment":[{"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/media?parent=10966"}],"wp:term":[{"taxonomy":"ht_kb_category","embeddable":true,"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/ht-kb-category?post=10966"},{"taxonomy":"ht_kb_tag","embeddable":true,"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/ht-kb-tag?post=10966"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}