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).
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):
1 Like
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
<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>I would expect it to work directly in the image component.
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.
Hmm, I wonder if it’s something about your SVG (I’m far from an expert); I tried this tool and couldn’t get your image to work, but did get this one to:
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.
<svg width="153" height="185.26" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
1 Like