{"id":1507,"date":"2019-01-31T09:25:18","date_gmt":"2019-01-31T09:25:18","guid":{"rendered":"https:\/\/crocoblock.com\/knowledge-base\/?post_type=article&p=1507"},"modified":"2023-01-16T11:54:30","modified_gmt":"2023-01-16T11:54:30","slug":"how-to-display-svg-image-files-on-elementor-built-pages-with-jetelements-inline-svg-widget","status":"publish","type":"article","link":"https:\/\/crocoblock.com\/knowledge-base\/jetelements\/how-to-display-svg-image-files-on-elementor-built-pages-with-jetelements-inline-svg-widget\/","title":{"rendered":"How to Add the Inline SVG Widget to a Page"},"content":{"rendered":"\n

SVG<\/strong> stands for Scalable Vector Graphics,<\/strong> which is a vector image format for web designers. In comparison to other formats, it is almost weightless, and thus its loading speed is extremely high. The most important advantage of this format is its performance on different displays – no matter what the screen resolution is. You can scale it with no quality loss. This format is usually used for logos, background images, buttons, maps, diagrams, and pictures. With the Inline SVG widget of JetElements<\/a>, you can display attractive images in SVG format.<\/p>\n\n\n\n

\"SVG<\/div>\n\n\n\n

1<\/span> Step<\/b> \u2014 Add the Inline SVG widget to the page<\/strong><\/p>\n\n\n\n

First of all, log in to your website and open the page where you need to add an SVG image with the Elementor editor. Find the Inline SVG<\/strong> widget, and drop it into a new section.<\/p>\n\n\n\n

\"Inline<\/div>\n\n\n\n

2<\/span> Step<\/b> \u2014 Add the image<\/strong><\/p>\n\n\n\n

Go to the Content > SVG<\/em><\/strong> block to upload the image file from your hard drive. Here you can add a link in the URL<\/strong> section. After clicking the “Link Options” button you will also be able to check or uncheck Open in a new window<\/strong> and Add nofollow<\/strong> options. There will also appear a Custom Attributes<\/strong> field. To learn more about adding custom attributes to the links check this link<\/a>.<\/p>\n\n\n\n

\"Inline<\/div>\n\n\n\n

3<\/span> Step<\/b> \u2014 Go through the style settings<\/strong><\/p>\n\n\n\n

Proceed to the Style > SVG<\/em> <\/strong>block to get along with the design settings. <\/p>\n\n\n\n

    \n
  • Use Custom Width<\/strong>. If you turn this toggle on, the Width <\/strong>slider will appear lower on the menu. You can change the width manually by moving the sliderAdding the inline SVG widget to a page or typing in the value to the corresponding field;<\/li>\n\n\n\n
  • Use Aspect Ratio<\/strong>. If you want to re-scale the image but leave its proportions untouched – enable this toggle. The height of the image will be changed to fit the width;<\/li>\n\n\n\n
  • Use Custom Color<\/strong>. Enabling this toggle allows you to change the main colors of the SVG image;<\/li>\n\n\n\n
  • Remove Inline CSS<\/strong>. This toggle allowed you to remove all the CSS styling from the downloaded picture;<\/li>\n\n\n\n
  • Alignment<\/strong>. Here you can choose the position of the image in the section.<\/li>\n<\/ul>\n\n\n\n
    \"Inline<\/div>\n\n\n\n

    As long as everything is customized, click the “Publish<\/strong>” button.<\/p>\n\n\n\n

    Now you know how to add SVG graphic files to the Elementor editor when building pages. Keep reading our tutorials to learn more about JetPlugins and the widgets available within them!<\/p>\n","protected":false},"excerpt":{"rendered":"

    This tutorial explains how to use the JetElements Inline SVG widget to display SVG files on any part of the website you need.<\/p>\n","protected":false},"author":11,"featured_media":0,"template":"","format":"standard","builder-category":[],"article-category":[514],"yoast_head":"\nJetElements | How to display SVG images in Elementor | Crocoblock<\/title>\n<meta name=\"description\" content=\"Explore how to use the Inline SVG widget, available in JetElements plugin for Elementor. Just drop the widget and adjust the settings!\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/crocoblock.com\/knowledge-base\/jetelements\/how-to-display-svg-image-files-on-elementor-built-pages-with-jetelements-inline-svg-widget\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"JetElements | How to display SVG images in Elementor | Crocoblock\" \/>\n<meta property=\"og:description\" content=\"Explore how to use the Inline SVG widget, available in JetElements plugin for Elementor. Just drop the widget and adjust the settings!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/crocoblock.com\/knowledge-base\/jetelements\/how-to-display-svg-image-files-on-elementor-built-pages-with-jetelements-inline-svg-widget\/\" \/>\n<meta property=\"og:site_name\" content=\"Help Center\" \/>\n<meta property=\"article:modified_time\" content=\"2023-01-16T11:54:30+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2019\/01\/svg-example.png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jetelements\/how-to-display-svg-image-files-on-elementor-built-pages-with-jetelements-inline-svg-widget\/\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/jetelements\/how-to-display-svg-image-files-on-elementor-built-pages-with-jetelements-inline-svg-widget\/\",\"name\":\"JetElements | How to display SVG images in Elementor | Crocoblock\",\"isPartOf\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#website\"},\"datePublished\":\"2019-01-31T09:25:18+00:00\",\"dateModified\":\"2023-01-16T11:54:30+00:00\",\"description\":\"Explore how to use the Inline SVG widget, available in JetElements plugin for Elementor. Just drop the widget and adjust the settings!\",\"breadcrumb\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jetelements\/how-to-display-svg-image-files-on-elementor-built-pages-with-jetelements-inline-svg-widget\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/crocoblock.com\/knowledge-base\/jetelements\/how-to-display-svg-image-files-on-elementor-built-pages-with-jetelements-inline-svg-widget\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jetelements\/how-to-display-svg-image-files-on-elementor-built-pages-with-jetelements-inline-svg-widget\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/crocoblock.com\/knowledge-base\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Articles\",\"item\":\"https:\/\/crocoblock.com\/knowledge-base\/articles\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"How to Add the Inline SVG Widget to a Page\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#website\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/\",\"name\":\"Help Center\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/crocoblock.com\/knowledge-base\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#organization\",\"name\":\"Help Center\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg\",\"contentUrl\":\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg\",\"caption\":\"Help Center\"},\"image\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"JetElements | How to display SVG images in Elementor | Crocoblock","description":"Explore how to use the Inline SVG widget, available in JetElements plugin for Elementor. Just drop the widget and adjust the settings!","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:\/\/crocoblock.com\/knowledge-base\/jetelements\/how-to-display-svg-image-files-on-elementor-built-pages-with-jetelements-inline-svg-widget\/","og_locale":"en_US","og_type":"article","og_title":"JetElements | How to display SVG images in Elementor | Crocoblock","og_description":"Explore how to use the Inline SVG widget, available in JetElements plugin for Elementor. Just drop the widget and adjust the settings!","og_url":"https:\/\/crocoblock.com\/knowledge-base\/jetelements\/how-to-display-svg-image-files-on-elementor-built-pages-with-jetelements-inline-svg-widget\/","og_site_name":"Help Center","article_modified_time":"2023-01-16T11:54:30+00:00","og_image":[{"url":"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2019\/01\/svg-example.png"}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/crocoblock.com\/knowledge-base\/jetelements\/how-to-display-svg-image-files-on-elementor-built-pages-with-jetelements-inline-svg-widget\/","url":"https:\/\/crocoblock.com\/knowledge-base\/jetelements\/how-to-display-svg-image-files-on-elementor-built-pages-with-jetelements-inline-svg-widget\/","name":"JetElements | How to display SVG images in Elementor | Crocoblock","isPartOf":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/#website"},"datePublished":"2019-01-31T09:25:18+00:00","dateModified":"2023-01-16T11:54:30+00:00","description":"Explore how to use the Inline SVG widget, available in JetElements plugin for Elementor. Just drop the widget and adjust the settings!","breadcrumb":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/jetelements\/how-to-display-svg-image-files-on-elementor-built-pages-with-jetelements-inline-svg-widget\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/crocoblock.com\/knowledge-base\/jetelements\/how-to-display-svg-image-files-on-elementor-built-pages-with-jetelements-inline-svg-widget\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/crocoblock.com\/knowledge-base\/jetelements\/how-to-display-svg-image-files-on-elementor-built-pages-with-jetelements-inline-svg-widget\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/crocoblock.com\/knowledge-base\/"},{"@type":"ListItem","position":2,"name":"Articles","item":"https:\/\/crocoblock.com\/knowledge-base\/articles\/"},{"@type":"ListItem","position":3,"name":"How to Add the Inline SVG Widget to a Page"}]},{"@type":"WebSite","@id":"https:\/\/crocoblock.com\/knowledge-base\/#website","url":"https:\/\/crocoblock.com\/knowledge-base\/","name":"Help Center","description":"","publisher":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/crocoblock.com\/knowledge-base\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/crocoblock.com\/knowledge-base\/#organization","name":"Help Center","url":"https:\/\/crocoblock.com\/knowledge-base\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/","url":"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg","contentUrl":"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg","caption":"Help Center"},"image":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/article\/1507"}],"collection":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/article"}],"about":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/types\/article"}],"author":[{"embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/users\/11"}],"wp:attachment":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/media?parent=1507"}],"wp:term":[{"taxonomy":"builder-category","embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/builder-category?post=1507"},{"taxonomy":"article-category","embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/article-category?post=1507"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}