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
Both the SVG in the plugin panel and artboard are same.
Is there anyone to answer this?
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
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.
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
What does the actual SVG code look like?
I will Share the SVG code below.
<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…
Is there anyone to answer?
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.
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