概要

参考:

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

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

Device Pixel Ratio

参考:

Retina 対応に SVG は本当に使えるのか? | Rriver

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

symbol

参考:

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

ID に使用できる文字

  • 英数字
  • :
  • _
  • -
  • .

参考:

Allowed Characters in id Attribute | HTML Tutorial (xahlee.info)

Name – Extensible Markup Language (XML) 1.0 Fifth Edition | W3C (w3.org)

Why does Illustrator mangle group/id names in generated SVG files? – Stack Overflow

ISO table(s) of valid characters for SVG ids – Stack Overflow

canvas に描画する

参考:

SVG を canvas で使う – Qiita

SVG を Cavnas で利用する方法 | nmi.jp

Canvas に SVG ファイルを読み込んで表示する | スターフィールド株式会社

Draw SVG in canvas – GitHub Gist

How to draw an SVG file on an HTML5 canvas | Tutorials Point

Drawing an SVG file on a HTML5 canvas – Stack Overflow

Drawing an svg containing html in a canvas with safari – Stack Overflow

Path2D API

参考:

SVG の path を canvas に描画できる Path2D API | q-Az

Path2D() | MDN

PNG に変換する

  • ImageMagick

参考:

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

How to convert a SVG to a PNG with Image Magick? – Stack Overflow

ラスタライズ

参考:

How to capture HTML and SVG into an image | Toucan Toco

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 エディタまとめ – Qiita

ツール

参考:

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

Tips

参考:

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

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

SVG を使うときに知っておくといいことをまとめました – Qiita

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

rasterizeHTML.js

参考:

rasterizeHTML.js (cburgmer.github.io)

cburgmer/rasterizeHTML.js: Renders HTML into the browser’s canvas – GitHub

rasterizehtml – npm

Chrome でも DOM を Canvas にレンダリングして画像を取得するには – Qiita

saveSvgAsPng

参考:

exupero/saveSvgAsPng: Save SVGs as PNGs from the browser – GitHub

save-svg-as-png – npm

Save D3 chart as image – Stack Overflow

capture whole div with svg in javascript – Stack Overflow

DOM to Image

参考:

tsayen/dom-to-image: Generates an image from a DOM node using HTML5 canvas – GitHub

librsvg

参考:

GNOME/librsvg: SVG rendering library – GitHub

タグ:

コメントを残す

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