DBに保存したsvgコードを取得し、HTMLで画像として表示する

Question

やろうとしている事

[前提]
・DBに存在するテーブルのカラムにSVGのコードを保存している（text型のカラム）

１、PHPのバックエンド側でDBからSVGのコードを取得
２、取得したコードを変数に保存、viewへ渡す
３、受け取った変数、その中身をHTML上で表示
４、コードではなく、画像が表示される（想定）

問題

・画像ではなく、SVGのコードがそのまま表示される

原因は、コードを変数に代入してview側へ渡すときstringなので
「" <svg>~</svg> "」
といったように表示はされないダブルクォーテーションが実はくっついている事でした。

変数を表示するのではなく、変数に持たせているSVGコードをHTML内にべた書きしたところ
画像として表示されたので原因は間違いないと思います。

何とかして見えないダブルクォーテーションを認識しない、文字列として扱わない、HTMLコードとして扱う
という事をしたいのですが、似ている例がないのか情報が見つかりません。

どなたか対処法をご存じでしたら教えていただきたいです。よろしくお願いいたします。

補足

取得しているsvgコードは以下です

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid meet" viewBox="0 0 250 150" width="250" height="150"><defs><path d="M68.18 31.31L192 31.31L192 108.31L68.18 108.31L68.18 31.31Z" id="chMAGfJHU"></path><path d="M192 69.81L68.18 69.81" id="h1FLQ4bfrc"></path><path d="M130.09 108.31L130.09 69.81" id="a16eyZmJB1"></path></defs><g><g><g><use xlink:href="#chMAGfJHU" opacity="1" fill="#f9f9f9" fill-opacity="1"></use><g><use xlink:href="#chMAGfJHU" opacity="1" fill-opacity="0" stroke="#000000" stroke-width="2" stroke-opacity="1"></use></g></g><g><g><use xlink:href="#h1FLQ4bfrc" opacity="1" fill-opacity="0" stroke="#0b1923" stroke-width="1" stroke-opacity="1"></use></g></g><g><g><use xlink:href="#a16eyZmJB1" opacity="1" fill-opacity="0" stroke="#0b1923" stroke-width="1" stroke-opacity="1"></use></g></g></g></g></svg>

バックエンド側(PHP Symfony)では
return $this->render(html.twig,['svg' => $svg]);
という形でhtmlをリターンしています。

HTML(Twig)側では
{{ svg }}
という形で表示しています。

Comments

[maisumakun]

PHPは何かしらのフレームワークを使っていますか？直書きですか？

[Dash_003]

フレームワークはSymfony4.4.xを使用しています
テンプレートエンジンはTwigです

[maisumakun]

Twigの側ではどのように書いていますか？

[Dash_003]

補足に追記いたしました

Answer 1

環境によりますが、Twigから書いた通りの出力を行うには、{{ val|raw }}のような指定が必要な場合もあります（参考）。

Comments

[Dash_003]

回答いただいた形式で無事表示することができました。文字列として扱われている＝セキュリティの為エスケープされているという観点に全然及んでいなかったので思いつきもしませんでした。。。
ありがとうございました<(_ _)>

Answer 2

svgタグまできちんと書かれているならajaxなどで受け取って、
適当な場所を指定してアペンドしてやればよいでしょう

Comments

[yambejp]

どうしてもうまくいかない場合は、imgタグにbase64エンコードした文字列をsrcで
指定するというやり方もあります。ただしimgタグで呼び出したsvgはやや制限があります

[Dash_003]

アペンドをしたら文字列として認識されているコードがHTMLコードとして認識されるのでしょうか？

[yambejp]

よく考えたら、appendじゃなくてinnerHTMLがよいかもしれません

こんな感じにすればインラインに埋め込めます
<script>
window.addEventListener('DOMContentLoaded', ()=>{
fetch(url).then(res=>res.text()).then(txt=>document.querySelector('#view').innerHTML=txt)
});
</script>
<div id="view"></div>