{"id":4513,"date":"2018-02-13T12:51:36","date_gmt":"2018-02-13T11:51:36","guid":{"rendered":"https:\/\/florianbrinkmann.com\/en\/?p=4513"},"modified":"2020-02-09T11:28:50","modified_gmt":"2020-02-09T10:28:50","slug":"svg-use-element-javascript","status":"publish","type":"post","link":"https:\/\/florianbrinkmann.com\/en\/svg-use-element-javascript-4513\/","title":{"rendered":"Create \u00bbsvg\u00ab and \u00bbuse\u00ab element with JavaScript"},"content":{"rendered":"\n

Creating SVG elements dynamically via JavaScript is not as easy as I thought\u2026 In this post, I show how to create an SVG element with JS, that displays a symbol via a use<\/code> element.<\/p>\n\n\n\n\n\n\n\n

Preliminary remark<\/h2>\n\n\n\n

SVG elements can be displayed like that (there are more possibilities to display an SVG):<\/p>\n\n\n

<svg<\/span>><\/span>\n    <use<\/span> xlink:href<\/span>=\"#down-arrow\"<\/span>><\/span><\/use<\/span>><\/span>\n<\/svg<\/span>><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
There we reference an SVG element we want to show via the use<\/code> element (these three lines are the markup we want to create with JavaScript). In my concrete case, the above markup displays an arrow pointing to the bottom, that is included into the page with the following markup:<\/p>\n\n\n
<svg<\/span> xmlns<\/span>=\"http:\/\/www.w3.org\/2000\/svg\"<\/span> xmlns:xlink<\/span>=\"http:\/\/www.w3.org\/1999\/xlink\"<\/span> id<\/span>=\"hannover-svg-icons\"<\/span>><\/span>\n    <symbol<\/span> viewBox<\/span>=\"0 0 16 16\"<\/span> id<\/span>=\"down-arrow\"<\/span>><\/span>\n        <polygon<\/span> points<\/span>=\"11,6 7.5,9.5 4,6 3,7 7.5,11.5 12,7\"<\/span>><\/span><\/polygon<\/span>><\/span>\n    <\/symbol<\/span>><\/span>\n<\/svg<\/span>><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
The id<\/code> of the symbol<\/code> element is the same as the value for xlink:href<\/code>.<\/p>\n\n\n\n
The creation with JavaScript<\/h2>\n\n\n\n
If you know what to look for, it is not that hard. This is the complete code:<\/p>\n\n\n
var<\/span> svgElem = document<\/span>.createElementNS('http:\/\/www.w3.org\/2000\/svg'<\/span>, 'svg'<\/span>),\n\tuseElem = document<\/span>.createElementNS('http:\/\/www.w3.org\/2000\/svg'<\/span>, 'use'<\/span>);\n\nuseElem.setAttributeNS('http:\/\/www.w3.org\/1999\/xlink'<\/span>, 'xlink:href'<\/span>, '#down-arrow'<\/span>);\n\nsvgElem.appendChild(useElem);<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
It is important to know that you have to use document.createElementNS<\/code> with the correct namespace to create the svg<\/code> and use<\/code> element \u2013 it does not work with document.createElement<\/code>. Likewise, the setAttributeNS<\/code> method must be used for the xlink:href<\/code> attribute instead of setAttribute<\/code> \u2013 again with the correct Namespace.<\/p>\n\n\n\n
After this code was run, svgElem contains the SVG element with use<\/code> that can be used on the site.<\/p>\n","protected":false},"excerpt":{"rendered":"
Creating SVG elements dynamically via JavaScript is not as easy as I thought\u2026 In this post, I show how to create an SVG element with JS, that displays a symbol via a use element.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"wpf_show_in_dewp_planet_feed":false,"flobn_post_versions":"","webmentions_disabled_pings":false,"webmentions_disabled":false,"lazy_load_responsive_images_disabled":false,"footnotes":""},"categories":[6],"tags":[],"class_list":["post-4513","post","type-post","status-publish","format-standard","hentry","category-web-development"],"wp-worthy-pixel":{"ignored":false,"public":"5682600a2df34383ab4c8e1b16e6320e","server":"vg07.met.vgwort.de","url":"https:\/\/vg07.met.vgwort.de\/na\/5682600a2df34383ab4c8e1b16e6320e"},"wp-worthy-type":"normal","_links":{"self":[{"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/posts\/4513","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/comments?post=4513"}],"version-history":[{"count":4,"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/posts\/4513\/revisions"}],"predecessor-version":[{"id":5974,"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/posts\/4513\/revisions\/5974"}],"wp:attachment":[{"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/media?parent=4513"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/categories?post=4513"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/tags?post=4513"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}