Sending generated svg ins json

Phoenix Forum Questions / Help
,
1

Hey there,

I am trying to generate svg qr codes with this packages:
https://hexdocs.pm/eqrcode/readme.html#content
and it generates something, the svg code it seems,
and I want to send this code in json as a response, but the code that I am getting after pasting it into any svg renderer doesn’t seem to work, it doesn’t show anything.

here is the svg code: https://pastebin.com/d24jfc4i

Why can this be? Or what am i missing?

EDIT:
if someone in the future would stumble upon this, you can unescape your json on this site for testing:
https://www.freeformatter.com/json-escape.html#ad-output

2

Are you pasting exactly that code into an SVG renderer or do you print it first to resolve escapes and quotes properly?

1 Like
3

i was just putting it straight into a renderer

4

You need to make sure its properly unquoted/unescaped first for most renderers I think…

<?xml version="1.0" standalone="yes"?>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:ev="http://www.w3.org/2001/xml-events" width="275" height="275"
      shape-rendering="crispEdges">
<rect width="11" height="11" x="0" y="0" style="fill:#fff"/><rect width="11" height="11" x="0" y="11" style="fill:#fff"/>
<!-- and so on -->
</svg>

How you can create an SVG from your JSON-string programmatically, I’m not sure… That massively depends on your libraries used clientside and how exactly you encode the SVG into JSON…

1 Like
5

Actually it seems like if i pipe IO.inspect like so:

base
      |> EQRCode.encode()
      |> EQRCode.svg()
      |> IO.inspect

the printed out stuff looks the same as the one in the pastebin:
a little taste:

"<?xml version=\"1.0\" standalone=\"yes\"?>\n<svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" xmlns:ev=\"http://www.w3.org/2001/xml-events\" width=\"275\" height=\"275\"\n      shape-rendering=\"crispEdges\">\n<rect width=\"11\" height=\"11\" x=\"0\" y=\"0\" style=\"fill:#fff\"/>
6

If you want a pasteable output from within elixir, you need to IO.puts rather than IO.inspect.

2 Likes
7

ohh, that works, but then the one I send, as my response, why is that not like that?
because it gets encoded?

8

Well, its JSON encoded, and a JSON encoded string looks pretty much like one that is inspected.

Therefore, how to render this as SVG on the clientside, is pretty much JS stuff and nothing I could help you with.

3 Likes