{"id":2082,"date":"2021-06-21T07:46:08","date_gmt":"2021-06-21T07:46:08","guid":{"rendered":"https:\/\/elementor.com\/academy\/?p=2082"},"modified":"2023-02-22T09:28:32","modified_gmt":"2023-02-22T09:28:32","slug":"how-to-add-svg-files-to-elementor","status":"publish","type":"post","link":"https:\/\/elementor.com\/academy\/how-to-add-svg-files-to-elementor\/","title":{"rendered":"How to Add SVG Files"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"2082\" class=\"elementor elementor-2082\" data-elementor-post-type=\"post\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-30c49ca6 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"30c49ca6\" data-element_type=\"section\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-542e5ce1\" data-id=\"542e5ce1\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-36fd341 elementor-widget elementor-widget-video\" data-id=\"36fd341\" data-element_type=\"widget\" data-settings=\"{&quot;youtube_url&quot;:&quot;https:\\\/\\\/www.youtube.com\\\/watch?v=JKqqOl2AHpQ&quot;,&quot;video_type&quot;:&quot;youtube&quot;,&quot;controls&quot;:&quot;yes&quot;}\" data-widget_type=\"video.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-wrapper elementor-open-inline\">\n\t\t\t<div class=\"elementor-video\"><\/div>\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-712ab7ed elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"712ab7ed\" data-element_type=\"section\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-30adb5b9\" data-id=\"30adb5b9\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-19b8893e elementor-tabs-view-horizontal elementor-widget elementor-widget-tabs\" data-id=\"19b8893e\" data-element_type=\"widget\" data-widget_type=\"tabs.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-tabs\">\n\t\t\t<div class=\"elementor-tabs-wrapper\" role=\"tablist\" >\n\t\t\t\t\t\t\t\t\t<div id=\"elementor-tab-title-4311\" class=\"elementor-tab-title elementor-tab-desktop-title\" aria-selected=\"true\" data-tab=\"1\" role=\"tab\" tabindex=\"0\" aria-controls=\"elementor-tab-content-4311\" aria-expanded=\"false\">Overview<\/div>\n\t\t\t\t\t\t\t\t\t<div id=\"elementor-tab-title-4312\" class=\"elementor-tab-title elementor-tab-desktop-title\" aria-selected=\"false\" data-tab=\"2\" role=\"tab\" tabindex=\"-1\" aria-controls=\"elementor-tab-content-4312\" aria-expanded=\"false\">Transcript<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t\t<div class=\"elementor-tabs-content-wrapper\" role=\"tablist\" aria-orientation=\"vertical\">\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-tab-title elementor-tab-mobile-title\" aria-selected=\"true\" data-tab=\"1\" role=\"tab\" tabindex=\"0\" aria-controls=\"elementor-tab-content-4311\" aria-expanded=\"false\">Overview<\/div>\n\t\t\t\t\t<div id=\"elementor-tab-content-4311\" class=\"elementor-tab-content elementor-clearfix\" data-tab=\"1\" role=\"tabpanel\" aria-labelledby=\"elementor-tab-title-4311\" tabindex=\"0\" hidden=\"false\"><p>In this tutorial, we\u2019ll add SVG files to our WordPress website using Elementor.<\/p><p>You&#8217;ll learn how to:<br \/>\u2714\ufe0e Add SVG&#8217;s to the SVG File Library <br \/>\u2714\ufe0e Change your SVG style properties<br \/>\u2714\ufe0e And more!<\/p><\/div>\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-tab-title elementor-tab-mobile-title\" aria-selected=\"false\" data-tab=\"2\" role=\"tab\" tabindex=\"-1\" aria-controls=\"elementor-tab-content-4312\" aria-expanded=\"false\">Transcript<\/div>\n\t\t\t\t\t<div id=\"elementor-tab-content-4312\" class=\"elementor-tab-content elementor-clearfix\" data-tab=\"2\" role=\"tabpanel\" aria-labelledby=\"elementor-tab-title-4312\" tabindex=\"0\" hidden=\"hidden\"><p>hi oh it&#8217;s live from Elemento today<br \/>we&#8217;ll check out elementals SVG file<br \/>manager which is a featuring the icons<br \/>control library it gives you the ability<br \/>to upload your own SVG icons so you can<br \/>enjoy the power of SVG files and keep<br \/>your pages lightweight and lean let&#8217;s<br \/>check it out<br \/>SVG&#8217;s are scalable vector graphics which<br \/>is an xml-based vector image format for<br \/>two-dimensional graphics with support<br \/>for interactivity and animation the cool<br \/>thing about these files is that they&#8217;re<br \/>extremely lightweight and can be scaled<br \/>up or down without any loss of<br \/>resolution or blurriness to use it<br \/>simply drag in any widget with an icon<br \/>control in it then on top of the icon<br \/>placeholder click the upload SVG button<br \/>a warning pop-up will appear<br \/>explaining that SVG files from unknown<br \/>sources may contain malicious code and<br \/>post potential security risks elementals<br \/>SVG module will do its best to sanitize<br \/>the files upload it to your site but<br \/>it&#8217;s best to upload SVG files only from<br \/>known and trusted sources after<br \/>understanding the risks involved<br \/>click enable now go ahead and upload<br \/>your SVG icon file once uploaded<br \/>elemental sanitizes it removes any<br \/>possible malicious code and leaves only<br \/>the skeleton of the required image after<br \/>the upload is done it will appear in the<br \/>SVG&#8217;s media library it&#8217;s important to<br \/>know that SVG&#8217;s are inserted into the<br \/>page as inline code so in order to take<br \/>full advantage of elemental styling<br \/>controls it&#8217;s recommended to upload<br \/>SVG&#8217;s without any inline styling such as<br \/>fills and strokes well that&#8217;s it now you<br \/>know how to use elementals SVG file<br \/>manager and upload your own SVG icons so<br \/>you can enjoy the power of SVG files and<br \/>keep your pages lightweight and lean<br \/>have fun playing around don&#8217;t forget to<br \/>subscribe to our youtube channel for<br \/>more tips and tutorials see you later<\/p><\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Overview Transcript Overview In this tutorial, we\u2019ll add SVG files to our WordPress website using Elementor. You\u2019ll learn how to: \u2714\ufe0e Add SVG\u2019s to the SVG File Library \u2714\ufe0e Change your SVG style properties \u2714\ufe0e And more! Transcript hi oh it\u2019s live from Elemento today we\u2019ll check out elementals SVG file manager which is a [&hellip;]<\/p>\n","protected":false},"author":8,"featured_media":4249,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"elementor_theme","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[41],"class_list":["post-2082","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-design-layout","tag-guides-tutorials"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.8 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>How to Add SVG Files - Academy<\/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:\/\/elementor.com\/academy\/how-to-add-svg-files-to-elementor\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Add SVG Files - Academy\" \/>\n<meta property=\"og:description\" content=\"Overview Transcript Overview In this tutorial, we\u2019ll add SVG files to our WordPress website using Elementor. You\u2019ll learn how to: \u2714\ufe0e Add SVG\u2019s to the SVG File Library \u2714\ufe0e Change your SVG style properties \u2714\ufe0e And more! Transcript hi oh it\u2019s live from Elemento today we\u2019ll check out elementals SVG file manager which is a [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/elementor.com\/academy\/how-to-add-svg-files-to-elementor\/\" \/>\n<meta property=\"og:site_name\" content=\"Academy\" \/>\n<meta property=\"article:published_time\" content=\"2021-06-21T07:46:08+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-02-22T09:28:32+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/SVG-Files-Libraries.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1923\" \/>\n\t<meta property=\"og:image:height\" content=\"1081\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Hodaya\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Hodaya\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Add SVG Files - Academy","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:\/\/elementor.com\/academy\/how-to-add-svg-files-to-elementor\/","og_locale":"en_US","og_type":"article","og_title":"How to Add SVG Files - Academy","og_description":"Overview Transcript Overview In this tutorial, we\u2019ll add SVG files to our WordPress website using Elementor. You\u2019ll learn how to: \u2714\ufe0e Add SVG\u2019s to the SVG File Library \u2714\ufe0e Change your SVG style properties \u2714\ufe0e And more! Transcript hi oh it\u2019s live from Elemento today we\u2019ll check out elementals SVG file manager which is a [&hellip;]","og_url":"https:\/\/elementor.com\/academy\/how-to-add-svg-files-to-elementor\/","og_site_name":"Academy","article_published_time":"2021-06-21T07:46:08+00:00","article_modified_time":"2023-02-22T09:28:32+00:00","og_image":[{"width":1923,"height":1081,"url":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/SVG-Files-Libraries.jpg","type":"image\/jpeg"}],"author":"Hodaya","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Hodaya"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/elementor.com\/academy\/how-to-add-svg-files-to-elementor\/#article","isPartOf":{"@id":"https:\/\/elementor.com\/academy\/how-to-add-svg-files-to-elementor\/"},"author":{"name":"Hodaya","@id":"https:\/\/elementor.com\/academy\/#\/schema\/person\/ff9f2661f3df53ae5842a9ad15853d1c"},"headline":"How to Add SVG Files","datePublished":"2021-06-21T07:46:08+00:00","dateModified":"2023-02-22T09:28:32+00:00","mainEntityOfPage":{"@id":"https:\/\/elementor.com\/academy\/how-to-add-svg-files-to-elementor\/"},"wordCount":381,"publisher":{"@id":"https:\/\/elementor.com\/academy\/#organization"},"image":{"@id":"https:\/\/elementor.com\/academy\/how-to-add-svg-files-to-elementor\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/SVG-Files-Libraries.jpg","keywords":["Guides and Tutorials"],"articleSection":["Design \/ Layout"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/elementor.com\/academy\/how-to-add-svg-files-to-elementor\/","url":"https:\/\/elementor.com\/academy\/how-to-add-svg-files-to-elementor\/","name":"How to Add SVG Files - Academy","isPartOf":{"@id":"https:\/\/elementor.com\/academy\/#website"},"primaryImageOfPage":{"@id":"https:\/\/elementor.com\/academy\/how-to-add-svg-files-to-elementor\/#primaryimage"},"image":{"@id":"https:\/\/elementor.com\/academy\/how-to-add-svg-files-to-elementor\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/SVG-Files-Libraries.jpg","datePublished":"2021-06-21T07:46:08+00:00","dateModified":"2023-02-22T09:28:32+00:00","breadcrumb":{"@id":"https:\/\/elementor.com\/academy\/how-to-add-svg-files-to-elementor\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/elementor.com\/academy\/how-to-add-svg-files-to-elementor\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/academy\/how-to-add-svg-files-to-elementor\/#primaryimage","url":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/SVG-Files-Libraries.jpg","contentUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/SVG-Files-Libraries.jpg","width":1923,"height":1081},{"@type":"BreadcrumbList","@id":"https:\/\/elementor.com\/academy\/how-to-add-svg-files-to-elementor\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Elementor","item":"https:\/\/elementor.com\/"},{"@type":"ListItem","position":2,"name":"Academy","item":"https:\/\/elementor.com\/academy\/"},{"@type":"ListItem","position":3,"name":"Design \/ Layout","item":"https:\/\/elementor.com\/academy\/design-layout\/"},{"@type":"ListItem","position":4,"name":"How to Add SVG Files"}]},{"@type":"WebSite","@id":"https:\/\/elementor.com\/academy\/#website","url":"https:\/\/elementor.com\/academy\/","name":"Elementor Academy","description":"Page Builder for WordPress","publisher":{"@id":"https:\/\/elementor.com\/academy\/#organization"},"alternateName":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/02\/Elementor-Logo.png","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/elementor.com\/academy\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/elementor.com\/academy\/#organization","name":"Elementor Academy","alternateName":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/02\/Elementor-Logo.png","url":"https:\/\/elementor.com\/academy\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/academy\/#\/schema\/logo\/image\/","url":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2022\/11\/e-logo.svg","contentUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2022\/11\/e-logo.svg","width":490,"height":85,"caption":"Elementor Academy"},"image":{"@id":"https:\/\/elementor.com\/academy\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/elementor.com\/academy\/#\/schema\/person\/ff9f2661f3df53ae5842a9ad15853d1c","name":"Hodaya","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/academy\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/324f2d5cff44331b747d766f10e31793b1e29ad4f98f129d409760191f88ccc5?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/324f2d5cff44331b747d766f10e31793b1e29ad4f98f129d409760191f88ccc5?s=96&d=mm&r=g","caption":"Hodaya"},"url":"https:\/\/elementor.com\/academy\/author\/hodaya\/"}]}},"_links":{"self":[{"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/posts\/2082","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/users\/8"}],"replies":[{"embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/comments?post=2082"}],"version-history":[{"count":1,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/posts\/2082\/revisions"}],"predecessor-version":[{"id":9522,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/posts\/2082\/revisions\/9522"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/media\/4249"}],"wp:attachment":[{"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/media?parent=2082"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/categories?post=2082"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/tags?post=2082"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}