SVG ファイル

概要

参考:

SVG ファイル大解剖 Illustrator による作成から、Web 書き出しまで | PhotoshopVIP

SVG に関する基礎知識 | Design Report デザインレポート

SVG の使い方

参考:

HTML と CSS で SVG を使うためのメモ – Qiita

SVG と svg 要素 | プログラミング入門レシピ

HTML5 での SVG ファイル操作のおさらい – Qiita

svg 要素と svg 文書 | defghi1977

SVG 入門 | コンピュータサイエンス入門 by 新山祐介

SVG ファイルの読み込みと操作

  • img タグで読み込み:CSS / JS の適用不可。❌
  • background-image プロパティ:CSS / JS の適用不可。❌
  • HTML 内にインラインで svg タグを記述:CSS / JS の適用が可能!!⭕️
  • object タグで読み込み:別ドキュメントとして扱われる。 ( jQuery での操作時に contentDocument を jQuery オブジェクトに変換する必要がある。)

参考:

SVG を css / js で操作するときに知っておきたいこと – Qiita

SVG を jQuery で操作する際にハマったので、書き留めておく。| 5 LOG

外部ファイル SVG を jQuery で操作する方法 | Gimmick log

SVG を jQuery・JavaScript で操作する – Qiita

img タグで開くか object タグで開くかの違い | なおしむ論

How to use jquery in SVG (Scalable Vector Graphics)? – Stack Overflow

JavaScript accessing inner DOM of SVG – Stack Overflow

Using Javascript with SVG | Peter Collingridge

Can I use

参考:

SVG (basic support) | Can I use… Support table

Inline SVG in HTML5 | Can I use… Support tables

SVG SMIL animation | Can I use… Support tables

SVG DOM

参考:

SVG DOM 文書オブジェクトモデル | SVG 1.1 第2版 (triple-underscore.github.io)

SVG Tiny 1.2

参考:

Document Structure | SVG Tiny 1.2 (w3.org)

名前空間 (xmlns)

参考:

名前空間の速修講座 | MDN

サイズ指定

参考:

SVG のサイズを変更する方法 | Code School

SVG をレスポンシブに対応する | cly7796.net

SVG の画像サイズ指定でわかったこと – Qiita

SVG をインラインで使用する際の css での画像サイズ制御 | ri-que lab

レスポンシブ SVG をインラインで配置するとき、IE と android が高さを計算しないのに対応する | ウェブまなぶ

SVG 画像のサイズを HTML, CSS で自在にコントロールして WEB で表示する方法 | 9ineBB

色の変更

参考:

SVG のオブジェクトごとに CSS で色を切り替える | わすれたあかんえ

SVG アイコンの色を変更する方法 | Code School

SVG の基本的な使い方と動的に色を書き換える方法 | 株式会社クーネルワーク

SVG アイコンのカラーを CSS で変更したい!| よらノート

SVG 画像を CSS で色指定して color が効かないときの対処法 | おち研

fill | CSS-Tricks

Cascading SVG Fill Color | CSS-Tricks

SVG を背景に使う

参考:

Coloring SVGs in CSS Background Images | Noah Blon

Solved With CSS! Colorizing SVG Backgrounds | CSS-Tricks

Modify SVG fill color when being served as Background-Image – Stack Overflow

defs / use

ID は HTML 内、及び SVG 内で一意でなければならない。

参考:

SVG を use タグで使いまわす – Qiita

図形の定義と再利用 | defghi1977

実践、SVG スプライト | CodeGrid

A guide to SVG <use> elements | Taye Adeyemi

Styling SVG <use> Content with CSS | Codrops

SVG defs Elements | Jenkov.com

Scale inline SVG symbol referenced with <use> – Stack Overflow

symbol

参考:

symbol タグと use タグを使って、好きなところに SVG を表示しよう! | 株式会社 エヴォワークス EVOWORX

PNG に変換する

  • ImageMagick

参考:

svg を png に変換するワンライナー – Qiita

EPS から変換する

  • オンラインコンバーター
  • Inkscape

参考:

EPS SVG 変換 | Convertio

eps を svg に変換する – Qiita

eps -> svg への変換 | オレと電波とときどきトノ

Converting from EPS to SVG format – Super User

Convert batch EPS to SVG using ImageMagick? – Graphic Design Stack Exchange

How to convert svg to eps using Imagemagick? – Stack Overflow

Need to convert SVG to eps without filter rasterisation – Stack Overflow

ツール

参考:

SVG を使いこなすための便利ツールいろいろ | Web クリエイターボックス

Tips

参考:

SVG アイコンを実用するために知っておきたい、リンク周りの記述方法 | Web クリエイターボックス

SVG を css / js で操作するときに知っておきたいこと – Qiita

SVG ファイルを初めて設定する時につまずきやすいポイント!リンクの設定とカラーの変更方法 | WeberNote ウェバーノート

Tagged:

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です