{"id":178,"date":"2017-09-11T13:15:43","date_gmt":"2017-09-11T13:15:43","guid":{"rendered":"https:\/\/www.fla-shop.com\/blog\/?p=178"},"modified":"2023-09-06T11:29:10","modified_gmt":"2023-09-06T11:29:10","slug":"how-to-embed-svg-map-into-wordpress","status":"publish","type":"post","link":"https:\/\/www.fla-shop.com\/blog\/how-to-embed-svg-map-into-wordpress\/","title":{"rendered":"How to embed the SVG map into WordPress?"},"content":{"rendered":"\n<div class=\"wp-block-group article_sm_block article_contents_list\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n<h2 class=\"wp-block-heading\">Contents<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"#what-is-svg\">What is SVG? Pros and cons of the image format<\/a><\/li>\n\n\n\n<li><a href=\"#svg-on-the-web\">Using SVG on the web<\/a><\/li>\n\n\n\n<li><a href=\"#where-to-get-the-svg-map\">From where to get the SVG map<\/a>\n<ul class=\"wp-block-list\">\n<li><a href=\"#how-to-prepare-a-map\">How to prepare a map on a vector graphics editor<\/a><\/li>\n\n\n\n<li><a href=\"#ready-svg-map\">From where to get a ready SVG map<\/a> <\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><a href=\"#embed-svg-on-wordpress\">Easy to embed interactive SVG maps in WordPress with a plugin<\/a><\/li>\n\n\n\n<li><a href=\"#methods-of-embedding-svg\">Other methods of embedding SVG maps on WordPress<\/a>\n<ul class=\"wp-block-list\">\n<li><a href=\"#embedding-from-another-site\">Embedding a map published on another site<\/a><\/li>\n\n\n\n<li><a href=\"#svg-as-image\">Embedding SVG map as a regular image<\/a><\/li>\n\n\n\n<li><a href=\"#svg-as-html\">Embedding with HTML code<\/a><\/li>\n\n\n\n<li><a href=\"#embed-svg-with-img-tag\">Embedding with the &lt;img&gt; tag<\/a><\/li>\n\n\n\n<li><a href=\"#embed-svg-with-iframe-tag\">Embedding with the &lt;iframe&gt; tag<\/a><\/li>\n\n\n\n<li><a href=\"#embed-svg-with-embed-tag\">Embedding with the &lt;embed&gt; tag<\/a><\/li>\n\n\n\n<li><a href=\"#embed-svg-with-object-tag\">Embedding with the &lt;object&gt; tag<\/a><\/li>\n\n\n\n<li><a href=\"#inline-svg-embedding\">Inline SVG embedding<\/a> <\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><a href=\"#what-is-next\">What is next?<\/a><\/li>\n<\/ul>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group article_sm_block\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n<h2 class=\"wp-block-heading\" id=\"what-is-svg\">What is SVG? Pros and cons of the image format<\/h2>\n\n\n\n<p>SVG \u2014 Scalable Vector Graphics \u2014 one of the subsets of the XML markup language developed by W3C to describe vector graphics used on web resources. It has been being developed since 1999. The current version \u2013 SVG 2.<\/p>\n\n\n\n<p>The main benefit of the SVG is that it is a vector graphic. Unlike raster, a vector image can be viewed on devices with different screen resolutions without changing quality. The vector map can be enlarged to infinity &#8211; objects on it will not be distorted, large &#8220;muddy&#8221; pixels, which are specific to raster images that are enlarged several times, will not appear.<\/p>\n\n\n\n<p>SVG files are uploaded to the site as static images. With the help of JavaScript, HTML, and CSS, they can be made interactive, adding any info and beautiful animation. Therefore, SVG is mostly used to create dynamic effects, animation, and background on adaptive sites. Other pros of the SVG:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>simplicity in using \u2013 even free graphic editors can be used to edit and create this format, interactivity can be configured on typical text code editors;<\/li>\n\n\n\n<li>small size: SVG files can be well compressed since XML is used for their property description;<\/li>\n\n\n\n<li>scalability;<\/li>\n<\/ul>\n\n\n\n<p>Cons of using SVG:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>SVG cannot be used to view photos;<\/li>\n\n\n\n<li>Old browsers, like Internet Explorer 8 or older ones, do not support it;<\/li>\n<\/ul>\n\n\n\n<p><a name=\"svg-on-the-web\"><\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Using SVG on the web<\/h2>\n\n\n\n<p>With the help of HTML, CSS, and SVG, it is possible to draw simple figures on a code page: lines, circles, ellipses, rectangles, and polygons. To do so &lt;line&gt;, &lt;circle&gt;,&lt;ellipse&gt;, &lt;rect&gt;, &lt;polygon&gt;, &lt;polyline&gt; and &lt;path&gt; elements are used. SVG figures are created with the coordinates X and Y-axis. Figures can be transformed, colored, and animated. SVG that are drawn on graphic editors are more popular. On the internet, you can find them as:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>logos;<\/li>\n\n\n\n<li>icons;<\/li>\n\n\n\n<li>background image;<\/li>\n\n\n\n<li>infographics;<\/li>\n\n\n\n<li>visual effects and animations;<\/li>\n\n\n\n<li>interactive maps.<\/li>\n<\/ul>\n\n\n\n<p><a name=\"where-to-get-the-svg-map\"><\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">From where to get the SVG map<\/h2>\n\n\n\n<p>To add an SVG map to WordPress, you can:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>prepare the map on your own;<\/li>\n\n\n\n<li>download ready files from the internet;<\/li>\n\n\n\n<li>use a map that is published on another site;<\/li>\n\n\n\n<li>install a plugin.<\/li>\n<\/ul>\n\n\n\n<p>Based on SVG, we created <a href=\"https:\/\/www.fla-shop.com\/wordpressmaps.php\">Map Plugins for WordPress<\/a> \u2014 interactive maps with the ability to customize. You do not need any additional knowledge to install and configure them.<\/p>\n\n\n\n<p><a name=\"how-to-prepare-a-map\"><\/a><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">How to prepare a map on a vector graphics editor<\/h3>\n\n\n\n<p>You can draw a map on any vector graphic editor \u2013 like Inkscape or Adobe Illustrator. To do so, find and download a suitable raster map from the internet. Open it using the vector graphics editor and use it as a template. Create a new transparent layer, put it under the template. Using the Pen or Brush tool, circle the border of the desired objects. With the help of the &#8220;Fill bounded areas&#8221; tool paint the map. Save the ready map on an SVG file type. An example of the SVG map, rendered via Inkscape:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/www.fla-shop.com\/blog\/wp-content\/uploads\/2020\/09\/01-svg-file-opened-in-inkscape.png\" alt=\"SVG file opened in Inkscape.png\"\/><figcaption class=\"wp-element-caption\">SVG file opened in Inkscape.png<\/figcaption><\/figure>\n\n\n\n<p><a name=\"ready-svg-map\"><\/a><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">From where to get a ready SVG map<\/h3>\n\n\n\n<p>SVG is a common web-graphics format. Finding and downloading for free with this format is easy &#8211; just enter the query \u00abfree SVG map download\u00bb into a search bar. Ready maps will save you time: you will not have to work on a vector graphics editor. Examples of sites with catalogs of vector maps<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/www.fla-shop.com\/blog\/wp-content\/uploads\/2020\/09\/03-svg-maps-on-wikimedia.jpg\" alt=\"svg maps on wikimedia\"\/><figcaption class=\"wp-element-caption\">svg maps on wikimedia<\/figcaption><\/figure>\n\n\n\n<p><a href=\"https:\/\/commons.wikimedia.org\/wiki\/Category:SVG_maps\">https:\/\/commons.wikimedia.org\/wiki\/Category:SVG_maps<\/a><\/p>\n\n\n\n<p>Many of the SVG maps on Wikimedia are in the public domain and they can freely be used for any purpose. Some maps have limited usage for commercial purposes. Due to that, make sure to check the license type before downloading the file!<\/p>\n\n\n\n<p>Recently, we have created a free collection of simple SVG geographic maps, such as <a href=\"https:\/\/www.fla-shop.com\/svg\/usa\/\">USA SVG Map<\/a> and others.<\/p>\n\n\n\n<p><a name=\"embed-svg-on-wordpress\"><\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Easy to embed interactive SVG maps in WordPress with a plugin<\/h2>\n\n\n\n<p>SVG maps are \u2013 great tool on capable hands. If you are an experienced web developer, know HTML, CSS, JavaScript, and popular frameworks as well, can find and eliminate bugs in code, then with ease, you can develop a convenient and useful interactive map based on SVG. Isn\u2019t that unreal for you? Don\u2019t worry, Fla-shop.com has an exciting and profitable offer for you. An example of our interactive map<\/p>\n\n\n\r\n        <!-- start Fla-shop.com HTML5 Map -->\r\n        <div class='usaHtml5Mapbottom htmlMapResponsive' style='max-width:980px; width: 100%'><div id='usa-html5-map-map-container_0' class='usaHtml5MapContainer' data-map-variable='usahtml5map_map_0'><\/div><div style='clear:both; height: 20px;'><\/div>\r\n            <style>\r\n                #usa-html5-map-map-container_0 {\r\n                    \r\n                }\r\n                #usa-html5-map-map-container_0 .fm-tooltip-name {\r\n\t\t\t\tcolor: #000000;\n\t\t\t\tfont-size: 20px;\n\r\n}\r\n#usa-html5-map-map-container_0 .fm-tooltip-comment {\r\n\r\n}\r\n#usa-html5-map-map-container_0 .fm-tooltip-comment p {\r\n\r\n}\r\n                @media only screen and (max-width: 480px) {\r\n                    #usa-html5-map-map-container_0 {\r\n                        float: none;\r\n                        width: 100%;\r\n                    }\r\n                }\r\n            <\/style><script type=\"text\/javascript\">\r\n            jQuery(function(){\r\n                var hightlighted = null;\r\n                usahtml5map_map_0 = new FlaShopUSAMap(usahtml5map_map_cfg_0);\r\n                \r\n                usahtml5map_map_0.draw('usa-html5-map-map-container_0');\r\n                usahtml5map_map_0.on('mousein', function(ev, sid, map) {\r\n                    if (hightlighted && sid != hightlighted) {\r\n                        map.stateHighlightOut(hightlighted);\r\n                        hightlighted = null;\r\n                    }\r\n                });\r\n                \r\n                \r\n\r\n                var html5map_onclick = function(ev, sid, map) {\r\n                var cfg      = usahtml5map_map_cfg_0;\r\n                var link     = map.fetchStateAttr(sid, 'link');\r\n                var is_group = map.fetchStateAttr(sid, 'group');\r\n                var popup_id = map.fetchStateAttr(sid, 'popup-id');\r\n                var is_group_info = false;\r\n\r\n                if (typeof cfg.map_data[sid] !== 'undefined')\r\n                        jQuery('#usa-html5-map-selector_0').val(sid);\r\n                    else\r\n                        jQuery('#usa-html5-map-selector_0').val('');\r\n\r\n                if (is_group==undefined) {\r\n\r\n                    if (sid.substr(0,1)=='p') {\r\n                        popup_id = map.fetchPointAttr(sid, 'popup_id');\r\n                        link         = map.fetchPointAttr(sid, 'link');\r\n                    }\r\n\r\n                } else if (typeof cfg.groups[is_group]['ignore_link'] == 'undefined' || ! cfg.groups[is_group].ignore_link)  {\r\n                    link = cfg.groups[is_group].link;\r\n                    popup_id = cfg.groups[is_group]['popup_id'];\r\n                    is_group_info = true;\r\n                }\r\n                if (link=='#popup') {\r\n\r\n                    if (typeof SG_POPUP_DATA == \"object\") {\r\n                        if (popup_id in SG_POPUP_DATA) {\r\n\r\n                            SGPopup.prototype.showPopup(popup_id,false);\r\n\r\n                        } else {\r\n\r\n                            jQuery.ajax({\r\n                                type: 'POST',\r\n                                url: 'https:\/\/www.fla-shop.com\/blog\/' + 'index.php' + '?map_id=0' + '&usahtml5map_get_popup',\r\n                                data: {popup_id:popup_id},\r\n                            }).done(function(data) {\r\n                                jQuery('body').append(data);\r\n                                SGPopup.prototype.showPopup(popup_id,false);\r\n                            });\r\n\r\n                        }\r\n                    }\r\n                    else if (typeof SGPBPopup == \"function\") {\r\n                        var popup = SGPBPopup.createPopupObjById(popup_id);\r\n                        popup.prepareOpen();\r\n                        popup.open();\r\n                    }\r\n\r\n                    return false;\r\n                }\r\n                if (link == '#info') {\r\n                    var id = is_group_info ? is_group : (sid.substr(0,1)=='p' ? sid : map.fetchStateAttr(sid, 'id'));\r\n                    jQuery('#usa-html5-map-state-info_0').html('Loading...');\r\n                    jQuery.ajax({\r\n                        type: 'POST',\r\n                        url: (is_group_info ? 'https:\/\/www.fla-shop.com\/blog\/' + 'index.php' + '?map_id=0' + '&usahtml5map_get_group_info=' : 'https:\/\/www.fla-shop.com\/blog\/' + 'index.php' + '?map_id=0' + '&usahtml5map_get_state_info=') + id,\r\n                        success: function(data, textStatus, jqXHR){\r\n                            jQuery('#usa-html5-map-state-info_0').html(data);\r\n                            \r\n                        },\r\n                        dataType: 'text'\r\n                    });\r\n\r\n                    return false;\r\n                }\r\n\r\n                    if (ev===null && link!='') {\r\n                        if (!jQuery('.html5dummilink').length) {\r\n                            jQuery('body').append('<a href=\"#\" class=\"html5dummilink\" style=\"display:none\"><\/a>');\r\n                        }\r\n\r\n                        jQuery('.html5dummilink').attr('href',link).attr('target',(map.fetchStateAttr(sid, 'isNewWindow') ? '_blank' : '_self'))[0].click();\r\n\r\n                    }\r\n\r\n                };\r\n                usahtml5map_map_0.on('click',html5map_onclick);\r\n\r\n                \r\n\r\n            });\r\n            <\/script><div id='usa-html5-map-state-info_0' class='usaHtml5MapStateInfo'><\/div>\r\n            <\/div>\r\n            <div style='clear: both'><\/div>\r\n            <!-- end HTML5 Map -->\r\n    \n\n\n\n<p>We have been working with WordPress interactive maps for a long time and can handle all the problems with programming, debugging, and rendering. It means that we can save a lot of time. For better map productivity, we make it a separate WordPress plugin that allows putting a map into a blog post or page in several clicks. Sounds good, right?<\/p>\n\n\n\n<p>If you want to see some inspiring examples of how our clients use WordPress interactive maps, please visit our <a href=\"https:\/\/www.fla-shop.com\/showcase\/\">Showcase gallery<\/a>.<\/p>\n\n\n\n<p>But we don\u2019t only make typical interactive maps. If you want to embed your custom map into a website, you can order it right now. Check out the examples of <a href=\"https:\/\/www.fla-shop.com\/development\/\">custom interactive maps<\/a>.<\/p>\n\n\n\n<p><a name=\"methods-of-embedding-svg\"><\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Other methods of embedding SVG maps on WordPress<\/h2>\n\n\n\n<p>SVG maps on WordPress can be embedded via the following methods:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>using an image from another site;<\/li>\n\n\n\n<li>pasting as an image from Media Library;<\/li>\n\n\n\n<li>adding like a code via the Custom HTML block editor;<\/li>\n<\/ul>\n\n\n\n<p><a name=\"embedding-from-another-site\"><\/a><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Embedding a map published on another site<\/h3>\n\n\n\n<p>The fastest method of embedding an SVG map to WordPress content is using images that are published on other sites. Find on the internet the suitable map and copy its URL. If you use Wikimedia Commons as a source, find the required region&#8217;s map using the search form on the site. For example, to get the USA map list, enter the query &#8220;USA SVG map&#8221; to a search bar.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/www.fla-shop.com\/blog\/wp-content\/uploads\/2020\/09\/05-search-on-wikimedia.jpg\" alt=\"search on wikimedia\"\/><\/figure>\n\n\n\n<p>Select the file from the search result and click its title. On the loaded page click \u201cUse this file\u201d.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/www.fla-shop.com\/blog\/wp-content\/uploads\/2020\/09\/06-usa-map-on-wikimedia.jpg\" alt=\"usa map on wikimedia\"\/><\/figure>\n\n\n\n<p>After that, as soon as the popup window loads, copy the link of the map from the File URL field.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/www.fla-shop.com\/blog\/wp-content\/uploads\/2020\/09\/07-file-url.jpg\" alt=\"file url\"\/><\/figure>\n\n\n\n<p>The copied link is needed to embed the maps on WordPress. To edit, create, or open a post (page) in the Gutenberg editor and select the Image block.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/www.fla-shop.com\/blog\/wp-content\/uploads\/2020\/09\/08-insert-image-in-gutenberg.jpg\" alt=\"insert image in gutenberg\"\/><\/figure>\n\n\n\n<p>On the settings of the Image block, click Import from URL button. Paste the link from the clipboard to the Paste or type the URL field and click the enter button.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/www.fla-shop.com\/blog\/wp-content\/uploads\/2020\/09\/09-inserting-image-from-url.jpg\" alt=\"inserting image from url\"\/><\/figure>\n\n\n\n<p>For instance, if you pasted the URL of the Wikimedia Commons file, obtained as described above, you can see the USA&#8217;s map on the editor.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/www.fla-shop.com\/blog\/wp-content\/uploads\/2020\/09\/10-image-in-wordpress-editor.jpg\" alt=\"image in wordpress editor\"\/><\/figure>\n\n\n\n<p>On a published post it will look like this:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/www.fla-shop.com\/blog\/wp-content\/uploads\/2020\/09\/11-svg-map-on-published-page.jpg\" alt=\"svg map on published page\"\/><\/figure>\n\n\n\n<p>Using the described algorithm, you can embed it into WordPress SVG maps from any resource.<\/p>\n\n\n\n<p><a name=\"svg-as-image\"><\/a><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Embedding an SVG map as a regular image<\/h3>\n\n\n\n<p>When you try to upload an SVG-formatted map to your site as a regular image, WordPress will tell you that this is not possible.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/www.fla-shop.com\/blog\/wp-content\/uploads\/2020\/09\/12-unsupported-file-type-notification.jpg\" alt=\"unsupported file type notification\"\/><\/figure>\n\n\n\n<p>To allow SVG file uploads in WordPress, refer to our guide on <a href=\"https:\/\/www.fla-shop.com\/blog\/svg-support-plugins\/\">enabling SVG support in WordPress<\/a>.<\/p>\n\n\n\n<p>If you don&#8217;t want to overload your site with unnecessary plugins, manually edit the <strong>functions.php<\/strong> file. On the site admin panel, go to Appearance, select the Theme Editor tool and open the <strong>functions.php<\/strong> file in it.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/www.fla-shop.com\/blog\/wp-content\/uploads\/2020\/09\/13-editing-functions-php.jpg\" alt=\"editing functions.php\"\/><\/figure>\n\n\n\n<p>Copy and paste the following code to the bottom of the file.<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: php; title: ; notranslate\" title=\"\">\n\/\/ Allow SVG\nadd_filter( 'wp_check_filetype_and_ext', function($data, $file, $filename, $mimes) {\n\n global $wp_version;\n if ( $wp_version !== '4.7.1' ) {\n   return $data;\n }\n\n $filetype = wp_check_filetype( $filename, $mimes );\n\n return &#x5B;\n   'ext'       =&amp;gt; $filetype&#x5B;'ext'],\n   'type'      =&amp;gt; $filetype&#x5B;'type'],\n   'proper_filename' =&amp;gt; $data&#x5B;'proper_filename']\n ];\n\n}, 10, 4 );\n\nfunction cc_mime_types( $mimes ){\n $mimes&#x5B;'svg'] = 'image\/svg+xml';\n return $mimes;\n}\nadd_filter( 'upload_mimes', 'cc_mime_types' );\n\nfunction fix_svg() {\n echo '&amp;lt;style type=\"text\/css\"&amp;gt;\n    .attachment-266x266, .thumbnail img {\n       width: 100% !important;\n       height: auto !important;\n    }\n    &amp;lt;\/style&amp;gt;';\n}\nadd_action( 'admin_head', 'fix_svg' );\n<\/pre><\/div>\n\n\n<p>Save the changes. Now you can upload SVG files to the Media Library and add them to the site content as regular images. An example of uploading and embedding a world map:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/www.fla-shop.com\/blog\/wp-content\/uploads\/2020\/09\/14-uploading-svg-image.jpg\" alt=\"uploading svg image\"\/><\/figure>\n\n\n\n<p>View of the map on Image block:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/www.fla-shop.com\/blog\/wp-content\/uploads\/2020\/09\/15-map-in-image-block.jpg\" alt=\"map in image block\"\/><\/figure>\n\n\n\n<p>On a published post the map looks like this:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/www.fla-shop.com\/blog\/wp-content\/uploads\/2020\/09\/16-page-view.jpg\" alt=\"page view\"\/><\/figure>\n\n\n\n<p><a name=\"svg-as-html\"><\/a><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Embedding with HTML code<\/h3>\n\n\n\n<p>Copy the link to the file to embed it into the site&#8217;s materials with the help of HTML code. The algorithm of getting links to the map from other web resources is described above. To copy the URL of the image, upload it to the Media Library of your WordPress site, navigate to the Media section of the admin panel, select the file and click it.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/www.fla-shop.com\/blog\/wp-content\/uploads\/2020\/09\/17-media-library.jpg\" alt=\"media library\"\/><\/figure>\n\n\n\n<p>The Attachment Details window will load. Copy link of the file from the Copy Link field.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/www.fla-shop.com\/blog\/wp-content\/uploads\/2020\/09\/18-attachment-details.jpg\" alt=\"attachment details\"\/><\/figure>\n\n\n\n<p>To embed an SVG file via Custom HTML block editor, use tags &lt;img&gt;, &lt;iframe&gt;, &lt;embed&gt;, &lt;object&gt; or the inline method \u2013 \u201cdirect\u201d embedding of the SVG file\u2019s code to the site\u2019s code.<\/p>\n\n\n\n<p><a name=\"embed-svg-with-img-tag\"><\/a><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Embedding with the &lt;img&gt; tag<\/h3>\n\n\n\n<p>On the Gutenberg editor, select Custom HTML block. While on HTM mode paste the following code:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: xml; title: ; notranslate\" title=\"\">\n&lt;img src=&quot;#&quot; alt=&quot;#&quot; height=&quot;#&quot; width=&quot;#&quot;&gt;\n<\/pre><\/div>\n\n\n<p>Replace the # symbol in the contents of the attributes of the IMG tag with the following info:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>src \u2013 link to the SVG map;<\/li>\n\n\n\n<li>alt \u2013 alternative text, which browser shows to the user if the map file is not available;<\/li>\n\n\n\n<li>height \u2013 the height of the image;<\/li>\n\n\n\n<li>width \u2013 width of the image;<\/li>\n<\/ul>\n\n\n\n<p>An example of the world map the code will be like this:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\n&amp;lt;img src=&quot;http:\/\/somedomain.com\/wp-content\/uploads\/2020\/06\/world-continents.svg&quot; alt=&quot;US SVG map&quot; height=&quot;400&quot; width=&quot;400&quot;&gt;\n<\/pre><\/div>\n\n\n<p>Check the result by switching the Custom HTML block to Preview mode.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/www.fla-shop.com\/blog\/wp-content\/uploads\/2020\/09\/19-image-in-custom-html.gif\" alt=\"image in custom html\"\/><\/figure>\n\n\n\n<p><a name=\"embed-svg-with-iframe-tag\"><\/a><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Embedding with the &lt;iframe&gt; tag<\/h3>\n\n\n\n<p>To embed a map to WordPress via &lt;iframe&gt; tag add the following code to the HTML field of the Custom HTML editor<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\n&amp;lt;iframe src=&quot;#&quot;&gt;Your browser does not support iframes&amp;lt;\/iframe&gt;\n<\/pre><\/div>\n\n\n<p>As in the previous example, replace the # symbol with the src content attribute with the link to your SVG map. This is how the code of the Fla-shop.com world map looks like:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\n&amp;lt;iframe src=&quot;http:\/\/somedomain.com\/wp-content\/uploads\/2020\/06\/world-continents.svg&quot; &gt;Your browser does not support iframes&amp;lt;\/iframe&gt;\n<\/pre><\/div>\n\n\n<p>The result of using this method:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/www.fla-shop.com\/blog\/wp-content\/uploads\/2020\/09\/20-iframe-in-custom-html.gif\" alt=\"iframe in custom html\"\/><\/figure>\n\n\n\n<p><a name=\"embed-svg-with-embed-tag\"><\/a><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Embedding with the &lt;embed&gt; tag<\/h3>\n\n\n\n<p>The &lt;embed&gt; tag is used on the \u201coutside\u201d resources \u2013 sites, applications, software. To add an SVG map with it to WordPress content, paste the code into the textbox of the Custom HTML block:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\n&amp;lt;embed type=&quot;image\/svg+xml&quot; src=&quot;#&quot; \/&gt;\n<\/pre><\/div>\n\n\n<p>Replace the # symbol within the src content attribute with the link to your SVG map. Code with the link world map:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\n&amp;lt;embed type=&quot;image\/svg+xml&quot; src=&quot;http:\/\/somedomain.com\/wp-content\/uploads\/2020\/06\/world-continents.svg&quot; \/&gt;\n<\/pre><\/div>\n\n\n<p>The browser will show the following to the user:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/www.fla-shop.com\/blog\/wp-content\/uploads\/2020\/09\/21-pageview-with-embedded-svg.jpg\" alt=\"pageview with embedded svg\"\/><\/figure>\n\n\n\n<p><a name=\"embed-svg-with-object-tag\"><\/a><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Embedding with the &lt;object&gt; tag<\/h3>\n\n\n\n<p>To add the file using &lt;object&gt; tag, paste the following code to the Custom HTML block, preliminary changing the # symbol in the data attribute to the link of the map.<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\n&amp;lt;object type=&quot;image\/svg+xml&quot; data=&quot;#&quot;&gt;Your browser does not support SVGs&amp;lt;\/object&gt;\n<\/pre><\/div>\n\n\n<p>An example of code with a link to the world map from Media Library to our test site:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\n&amp;lt;object type=&quot;image\/svg+xml&quot; data=&quot;http:\/\/somedomain.com\/wp-content\/uploads\/2020\/06\/world-continents.svg&quot;&gt;Your browser does not support SVGs&amp;lt;\/object&gt; \n<\/pre><\/div>\n\n\n<p>For a user, a page with a map embedded with a &lt;object&gt; tag looks like in the previous example.<\/p>\n\n\n\n<p><a name=\"inline-svg-embedding\"><\/a><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Inline SVG embedding<\/h3>\n\n\n\n<p>To use the inline method to embed SVG to a WordPress page, open the file in a text editor, and paste the following code between the tags &lt;svg&gt;&#8230;&lt;\/svg&gt;.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/www.fla-shop.com\/blog\/wp-content\/uploads\/2020\/09\/22-inline-svg-embedding.png\" alt=\"inline svg embedding\"\/><\/figure>\n\n\n\n<p>Paste copied code to the Custom HTML block. Press Preview to check the result. Save the post.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/www.fla-shop.com\/blog\/wp-content\/uploads\/2020\/09\/23-inline-code-custom-html.gif\" alt=\"inline code custom html\"\/><\/figure>\n\n\n\n<p>Pros of the inline method:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>page load time decreases;<\/li>\n\n\n\n<li>customizing and animating &lt;svg&gt; elements with the help of CSS;<\/li>\n\n\n\n<li>ability to add hyperlinks to any SVG elements, including map areas using the &lt;a&gt; tag.<\/li>\n<\/ul>\n\n\n\n<p><a name=\"what-is-next\"><\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">What is next?<\/h2>\n\n\n\n<p>So, you learned to embed SVG maps into WordPress. Now, based on these files, it is needed to build interactive maps. To do so, urgently start learning programming frameworks, UI\/UX, HTML, and CSS. Or make the best decision &#8211; give all work to professionals, which will save your time and patience. You can order an interactive map by following the link below.<\/p>\n\n\n\n<p class=\"has-text-align-center\"><a class=\"greenbutton\" href=\"https:\/\/www.fla-shop.com\/wordpressmaps.php\">Get Customizable SVG Map by Fla-shop.com!<\/a><\/p>\n<\/div><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Have you ever thought about how to embed the SVG map into WordPress? For example, the map with your infographics or a plan of your house? Today with the knowledge of suitable web technologies it is very easy&#8230;<\/p>\n","protected":false},"author":1,"featured_media":1358,"comment_status":"open","ping_status":"open","sticky":false,"template":"post1.php","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[38],"tags":[],"class_list":["post-178","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-useful-articles"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.5 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>How to embed the SVG map into WordPress? - Fla-Shop.com<\/title>\n<meta name=\"description\" content=\"How to embed SVG map into WP? With the knowledge of modern web-technologies it will not be a problem, but Fla-shop.com can save your time.\" \/>\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.fla-shop.com\/blog\/how-to-embed-svg-map-into-wordpress\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to embed the SVG map into WordPress? - Fla-Shop.com\" \/>\n<meta property=\"og:description\" content=\"How to embed SVG map into WP? With the knowledge of modern web-technologies it will not be a problem, but Fla-shop.com can save your time.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.fla-shop.com\/blog\/how-to-embed-svg-map-into-wordpress\/\" \/>\n<meta property=\"og:site_name\" content=\"Fla-Shop.com\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/flashopcom\/\" \/>\n<meta property=\"article:published_time\" content=\"2017-09-11T13:15:43+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-09-06T11:29:10+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.fla-shop.com\/blog\/wp-content\/uploads\/2017\/09\/svg-maps.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"630\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"admin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@flashop\" \/>\n<meta name=\"twitter:site\" content=\"@flashop\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"admin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"13 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.fla-shop.com\\\/blog\\\/how-to-embed-svg-map-into-wordpress\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.fla-shop.com\\\/blog\\\/how-to-embed-svg-map-into-wordpress\\\/\"},\"author\":{\"name\":\"admin\",\"@id\":\"https:\\\/\\\/www.fla-shop.com\\\/blog\\\/#\\\/schema\\\/person\\\/16214725e757dd92d37dbfe3e2a5db1e\"},\"headline\":\"How to embed the SVG map into WordPress?\",\"datePublished\":\"2017-09-11T13:15:43+00:00\",\"dateModified\":\"2023-09-06T11:29:10+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.fla-shop.com\\\/blog\\\/how-to-embed-svg-map-into-wordpress\\\/\"},\"wordCount\":1985,\"commentCount\":1,\"publisher\":{\"@id\":\"https:\\\/\\\/www.fla-shop.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.fla-shop.com\\\/blog\\\/how-to-embed-svg-map-into-wordpress\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.fla-shop.com\\\/blog\\\/wp-content\\\/uploads\\\/2017\\\/09\\\/svg-maps.jpg\",\"articleSection\":[\"Useful articles\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.fla-shop.com\\\/blog\\\/how-to-embed-svg-map-into-wordpress\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.fla-shop.com\\\/blog\\\/how-to-embed-svg-map-into-wordpress\\\/\",\"url\":\"https:\\\/\\\/www.fla-shop.com\\\/blog\\\/how-to-embed-svg-map-into-wordpress\\\/\",\"name\":\"How to embed the SVG map into WordPress? - Fla-Shop.com\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.fla-shop.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.fla-shop.com\\\/blog\\\/how-to-embed-svg-map-into-wordpress\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.fla-shop.com\\\/blog\\\/how-to-embed-svg-map-into-wordpress\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.fla-shop.com\\\/blog\\\/wp-content\\\/uploads\\\/2017\\\/09\\\/svg-maps.jpg\",\"datePublished\":\"2017-09-11T13:15:43+00:00\",\"dateModified\":\"2023-09-06T11:29:10+00:00\",\"description\":\"How to embed SVG map into WP? With the knowledge of modern web-technologies it will not be a problem, but Fla-shop.com can save your time.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.fla-shop.com\\\/blog\\\/how-to-embed-svg-map-into-wordpress\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.fla-shop.com\\\/blog\\\/how-to-embed-svg-map-into-wordpress\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.fla-shop.com\\\/blog\\\/how-to-embed-svg-map-into-wordpress\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.fla-shop.com\\\/blog\\\/wp-content\\\/uploads\\\/2017\\\/09\\\/svg-maps.jpg\",\"contentUrl\":\"https:\\\/\\\/www.fla-shop.com\\\/blog\\\/wp-content\\\/uploads\\\/2017\\\/09\\\/svg-maps.jpg\",\"width\":1200,\"height\":630,\"caption\":\"SVG Maps\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.fla-shop.com\\\/blog\\\/how-to-embed-svg-map-into-wordpress\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Blog\",\"item\":\"https:\\\/\\\/www.fla-shop.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to embed the SVG map into WordPress?\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.fla-shop.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.fla-shop.com\\\/blog\\\/\",\"name\":\"Fla-Shop.com\",\"description\":\"Interactive Maps, HTML5, WordPress, Map Use-cases \u2013 Fla-shop.com blog\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.fla-shop.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.fla-shop.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.fla-shop.com\\\/blog\\\/#organization\",\"name\":\"Fla-shop.com\",\"url\":\"https:\\\/\\\/www.fla-shop.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.fla-shop.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.fla-shop.com\\\/blog\\\/wp-content\\\/uploads\\\/2017\\\/06\\\/fla-shop_twitter_logo.jpg\",\"contentUrl\":\"https:\\\/\\\/www.fla-shop.com\\\/blog\\\/wp-content\\\/uploads\\\/2017\\\/06\\\/fla-shop_twitter_logo.jpg\",\"width\":128,\"height\":128,\"caption\":\"Fla-shop.com\"},\"image\":{\"@id\":\"https:\\\/\\\/www.fla-shop.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/flashopcom\\\/\",\"https:\\\/\\\/x.com\\\/flashop\",\"https:\\\/\\\/www.youtube.com\\\/user\\\/flashopcom\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.fla-shop.com\\\/blog\\\/#\\\/schema\\\/person\\\/16214725e757dd92d37dbfe3e2a5db1e\",\"name\":\"admin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/3bd8fdbd458f1b6c6dc6d8d2dc471f4986c4680b9492a7410ba0cc65f54527c7?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/3bd8fdbd458f1b6c6dc6d8d2dc471f4986c4680b9492a7410ba0cc65f54527c7?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/3bd8fdbd458f1b6c6dc6d8d2dc471f4986c4680b9492a7410ba0cc65f54527c7?s=96&d=mm&r=g\",\"caption\":\"admin\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to embed the SVG map into WordPress? - Fla-Shop.com","description":"How to embed SVG map into WP? With the knowledge of modern web-technologies it will not be a problem, but Fla-shop.com can save your time.","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.fla-shop.com\/blog\/how-to-embed-svg-map-into-wordpress\/","og_locale":"en_US","og_type":"article","og_title":"How to embed the SVG map into WordPress? - Fla-Shop.com","og_description":"How to embed SVG map into WP? With the knowledge of modern web-technologies it will not be a problem, but Fla-shop.com can save your time.","og_url":"https:\/\/www.fla-shop.com\/blog\/how-to-embed-svg-map-into-wordpress\/","og_site_name":"Fla-Shop.com","article_publisher":"https:\/\/www.facebook.com\/flashopcom\/","article_published_time":"2017-09-11T13:15:43+00:00","article_modified_time":"2023-09-06T11:29:10+00:00","og_image":[{"width":1200,"height":630,"url":"https:\/\/www.fla-shop.com\/blog\/wp-content\/uploads\/2017\/09\/svg-maps.jpg","type":"image\/jpeg"}],"author":"admin","twitter_card":"summary_large_image","twitter_creator":"@flashop","twitter_site":"@flashop","twitter_misc":{"Written by":"admin","Est. reading time":"13 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.fla-shop.com\/blog\/how-to-embed-svg-map-into-wordpress\/#article","isPartOf":{"@id":"https:\/\/www.fla-shop.com\/blog\/how-to-embed-svg-map-into-wordpress\/"},"author":{"name":"admin","@id":"https:\/\/www.fla-shop.com\/blog\/#\/schema\/person\/16214725e757dd92d37dbfe3e2a5db1e"},"headline":"How to embed the SVG map into WordPress?","datePublished":"2017-09-11T13:15:43+00:00","dateModified":"2023-09-06T11:29:10+00:00","mainEntityOfPage":{"@id":"https:\/\/www.fla-shop.com\/blog\/how-to-embed-svg-map-into-wordpress\/"},"wordCount":1985,"commentCount":1,"publisher":{"@id":"https:\/\/www.fla-shop.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.fla-shop.com\/blog\/how-to-embed-svg-map-into-wordpress\/#primaryimage"},"thumbnailUrl":"https:\/\/www.fla-shop.com\/blog\/wp-content\/uploads\/2017\/09\/svg-maps.jpg","articleSection":["Useful articles"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.fla-shop.com\/blog\/how-to-embed-svg-map-into-wordpress\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.fla-shop.com\/blog\/how-to-embed-svg-map-into-wordpress\/","url":"https:\/\/www.fla-shop.com\/blog\/how-to-embed-svg-map-into-wordpress\/","name":"How to embed the SVG map into WordPress? - Fla-Shop.com","isPartOf":{"@id":"https:\/\/www.fla-shop.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.fla-shop.com\/blog\/how-to-embed-svg-map-into-wordpress\/#primaryimage"},"image":{"@id":"https:\/\/www.fla-shop.com\/blog\/how-to-embed-svg-map-into-wordpress\/#primaryimage"},"thumbnailUrl":"https:\/\/www.fla-shop.com\/blog\/wp-content\/uploads\/2017\/09\/svg-maps.jpg","datePublished":"2017-09-11T13:15:43+00:00","dateModified":"2023-09-06T11:29:10+00:00","description":"How to embed SVG map into WP? With the knowledge of modern web-technologies it will not be a problem, but Fla-shop.com can save your time.","breadcrumb":{"@id":"https:\/\/www.fla-shop.com\/blog\/how-to-embed-svg-map-into-wordpress\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.fla-shop.com\/blog\/how-to-embed-svg-map-into-wordpress\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.fla-shop.com\/blog\/how-to-embed-svg-map-into-wordpress\/#primaryimage","url":"https:\/\/www.fla-shop.com\/blog\/wp-content\/uploads\/2017\/09\/svg-maps.jpg","contentUrl":"https:\/\/www.fla-shop.com\/blog\/wp-content\/uploads\/2017\/09\/svg-maps.jpg","width":1200,"height":630,"caption":"SVG Maps"},{"@type":"BreadcrumbList","@id":"https:\/\/www.fla-shop.com\/blog\/how-to-embed-svg-map-into-wordpress\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog","item":"https:\/\/www.fla-shop.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to embed the SVG map into WordPress?"}]},{"@type":"WebSite","@id":"https:\/\/www.fla-shop.com\/blog\/#website","url":"https:\/\/www.fla-shop.com\/blog\/","name":"Fla-Shop.com","description":"Interactive Maps, HTML5, WordPress, Map Use-cases \u2013 Fla-shop.com blog","publisher":{"@id":"https:\/\/www.fla-shop.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.fla-shop.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.fla-shop.com\/blog\/#organization","name":"Fla-shop.com","url":"https:\/\/www.fla-shop.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.fla-shop.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.fla-shop.com\/blog\/wp-content\/uploads\/2017\/06\/fla-shop_twitter_logo.jpg","contentUrl":"https:\/\/www.fla-shop.com\/blog\/wp-content\/uploads\/2017\/06\/fla-shop_twitter_logo.jpg","width":128,"height":128,"caption":"Fla-shop.com"},"image":{"@id":"https:\/\/www.fla-shop.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/flashopcom\/","https:\/\/x.com\/flashop","https:\/\/www.youtube.com\/user\/flashopcom"]},{"@type":"Person","@id":"https:\/\/www.fla-shop.com\/blog\/#\/schema\/person\/16214725e757dd92d37dbfe3e2a5db1e","name":"admin","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/3bd8fdbd458f1b6c6dc6d8d2dc471f4986c4680b9492a7410ba0cc65f54527c7?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/3bd8fdbd458f1b6c6dc6d8d2dc471f4986c4680b9492a7410ba0cc65f54527c7?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/3bd8fdbd458f1b6c6dc6d8d2dc471f4986c4680b9492a7410ba0cc65f54527c7?s=96&d=mm&r=g","caption":"admin"}}]}},"_links":{"self":[{"href":"https:\/\/www.fla-shop.com\/blog\/wp-json\/wp\/v2\/posts\/178","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.fla-shop.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.fla-shop.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.fla-shop.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.fla-shop.com\/blog\/wp-json\/wp\/v2\/comments?post=178"}],"version-history":[{"count":24,"href":"https:\/\/www.fla-shop.com\/blog\/wp-json\/wp\/v2\/posts\/178\/revisions"}],"predecessor-version":[{"id":2024,"href":"https:\/\/www.fla-shop.com\/blog\/wp-json\/wp\/v2\/posts\/178\/revisions\/2024"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.fla-shop.com\/blog\/wp-json\/wp\/v2\/media\/1358"}],"wp:attachment":[{"href":"https:\/\/www.fla-shop.com\/blog\/wp-json\/wp\/v2\/media?parent=178"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.fla-shop.com\/blog\/wp-json\/wp\/v2\/categories?post=178"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.fla-shop.com\/blog\/wp-json\/wp\/v2\/tags?post=178"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}