Vue.jsでsvgを扱うときにはまった出来事です。 みなさんsvg使っていますか? svgはどんな環境でもきれいに表示できますし、色もスタイルでかえられるので便利ですよね。 そのsvgをVue.jsで出力したいときにはいくつか方法があるかと思います。 テンプレートに直接書く imgタグのsrcにsvgファイルを指定する svgファイルをそのまま出力する エンジニアがsvgを書ける場合は1.の方法をとれば良いかと思うのですが、デザイナーがsvgを書いてそのファイルをそのまま読み込まなければならないこともあるかと思います。 そのときは2.か3.の方法になるのですが、2.では基本的に色を変えることができなく、svgのメリットを享受できません。(やる方法もないわけではないらしいですが) ということで3.の「svgファイルをそのまま出力する」方法を共有します。 方針 以下の方針で進めていきます。