Web制作に便利なSVGツール

目次

1. SVGの最適化
2. アイコン
3. 背景などに
4. イラスト
5. Favicon

SVGの最適化

Web上でSVGを軽量化してくれます
わざわざファイルをアップロードしなくても「Psate markup」をクリックしてSVG要素を貼り付けることができます

SVGOMG

アイコン

Tabler Icons

編集するとき
width：svg要素を表示する幅
height：svg要素を表示する高さ
fill：塗りつぶしの色
stroke：枠線の色
＊「width height」が数値のみの場合はpxとみなされます
＊width heightの変更は「viewBox=”x y width height”」の「width height」と同じ比率で

背景などに

背景にそのままsvg要素を埋め込む時

.foo {
background-image: url('data:image/svg+xml;utf8,<svg>ここにsvg要素</svg>') 
}

注意点

• url('')はシングルクォーテーションにする
• #は%23に置換する
• 改行コードが含まれていると読み込めません
• ＊IEに対応させるためにはパーセントエンコードする必要がありまます

Blobmaker

<style>
.bg-svg {
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"><path fill="%23FFD6E8" d="M35.8,-42.7C46.8,-33.4,56.4,-22.5,62.1,-8.2C67.9,6,69.7,23.7,62.5,35.9C55.2,48.1,38.8,54.9,23.2,58.1C7.6,61.3,-7.2,60.9,-21.2,56.5C-35.2,52.1,-48.3,43.8,-59.1,31.2C-69.9,18.6,-78.2,1.7,-74.2,-11.8C-70.3,-25.2,-54.1,-35.2,-39.7,-43.9C-25.2,-52.7,-12.6,-60.3,-0.1,-60.2C12.4,-60,24.7,-52.1,35.8,-42.7Z" transform="translate(100 100)"></path></svg>');
width: 300px; 
height: 300px;
background-size:300px;
background-repeat: no-repeat;
position:relative;
}
.bg-svg p{
position: absolute;
top: 45%;
left:50%;
transform: translate(-50%, -50%);
font-size:1.5rem;
}
</style>
<div class="bg-svg">
     <p>SVGを背景に</p>
</div>

getwaves

widthとheightを指定せず（または100%）「viewBox」を指定したときはSVG要素は可変します

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
  <path fill="#a2d9ff" fill-opacity="1" d="M0,32L40,53...省略"></path>
</svg>

Background Image用のコードも用意してくれているのが嬉しいです

BGJar

SVG Backgrounds

SVGOMGで最適化するとリピートする時に便利かと思います
＊「#」の書き換え大変なので、background: url()はパスを指定するほうがいいかも

イラスト

SVG要素をコピーしたい時
ダウンロードしたファイルをChromeブラウザで開く（ファイルをダブルクリック）→右クリック→ページのソースを表示→「折り返す」にチェックしてコピー

unDraw

viewBox="0 0 783.79 812"でアスペクト比が設定されているので
heightは削除してwidthを表示したい幅に
今回はwidth="300"

ManyPixels

SVG要素を編集したい時
＊不要な要素の削除や色の変更など

例えばFigmaにダウンロードしたファイルをアップロードして操作すると簡単です
＊Figmaはブラウザ上（ブラウザからログインして使う）で利用できる「デザインツール」でソフトをインストールする必要がなく無料で利用できます

Figmaの使い方

FigmaでエクスポートしたファイルをSVGOMGで最適化
＊今回はSVG要素の元々のwidth="784"とheight="812"を削除
viewBox="0 0 784 812"を追加
width="30%"を追加（通常はcssで対応）

SVGをWeb上で作成出来るツールをまとめたサイト

fffuel

Favicon

文字または絵文字でFaviconを作成

Free Favicon Maker