[B! SVG] fuyu77のブックマーク

サンプルコードで学ぶ 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 );

fuyu77 2023/06/20

SVG

リンク

塗りつぶしとストローク - SVG: スケーラブルベクターグラフィック | MDN

« 前のページ次のページ » 図形に色を付ける方法としては (オブジェクトに属性を指定することを含む)、インライン CSS、埋め込み CSS セクション、外部 CSS ファイルなどいくつかの方法があります。ほとんどに SVG ではインライン CSS を使用していますが、どの方法にも利点と欠点があります。基本的な色付けは、ノードに fill と stroke という2つの属性を設定することで行うことができます。 fill を使用するとオブジェクトの内部の色を設定し、 stroke はオブジェクトを囲む線の色を設定します。色名 (例えば red)、RGB 値 (例えば rgb(255,0,0))、16進数値、RGBA 値など、HTML で用いる CSS の色名と同じ仕組みを用いることができます。

fuyu77 2021/05/26

SVG
MDN

リンク

SVG Crop

Remove blank space from around any SVG instantly.

fuyu77 2021/05/26

SVG

リンク

SVGアイコンの色をCSSで変更する - Qiita

先日、同じ形のアイコンを色違いで複数のページに挿入するというタスクがあり、 ①色が違うだけのアイコンをpngなどで1つ1つ画像を書き出す ②しかも、それぞれスマートフォンサイト用に＠2xサイズまで作成するということが非常に不毛に思えたので、何とか使いまわし出来ないかと考え、この方法にたどり着きました。ゴール同じ形のアイコンを色違いで表示させるゴールイメージ︵デモ画面︶ See the Pen BMmXOO by yamaki (@yamaki0405) on CodePen. 手順 1.SVGを作成する 2.作成したSVGをHTML内にインラインで指定する 3.CSSで色を指定する 1.SVGを作成する作成したアイコンをIllustlatorやPhotoshop︵CC以降︶で書き出します。作成するのが手間という方は、フリーで配布されているSVGもたくさんあるので、そちらを使っ

fuyu77 2021/05/26

SVG

リンク

SVG: スケーラブルベクターグラフィック | MDN

SVG チュートリアル Introducing SVG from scratch 概要始めましょう配置基本図形パス塗りつぶしとストローク SVG におけるグラデーションパターンテキスト基本的な変形クリッピングとマスク SVG におけるその他のコンテンツフィルター効果 SVG フォント SVG の image 要素 SVG のツール SVG と CSS リファレンス要素 <a><animate><animateMotion><animateTransf orm><circle><clipPath><cursor> 非推奨 <defs><desc><ellipse><feBlend><feColorMatrix><feComponentTransfer><feComposite><feConvolveMatrix><feDiffuseLighting><feDisplace

fuyu77 2020/06/20

MDN
SVG

リンク

はてなブックマーク

タグ

関連タグで絞り込む (1)

SVGに関するfuyu77のブックマーク (5)

お知らせ

今週のはてなブックマーク数ランキング（2024年6月第3週）

今週のはてなブックマーク数ランキング（2024年6月第2週）

月間はてなブックマーク数ランキング（2024年5月）

公式Twitter

キーボードショートカット一覧

はてなブックマーク

公式Twitter

はてなのサービス