SVG エスケープツール(SVG URL Encoder)

SVG 用に URL エンコード(エスケープ)するツールです。

CSS の疑似要素(::before ::after)や背景画像(background-image)にデータ URL を使って svg 要素を指定する場合、svg のマークアップを URI エンコードする必要がありますが、マニュアルで変換するのは面倒なので作成したものです。

JavaScript の encodeURIComponent 関数を使って変換することもできますが、スペースなども変換されてサイズが大きくなってしまいます。

関連ページ:SVG の使い方(CSS で svg 要素を表示)

作成日:2021年03月21日

変換ツール

<、>、# 文字をそれぞれ %3C、%3E、%23 にパーセントエンコード変換します。

また、その際にダブルクオート(")はシングルクォート(')に変換し、改行は削除しています。

SVG を入力

変換結果


      

ツールのコード

以下は上記ツールの HTML です。

<div>
  <textarea id="input" rows="20" cols="60"></textarea>
</div>
<button id="encode">変換</button>
<button id="clear">クリア</button>
<button id="restore">リストア</button>
<div class="output">
  <p>変換結果</p>
  <pre id="output"></pre>
</div>

以下は上記ツールの JavaScript の記述です。

<script>
  const encodeBtn = document.getElementById('encode');
  const clearBtn = document.getElementById('clear'); 
  const restoreBtn = document.getElementById('restore'); 
  const input =  document.getElementById('input');
  const output =  document.getElementById('output'); 
  let inputValue = '';
  let outputValue = '';
 
  encodeBtn.addEventListener('click', () => {
    inputValue = input.value;
    outputValue = inputValue.replace(/#/g,"%23")
    .replace(/</g,"%3C")
    .replace(/>/g,"%3E")
    .replace(/"/g,"'")
    .replace(/\r?\n/g,'');
    output.textContent = outputValue;
  });
 
  clearBtn.addEventListener('click', () => {
    output.textContent = '';
    input.value = '';
  });
  
  restoreBtn.addEventListener('click', () => {
    output.textContent = outputValue;
    input.value = inputValue;
  });
</script> 

関連ページ: