サンプルコードで学ぶ SVGの読み方、書き方 (1/2)
SVGの概要から基本的な使い方、Web制作での活用方法までをじっくり解説する本連載。前回はSVGができることをおおまかに解説しました。今回は、SVGの仕様をもとに、SVGの書き方、読み方の基礎を学びます。 SVGを描く、そして書く SVGは画像であり、コードを書かずとも、ツールで描けます。例えば、Adobe IllustratorやInkscape、Sketchなどのドローソフトを使えば、画面の操作のみでSVGファイルを作成できます。 ドローソフトを使って用意したSVGファイルは、HTMLでimg要素、あるいはCSSの背景画像などとして読み込むことで、手軽にWebページの一部として表示できます。 <img src="example.svg" alt="" width="600" height="400"> .example{ background: url( example.svg );
塗りつぶしとストローク - SVG: スケーラブルベクターグラフィック | MDN
« 前のページ 次のページ » 図形に色を付ける方法としては (オブジェクトに属性を指定することを含む)、インライン CSS、埋め込み CSS セクション、外部 CSS ファイルなどいくつかの方法があります。ほとんどに SVG ではインライン CSS を使用していますが、どの方法にも利点と欠点があります。 基本的な色付けは、ノードに fill と stroke という 2 つの属性を設定することで行うことができます。 fill を使用するとオブジェクトの内部の色を設定し、 stroke はオブジェクトを囲む線の色を設定します。色名 (例えば red)、RGB 値 (例えば rgb(255,0,0))、16 進数値、RGBA 値など、HTML で用いる CSS の色名と同じ仕組みを用いることができます。
SVGアイコンの色をCSSで変更する - Qiita
先日、同じ形のアイコンを色違いで複数のページに挿入するというタスクがあり、 ①色が違うだけのアイコンをpngなどで１つ１つ画像を書き出す ②しかも、それぞれスマートフォンサイト用に＠2xサイズまで作成する ということが非常に不毛に思えたので、 何とか使いまわし出来ないかと考え、この方法にたどり着きました。 ゴール 同じ形のアイコンを色違いで表示させる ゴールイメージ（デモ画面） See the Pen BMmXOO by yamaki (@yamaki0405) on CodePen. 手順 1.SVGを作成する 2.作成したSVGをHTML内にインラインで指定する 3.CSSで色を指定する 1.SVGを作成する 作成したアイコンをIllustlatorやPhotoshop（CC以降）で書き出します。 作成するのが手間という方は、フリーで配布されているSVGもたくさんあるので、そちらを使っ
SVG: スケーラブルベクターグラフィック | MDN
SVG チュートリアル Introducing SVG from scratch 概要 始めましょう 配置 基本図形 パス 塗りつぶしとストローク SVG におけるグラデーション パターン テキスト 基本的な変形 クリッピングとマスク SVG におけるその他のコンテンツ フィルター効果 SVG フォント SVG の image 要素 SVG のツール SVG と CSS リファレンス 要素 <a><animate><animateMotion><animateTransform><circle><clipPath><cursor> 非推奨 <defs><desc><ellipse><feBlend><feColorMatrix><feComponentTransfer><feComposite><feConvolveMatrix><feDiffuseLighting><feDisplace
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
SVG Crop