# How to use Svg in Xd plugin

**URL:** <https://forums.creativeclouddeveloper.com/t/how-to-use-svg-in-xd-plugin/3499>\
**Category:** Adobe XD\
**Created:** [August 13, 2021, 10:57am UTC](https://forums.creativeclouddeveloper.com/t/how-to-use-svg-in-xd-plugin/3499 "2021-08-13T10:57:28Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![Naresh](https://avatars.discourse-cdn.com/v4/letter/n/c68b51/32.png) [@Naresh](https://forums.creativeclouddeveloper.com/u/Naresh)\
**Post date:** [August 13, 2021, 10:57am UTC](https://forums.creativeclouddeveloper.com/t/how-to-use-svg-in-xd-plugin/3499/1 "2021-08-13T10:57:28Z")

</div>

When want to add some SVG in my plugin ,I get the exact SVG excluding the Text in it. Why it happens,I have used all tag of html including in my javascript but i cannot get the text in the SVG. Is there any way to get that. For your reference i will share a screenshot for comparison.

 ![image](https://us1.discourse-cdn.com/flex015/uploads/xdplugins/original/2X/f/f08a6d6f220c00912923b58ccbeea983605461bc.png)

Both the SVG in the plugin panel and artboard are same.

---

<div class="post-metadata">

**Author:** ![Naresh](https://avatars.discourse-cdn.com/v4/letter/n/c68b51/32.png) [@Naresh](https://forums.creativeclouddeveloper.com/u/Naresh)\
**Post date:** [August 17, 2021, 6:20am UTC](https://forums.creativeclouddeveloper.com/t/how-to-use-svg-in-xd-plugin/3499/2 "2021-08-17T06:20:04Z")

</div>

Is there anyone to answer this?

---

<div class="post-metadata">

**Author:** ![juniormfreitas](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/juniormfreitas/32/1612_2.png) [@juniormfreitas](https://forums.creativeclouddeveloper.com/u/juniormfreitas)\
**Post date:** [August 17, 2021, 2:46pm UTC](https://forums.creativeclouddeveloper.com/t/how-to-use-svg-in-xd-plugin/3499/3 "2021-08-17T14:46:58Z")

</div>

Hello Naresh,

Are you making this plugin using Webpack? If so you may want to install a webpack loader to make your app recognize SVGs. I guess this loader will solve your problem as  
long as you’re using webpack: [GitHub - asnowwolf/markup-inline-loader: a webpack loader to embed svg/MathML to html](https://github.com/asnowwolf/markup-inline-loader)

---

<div class="post-metadata">

**Author:** ![Naresh](https://avatars.discourse-cdn.com/v4/letter/n/c68b51/32.png) [@Naresh](https://forums.creativeclouddeveloper.com/u/Naresh)\
**Post date:** [September 1, 2021, 5:43am UTC](https://forums.creativeclouddeveloper.com/t/how-to-use-svg-in-xd-plugin/3499/4 "2021-09-01T05:43:53Z")

</div>

I am really sorry @juniormfreitas .I didn’t receive any notification of your message. To answer your question… i didn’t use any webpack… i am working with plain js . I will attach the code(main.js) below for your reference.

```auto

function show(event) {
	let Image=document.createElement('div');
	Image.innerHTML=`<img src="captcha.svg" />`
    event.node.appendChild(Image);
}

module.exports = {
    panels:{test: show} 
};

```

Kindly check what can be done over here

---

<div class="post-metadata">

**Author:** ![kerrishotts](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/kerrishotts/32/8_2.png) [@kerrishotts](https://forums.creativeclouddeveloper.com/u/kerrishotts)\
**Post date:** [September 1, 2021, 6:59pm UTC](https://forums.creativeclouddeveloper.com/t/how-to-use-svg-in-xd-plugin/3499/5 "2021-09-01T18:59:05Z")

</div>

What does the actual SVG code look like?

---

<div class="post-metadata">

**Author:** ![Naresh](https://avatars.discourse-cdn.com/v4/letter/n/c68b51/32.png) [@Naresh](https://forums.creativeclouddeveloper.com/u/Naresh)\
**Post date:** [September 1, 2021, 7:16pm UTC](https://forums.creativeclouddeveloper.com/t/how-to-use-svg-in-xd-plugin/3499/6 "2021-09-01T19:16:53Z")

</div>

I will Share the SVG code below.

```auto
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="271" height="73.242" viewBox="0 0 271 73.242">
	<g id="Group_15761" data-name="Group 15761" transform="translate(-509 -468.758)">
	  <g id="Group_15760" data-name="Group 15760">
		<g id="Rectangle_2990" data-name="Rectangle 2990" transform="translate(509 518)" fill="#fff" stroke="#c6cacc" stroke-width="1">
		  <rect width="271" height="24" stroke="none"/>
		  <rect x="0.5" y="0.5" width="270" height="23" fill="none"/>
		</g>
		<g id="Group_15444" data-name="Group 15444" transform="translate(0 2)">
		  <path id="Rectangle_181_copy" data-name="Rectangle 181 copy" d="M3067.858,3830h0l-2.97-2.771a6.21,6.21,0,0,1-.635-.264l2.75-2.567.857-.8v2.363a4.022,4.022,0,0,0,3.423-3.958,3.97,3.97,0,0,0-1.211-2.865l1.167-1.09a5.307,5.307,0,0,1,.281,7.629,6.14,6.14,0,0,1-3.66,1.858V3830Zm-5.095-4.05h0a5.305,5.305,0,0,1-.28-7.628,6.142,6.142,0,0,1,3.661-1.858V3814l2.969,2.771a6.208,6.208,0,0,1,.639.265l-1.893,1.767-1.715,1.6v-2.363a4.021,4.021,0,0,0-3.423,3.959,3.968,3.968,0,0,0,1.211,2.865l-1.167,1.089Z" transform="translate(-2329 -3293.997)" fill="#868686"/>
		  <path id="Forma_1" data-name="Forma 1" d="M3100.244,3829a.55.55,0,0,1-.5-.334.556.556,0,0,1,.289-.726,6.485,6.485,0,0,0-.013-11.875.544.544,0,0,1-.294-.3.557.557,0,0,1,.006-.425.545.545,0,0,1,.5-.335.539.539,0,0,1,.218.046,7.594,7.594,0,0,1,.014,13.909A.556.556,0,0,1,3100.244,3829Zm-4.426-.89a.55.55,0,0,1-.388-.162L3093,3824l-.055,0c-.615.017-1.095.026-1.427.026-.162,0-.287,0-.371-.006-.148-.007-.148-.018-.148-.022v-4h2l2.427-3.905a.544.544,0,0,1,.39-.164.538.538,0,0,1,.209.042c.188.077.974.55.974.776v10.5c0,.221-.748.726-.972.818A.555.555,0,0,1,3095.817,3828.109Zm3.5-1.3a.553.553,0,0,1-.218-1.061,4.088,4.088,0,0,0-.012-7.487.557.557,0,0,1-.288-.729.546.546,0,0,1,.722-.29,5.2,5.2,0,0,1,.014,9.521A.544.544,0,0,1,3099.313,3826.805Zm-.959-2.255a.55.55,0,0,1-.5-.333.556.556,0,0,1,.285-.728,1.624,1.624,0,0,0-.011-2.975.546.546,0,0,1-.295-.3.554.554,0,0,1,.005-.425.547.547,0,0,1,.505-.337.54.54,0,0,1,.214.044,2.691,2.691,0,0,1,1.459,1.507H3100v2h.014a2.7,2.7,0,0,1-1.441,1.5A.531.531,0,0,1,3098.354,3824.55Z" transform="translate(-2330 -3294)" opacity="0.502"/>
		  <image id="Layer_102" data-name="Layer 102" width="1" height="16" transform="translate(752 520)" opacity="0.502" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAQCAYAAADXnxW3AAAAAXNSR0IArs4c6QAAABJJREFUCB1jqK+v/8/EAATUIQDEygKbuGRVLAAAAABJRU5ErkJggg=="/>
		</g>
		<text id="Letters_are_not_case-sensitive" data-name="Letters are not case-sensitive" transform="translate(516 535)" fill="#333" font-size="11" font-family="Verdana" opacity="0.502"><tspan x="0" y="0">Letters are not case-sensitive</tspan></text>
	  </g>
	  <path id="Path_2822" data-name="Path 2822" d="M513.989,155.013c-1.437.574-.384,2.107-2.2,2.107s-6.228,0-7.281-.958-1.437-3.352-1.15-3.641,4.79-.287,6.994-.383,5.077,1.054,4.694-1.245-2.4-6.61-4.886-7.665-3.736.1-5.27.479-3.449-.287-3.928,1.15a54.6,54.6,0,0,0-1.053,6.131s-1.821.479-1.821-.479.863-4.6-.862-4.694-2.779.1-2.779-.766-.766-1.053-3.162.671a42.376,42.376,0,0,1-5.077,3.065s1.628-2.682-1.055-2.012a50.062,50.062,0,0,0-6.227,2.2,10.306,10.306,0,0,1-2.108-.192c-.574-.192.958-1.916-.958-1.533s-6.515,2.2-5.844,2.874,2.4,3.544,2.3,3.928a10.724,10.724,0,0,0,2.012,7.089,2.1,2.1,0,0,1-2.2-.1s-2.587-1.82-2.587-2.778-.766-8.527-.862-9.388-3.353.287-3.353-.575a8.762,8.762,0,0,1,.287-1.916s2.682,1.534,4.024.192,1.245-3.928-1.342-4.12-5.748-1.053-5.844.479-.383,2.779,1.724,3.641c.575.574.863,2.012,0,2.012s-3.832,0-3.257,2.013c1.437,1.437,3.736.479,3.641,1.533s-.766,5.365.383,6.9,2.013,2.587,2.013,2.587a36.464,36.464,0,0,0-4.12-.575c-1.724-.1-1.821-1.149-3.545-1.054s-2.778-.192-3.162-1.341-1.916-.288-2.107-3.162-.575-5.27.383-5.557,2.874-.192,4.6-.574c2.4-.863,3.066-1.725,1.15-2.108s-3.832-.863-4.6-2.108-.958-3.831-2.682-3.257-.766,3.162-2.4,3.353-3.545.1-4.311.479a9.679,9.679,0,0,1-3.162.191s-2.107-.67-2.012,1.15.479,4.12-.671,4.215a2.289,2.289,0,0,1-2.586-2.012c0-1.341-1.245-3.544-2.874-4.79s-4.886-1.724-5.844-.766.287,2.492,1.82,4.12,2.779,2.587,2.779,4.5.192,4.31-.575,4.694-1.436.384-1.628,1.437-1.724-.671-1.724-1.821-.479-1.245-1.629-.958-1.245,1.15-2.108,1.055-6.227-.192-5.269-1.437c3.162-.574,7.568-4.886,7.76-7.089s.479-3.641-2.2-5.173-8.239-3.258-10.155.958a23.4,23.4,0,0,0-1.916,4.31s-.384-.383-1.15-3.257-.383-6.131-3.352-6.994a8.15,8.15,0,0,0-5.27.192c-.575-2.4-4.024-1.724-4.311-1.821-1.628-1.436-2.682-.67-3.641.384s-2.3-.192-2.3,1.821.384,4.886-.384,4.789c-2.2.384-3.352,2.874-1.628,3.162s3.352.958,3.449,1.629.1,7.281-.479,8.335-1.437,1.245-1.916,1.82a1.1,1.1,0,0,0,1.342,1.629c1.436-.383,6.227-.1,7.472-.574s2.779-2.4,1.245-3.258-4.5-.191-4.886-1.054.1-2.2.192-3.162.766-6.131.958-6.8,3.832-1.054,5.557-.958.574-1.341-.575-1.533a21.383,21.383,0,0,0-4.886.1c-.785.083-2.012.1-2.3-1.054s.287-2.012,1.437-1.916,2.683-.287,3.449.958a1.23,1.23,0,0,0,2.3-.383c0-.863,1.724-.479,1.724-.479s1.629,4.407,2.874,5.748,1.342,2.587.479,3.353-.958,3.544-1.15,4.215a12.991,12.991,0,0,1-1.628,2.3c-.575.862-2.97,2.012-1.629,2.682s8.622,1.82,8.239.958a11.19,11.19,0,0,1-.384-3.929c.1-.766-.1-4.215.671-4.981s1.245-.1,1.245-.1-.479,5.173,1.821,7.089,8.814,2.491,11.3,2.107a8.289,8.289,0,0,0,6.994,1.534c1.533-.479,2.4-.287,2.2-1.245s-.958-1.15-.192-1.916,1.629-1.342,1.82-.863,3.353,5.078,6.994,5.94c3.736.862,5.078.862,4.982.383s-1.15-1.629-3.929-3.065a13.577,13.577,0,0,1-5.46-4.5c-1.629-2.108.479-3.162,1.342-3.928s2.107-1.724,2.2-2.587,2.586.384,3.449-.191a8.908,8.908,0,0,1,1.628-.863s.1,2.874.288,5.939,1.341,9.294,6.418,10.347,5.557.671,6.036-.575.383-1.533,1.341-1.054-.671,2.012,1.055,2.012,7.664.479,7.856-.1-.671-1.629.862-1.054,2.108,1.245,3.737,1.054,4.5.192,4.215-.958-2.108-2.778-3.736-3.544c-1.724-1.725-1.724-4.6-1.534-6.228s3.353-2.2,4.6-2.4,1.916,4.311,2.682,6.036,2.3,2.587,1.342,2.97-1.534,1.533-1.15,2.108,3.353.958,5.365.766,3.736-.671,2.682-2.3-5.173-4.79-4.79-6.514,3.832-5.749,5.557-6.515,1.245,0,1.245,0-.862,5.749.1,7.185,2.97,2.3,2.394,3.545a2.1,2.1,0,0,0,2.2,2.778c1.725,0,5.365-.383,4.216-1.82s-3.162-1.916-3.353-3.353a3.355,3.355,0,0,1,.574-2.4s0,1.245,3.162,3.353,2.971,2.682,4.791,2.682,7.089.287,7.568-.479S515.425,154.437,513.989,155.013Zm-6.515-7.952a4.853,4.853,0,0,1,3.832,1.916c.287.671-6.994.671-6.994.671C504.216,147.061,505.654,147.061,507.474,147.061Zm-89.672,4.12c-.384-1.629-.384-5.652,3.545-6.8,3.257.574,5.652,3.353,3.831,5.46s-2.586,2.779-3.928,2.971S418.186,152.81,417.8,151.181Z" transform="translate(190.707 333.12)" fill="#546c7d"/>
	</g>
  </svg>

```

I Don’t Know where the Issue is… I have also tried by replacing the Img tag with the whole SVG but i get the same issue… Is there any issue from Adobe end…

---

<div class="post-metadata">

**Author:** ![Naresh](https://avatars.discourse-cdn.com/v4/letter/n/c68b51/32.png) [@Naresh](https://forums.creativeclouddeveloper.com/u/Naresh)\
**Post date:** [September 6, 2021, 5:38am UTC](https://forums.creativeclouddeveloper.com/t/how-to-use-svg-in-xd-plugin/3499/7 "2021-09-06T05:38:31Z")

</div>

Is there anyone to answer?

---

<div class="post-metadata">

**Author:** ![kerrishotts](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/kerrishotts/32/8_2.png) [@kerrishotts](https://forums.creativeclouddeveloper.com/u/kerrishotts)\
**Post date:** [September 7, 2021, 4:52pm UTC](https://forums.creativeclouddeveloper.com/t/how-to-use-svg-in-xd-plugin/3499/8 "2021-09-07T16:52:05Z")

</div>

UXP does not support `text` and `tspan` elements in SVG. The SVG support in UXP is mainly intended for icons & graphics, not for text rendering.

I’m concerned that you’re trying to build an entire UI and experience solely using SVG – while UXP supports a decent subset of SVG, elements such as text and input fields must be handled outside of the SVG element. For example, for an input field, you’d use `<sp-textfield placeholder="Letters are not case sensitive"></sp-textfield>`, instead of using SVG only.

---

<div class="post-metadata">

**Author:** ![Naresh](https://avatars.discourse-cdn.com/v4/letter/n/c68b51/32.png) [@Naresh](https://forums.creativeclouddeveloper.com/u/Naresh)\
**Post date:** [September 13, 2021, 5:33pm UTC](https://forums.creativeclouddeveloper.com/t/how-to-use-svg-in-xd-plugin/3499/9 "2021-09-13T17:33:41Z")

</div>

Oh 🙁… Thank you for your reply @kerrishotts … Is there any way to change the Svg to png/jpeg so it will be helpful for me