SVG URLエンコーダー

SVG とは何ですか？

SVG は Scalable Vector Graphics（スケーラブルベクターグラフィックス）の略です。Web 向けのベクターベースのグラフィックを XML 形式で定義するために使われます。SVG ファイルの各要素や属性はアニメーション化できます。

• Wikipedia - SVG

CSS で SVG を使うにはどうすればいいですか？

CSS で SVG コードを直接使用するには、SVG コードをエンコードする必要があります。この SVG URL Encoder ツールまたは JavaScript の encodeURIComponent() 関数を使用してエンコードできます。エンコードされた SVG データ URI は、url() 関数を通じて background-image、border-image、mask の CSS プロパティで使用できます。 例: background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle r='50' cx='50' cy='50' fill='red'/%3E%3C/svg%3E");

CSS で SVG の色を変更するにはどうすればいいですか？

SVG の色を変えるには、CSS の mask プロパティと background-color プロパティを組み合わせます。 次の例では SVG の色を青に変更します。 例: mask: url(“data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle r='50' cx='50' cy='50' fill='currentColor'/%3E%3C/svg%3E”); background-color: blue;

URL とは何ですか？

URL（Uniform Resource Locator）はインターネット上のリソースの一意のアドレスです。ブラウザが HTML ページ、CSS ドキュメント、画像などのリソースを取得するために使う主要な仕組みのひとつです。

• MDN - What is a URL?

URL をエンコードするには？

URL をエンコードするには encodeURIComponent() 関数を使用します。この関数は特定の文字を、その文字の UTF-8 エンコードを表す 1〜4 個のエスケープシーケンスに置き換えて URI をエンコードします。encodeURI() と比べて、URI 構文の一部となる文字も含め、より多くの文字をエンコードします。

• MDN - encodeURIComponent()

URL をデコードするには？

URL をデコードするには decodeURIComponent() 関数を使用します。この関数は %XX 形式の各エスケープシーケンスを UTF-8 の 1 コードユニット（1 バイト）として扱い URI をデコードします。UTF-8 では、最初のバイトの先頭にある 1 ビットの数（0（1 バイト ASCII 文字の場合）、2、3、または 4）がその文字のバイト数を示します。

• MDN - decodeURIComponent()