1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

svgをコーディングに組み込む際によく使うツール

Last updated at Posted at 2020-02-10
  • SVGOMG

    • Illustratorで書き出したsvgとかについてくる不要な記述を削除して容量を圧縮してくれる
    • 圧縮済みのsvgはダウンロードできる他、markup用の記述をそのままコピペ出来る点が便利
    • 後述のcssのbackground-imageエンコードツールと合わせて使うこともよくある
  • SVGをCSSのbackground-imageで使えるようにエンコードするツール

    • 本当にtitleのまんまのツール
    • 手作業でやると地味に面倒な作業を秒で終えてくれる
    • 使い方はsvgのmarkup用記述をそのままコピペするだけ
    • (追記)生成されるコードの値の部分(「:」以降のurl()の部分)はそのまま疑似要素等で用いられるcontentの値としても利用できます。要はCSS側にsvgを埋め込むとき一般に用いられる。
  • unDraw

    • 商用自由のオープンソースなsvgイラストライブラリー
    • オープンソースであるにも関わらず、イラスト感のテイストの整合性も高く、もちろん個々のクオリティも高い
    • 自分はここから落としてきたsvgをIllustratorで開いて色味だけ「オブジェクトの再配色」をゴリッと回してサイト全体の世界観に合わして使うことが多い
    • これぐらい複雑なイラストレーションになると、構造が複雑なせいか、前述SVGOMGにぶち込むとかえって容量が大きくなるパターンがある(それはそれで必要な記述が抜けていたのではないかという疑念はあるが…)
1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?