# Loading SVGs from a database

**URL:** <https://forum.inductiveautomation.com/t/loading-svgs-from-a-database/42619>\
**Category:** Ignition\
**Tags:** ignition80\
**Created:** [January 26, 2021, 4:32pm UTC](https://forum.inductiveautomation.com/t/loading-svgs-from-a-database/42619 "2021-01-26T16:32:13Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![grietveld](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/grietveld/32/6984_2.png) [@grietveld](https://forum.inductiveautomation.com/u/grietveld)\
**Post date:** [January 26, 2021, 4:32pm UTC](https://forum.inductiveautomation.com/t/loading-svgs-from-a-database/42619/1 "2021-01-26T16:32:13Z")

</div>

I’m trying to pull some SVGs in from another application to display on a screen in perspective. Is there an easy way to pull an SVG string from a database and link it to an image component(or whatever component displays SVGs since it seems to be separate from images).

---

<div class="post-metadata">

**Author:** ![paul-griffith](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/paul-griffith/32/37249_2.png) [@paul-griffith](https://forum.inductiveautomation.com/u/paul-griffith)\
**Post date:** [January 26, 2021, 4:58pm UTC](https://forum.inductiveautomation.com/t/loading-svgs-from-a-database/42619/2 "2021-01-26T16:58:12Z")

</div>

You should be able to use it in a data URI - escaping might be a problem, so you might want to base64 encode it in the database query (if your DB supports such an operation):

> **[09: SVG with Data URIs | CSS-Tricks](https://css-tricks.com/lodge/svg/09-svg-data-uris/)**
>
> We've covered "inline SVG" - which is dropping the SVG syntax right into HTML. You can use that same inline SVG in other places as well, like in an or

---

<div class="post-metadata">

**Author:** ![grietveld](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/grietveld/32/6984_2.png) [@grietveld](https://forum.inductiveautomation.com/u/grietveld)\
**Post date:** [January 26, 2021, 7:42pm UTC](https://forum.inductiveautomation.com/t/loading-svgs-from-a-database/42619/3 "2021-01-26T19:42:19Z")

</div>

I’m assuming I would put it in the inline frame component? I’ve got it to display the text portion of the SVG using that method, but struggling to get the rest of the paths shown. The database is storing inline SVGs currently if that changes the method

edit: added copy of one SVG for reference

```auto
<svg width="153" height="185.26" >
<rect width="143" height="175.26" style="fill: rgb(244, 164, 96); stroke - width:1; stroke: rgb(0, 0, 0)" />
<rect x="1.6766666666666765" y="22.399999999999977" width="43.97" height="130.46" style="fill: rgb(190, 0, 0); stroke - width:1; stroke: rgb(0, 0, 0)" />
<text x="23.661666666666676" y="87.62999999999998" fill="black">1</text>
<rect x="49.515" y="22.399999999999977" width="43.97" height="130.46" style="fill: rgb(190, 0, 0); stroke - width:1; stroke: rgb(0, 0, 0)" />
<text x="71.5" y="87.62999999999998" fill="black">2</text>
<rect x="97.35333333333332" y="22.399999999999977" width="43.97" height="130.46" style="fill: rgb(190, 0, 0); stroke - width:1; stroke: rgb(0, 0, 0)" />
<text x="119.33833333333332" y="87.62999999999998" fill="black">3</text>
</svg>
```

---

<div class="post-metadata">

**Author:** ![paul-griffith](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/paul-griffith/32/37249_2.png) [@paul-griffith](https://forum.inductiveautomation.com/u/paul-griffith)\
**Post date:** [January 26, 2021, 9:52pm UTC](https://forum.inductiveautomation.com/t/loading-svgs-from-a-database/42619/4 "2021-01-26T21:52:09Z")

</div>

I would expect it to work directly in the image component.

---

<div class="post-metadata">

**Author:** ![grietveld](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/grietveld/32/6984_2.png) [@grietveld](https://forum.inductiveautomation.com/u/grietveld)\
**Post date:** [January 27, 2021, 1:07pm UTC](https://forum.inductiveautomation.com/t/loading-svgs-from-a-database/42619/5 "2021-01-27T13:07:34Z")

</div>

Hm… i get nothing at all in an image component using utf8 or base64. I can get the text to appear in the box if I use an inline frame, but the positions don’t seem to get taken into account though, and the rectangles aren’t drawn.

---

<div class="post-metadata">

**Author:** ![paul-griffith](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/paul-griffith/32/37249_2.png) [@paul-griffith](https://forum.inductiveautomation.com/u/paul-griffith)\
**Post date:** [January 27, 2021, 5:49pm UTC](https://forum.inductiveautomation.com/t/loading-svgs-from-a-database/42619/6 "2021-01-27T17:49:15Z")

</div>

Hmm, I wonder if it’s something about your SVG (I’m far from an expert); I tried [this tool](https://base64.guru/converter/encode/image/svg) and couldn’t get your image to work, but did get this one to:  
 ![Ghostscript_Tiger](https://us1.discourse-cdn.com/inductiveautomation/original/3X/7/4/74c51f2988071153b1776284146cd2b3668d0f3a.svg)

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/6/0/60c0ac67ec1ff55c0ba97652f1b9e2a8871deab9.png)

---

<div class="post-metadata">

**Author:** ![grietveld](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/grietveld/32/6984_2.png) [@grietveld](https://forum.inductiveautomation.com/u/grietveld)\
**Post date:** [January 27, 2021, 6:20pm UTC](https://forum.inductiveautomation.com/t/loading-svgs-from-a-database/42619/7 "2021-01-27T18:20:17Z")

</div>

I think I’ve figured out the issue, it was with our SVG formatting. Updating the SVG opening tag to include  
the xmlns info worked.

```auto
<svg width="153" height="185.26" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
```