Web制作に便利なSVGツール

HP制作・コーディングなどのお手伝いをいたします

目次
  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

SVGを背景に

<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ブラウザで開く(ファイルをダブルクリック)→右クリック→ページのソースを表示→「折り返す」にチェックしてコピー

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

xmas surprise
ManyPixels

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

例えばFigmaにダウンロードしたファイルをアップロードして操作すると簡単です
*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