SVG

このタグでブログを書く

言葉の解説

ネットで話題

SVG

(コンピュータ)

【えすぶいじー】

[英] Scalable Vector Graphics
SVGとは、W3Cにおいて策定された2次元グラフィクス記述言語。
XMLをベースにしており、基本的にはベクトル描画を行なう*1 ベクターデータである。HTML5における2次元ビットマップ画像はcanvas要素。
2003/1/14にSVG1.1が勧告されている。また、モバイル向けにSVG1.1のサブセットとしてSVG TinyおよびSVG Basicが勧告されている。

未対応のブラウザ

IE 8以下
Android 2.3.x以下
フィーチャーフォン

*1:ラスタ画像を扱うこともできる

このタグの解説について

この解説文は、すでに終了したサービス「はてなキーワード」内で有志のユーザーが作成・編集した内容に基づいています。その正確性や網羅性をはてなが保証するものではありません。問題のある記述を発見した場合には、お問い合わせフォームよりご連絡ください。

スタジオおふとん•4日前

目標ビンゴを作るサービスを立ち上げてみた（技術的な話）

目標ビンゴとは何か、どういうところがいいのか、は別のブログに書いているので、こちらでは技術的な話を。技術スタック web周りの裏話 svgをpngにするツールも作った mejirot.leaflet.pub 技術スタック goal-bingo.mejilab.com plantUMLのMCPで描いてもらった最初はクエリでデータ保持する仕組みだったんだが、使ってみたら1000文字とかになってしまって、その量クエリで渡すのどうなんだ？ + まだ追加したい機能があって、それもクエリでやるとなると限界来るな、ってことでいったんmarkdownでimport/exportしてもらう形にした。ビンゴ…

#開発#目標ビンゴ

ネットで話題

1479ブックマークほぼ劣化なしでJPG/GIF/PNG/SVG画像を超軽量化してくれる「Compressor.io」は要ブックマーク！｜男子ハック

www.danshihack.com

1328ブックマーク 8M+ Free Icons & Stock Photos | SVG & PNG | Download Today

thenounproject.com

1211ブックマークビジネス系のイラストはおしゃれなのが無いと困っている人に！商用無料で使えるイラストのSVG素材 -unDraw

coliss.com

1182ブックマーク東京の鉄道路線図SVGを作りました＆パブリックドメインで配布します 12/20/2014東京の鉄道路線図SVGを作りました＆パブリックドメインで配布しますIllustratorを使って、東京圏の交通路線図を作りました。現在、これを書きだしたSVGファイルを以下に置いて、ウェブ上から見られるようにしています。まだマップとして大した処理はしていないので、PCとかだとスクロールが面倒ですが、スマ...

note.openvista.jp

813ブックマークグリグリ動くUIをVueとSVGでサクッと書く - No Regrets in Bathing

hashrock.hatenablog.com

668ブックマーク全部、完全に商用利用無料！さまざまなUIデザインに適した1,064種類のSVGアイコン素材 -Emblemicons

coliss.com

536ブックマーク無料で商用利用できるSVGのフリーアイコン4,500種類、デザインに合わせたカスタマイズもできるのはすごい！

coliss.com

531ブックマークブックマークしておくと便利！背景、テクスチャ、パターン、シェイプ、グラデーションなどを生成するSVGツールのまとめ

coliss.com

530ブックマーク商用利用無料、UIデザイン用のSVGアイコンが1000種類以上！改変・再配布も可の太っ腹ライセンス- MingCute Icon

coliss.com

関連ブログ

エニグモ開発者ブログ•2ヶ月前

SVGファイルは本当に安全なのか？SVGの中にある危険な仕組みと対策

こんにちは！Webアプリケーションエンジニアのレミーです！この記事はEnigmo Advent Calendar 2025の7日目の記事です。最近「Operation Hanoi Thief」という事件を読みました。これは、ベトナムのITエンジニアや採用担当者を狙ったサイバー攻撃についての内容で、怪しいファイルを送りつけて情報を盗む手口が紹介されていました。その中で、一見ただの画像に見えるファイルでも、実は中に攻撃的なコードが入っている恐れがある、という点が気になったので、SVGの中にある危険な仕組みを紹介します。多くの人にとって、SVGファイルは「軽くて、拡大しても劣化しない便利な…

#アドベントカレンダー2025#SVG#セキュリティ

パスコンパスの日記•3ヶ月前

【ペンプロッタ】データをどうやって作るか

先日念願のMaker Faire Tokyoに出展してきました。 makezine.jp 大変ありがたいことにたくさんの方に作品を見ていただきまして、質問も色々いただきました。その中で何回か似た質問をいただきました。「データはどうやって作るんですか？」という質問です。確かに振り返ってみると私もペンプロッタを初めて作ろうとした時は「データの作り方が難しそう」と思い、マスタースレーブ的にリアルタイムでポテンショメータの角度をモータに出した方が楽だと考えました(結果的にはそちらの方が茨の道だったかも)。今思うと、データの用意の手順は慣れればそんなに難しくないです。ブログにまとめておけば質問に…

#SVG#ペンプロッタ#Gコード

pikesakuの日記•3ヶ月前

PikoCTFジム - Forensics - Enhance!

問題 picoCTF 答えの出し方 svgファイル内に隠された文字列を探す問題。ググるとtextタグに文字列埋め込みできると記載あり、見てみたらあった。 # grep 'id="tspan37' ./drawing.flag.svg id="tspan3748">p </tspan><tspan id="tspan3754">i </tspan><tspan id="tspan3756">c </tspan><tspan id="tspan3758">o </tspan><tspan id="tspan3760">C </tspan><tspan id="tspan3762">T </tspa…

#画像

鷹尾祥（アキラ）のExcel BI ブログ•7ヶ月前

[Power BI] SVGで独自グラフを作ろう④：今年、前年、目標値を1つのメジャーで表現

SVGグラフの4回目で、棒グラフについては最終回となります。目標前回は実績に応じて長さが変わる棒グラフを完成しました。今回は、それに前年実績の棒グラフと、今年の目標値のラインを追加して対前年対比、対目標対比を１つのメジャーで表現します。シリーズ一覧 [Power BI] SVGで独自グラフを作ろう① - 鷹尾祥（アキラ）のExcel BI ブログ [Power BI] SVGで独自グラフを作ろう② - 鷹尾祥（アキラ）のExcel BI ブログ [Power BI] SVGで独自グラフを作ろう③ - 鷹尾祥（アキラ）のExcel BI ブログ [Power BI] SVGで独自グラフを…

#Power BI#SVG

鷹尾祥（アキラ）のExcel BI ブログ•7ヶ月前

[Power BI] SVGで独自グラフを作ろう③：最大値を自動調整して棒グラフを完成

SVGグラフの3回目です。目標前回はメジャーの値を参照して、その値に応じて長さが変化する棒グラフをSVGで作成しました。今回は最大値をハードコーディングからその時の最大値に応じて調整します。シリーズ一覧 [Power BI] SVGで独自グラフを作ろう① - 鷹尾祥（アキラ）のExcel BI ブログ [Power BI] SVGで独自グラフを作ろう② - 鷹尾祥（アキラ）のExcel BI ブログ [Power BI] SVGで独自グラフを作ろう③ - 鷹尾祥（アキラ）のExcel BI ブログ [Power BI] SVGで独自グラフを作ろう④ - 鷹尾祥（アキラ）のExcel B…

#Power BI#SVG

鷹尾祥（アキラ）のExcel BI ブログ•8ヶ月前

[Power BI] SVGで独自グラフを作ろう②：メジャーの値で変化する棒グラフ

SVGグラフの２回目です。目標前回の記事でPower BIのマトリクス・ビジュアルに静的なSVGチャートを描きました。今回は実際に変化するメジャーの値に応じて長さが変化する棒グラフを作ります。シリーズ一覧 [Power BI] SVGで独自グラフを作ろう① - 鷹尾祥（アキラ）のExcel BI ブログ [Power BI] SVGで独自グラフを作ろう② - 鷹尾祥（アキラ）のExcel BI ブログ [Power BI] SVGで独自グラフを作ろう③ - 鷹尾祥（アキラ）のExcel BI ブログ [Power BI] SVGで独自グラフを作ろう④ - 鷹尾祥（アキラ）のExcel …

#Power BI#SVG#カスタム#ビジュアル#グラフ

鷹尾祥（アキラ）のExcel BI ブログ•8ヶ月前

[Power BI] SVGで独自グラフを作ろう①：SVGを描いてみる

SVGとは？ Power BIには様々なビジュアルが用意されており、またカスタムビジュアルとして世の中に公開されているチャートを使うことができます。しかし、それでも痒いところに手が届かず自分でフレキシブルにグラフを作れたらと思うこともあります。そんなときにはSVGを使ってカスタム・グラフを作ることができます。SVGとはScalable Vector Graphicsの略で、画像を描画するためのXML形式の定義です。このSVGにより様々な図形を作成できます。このSVGは、マトリクス・ビジュアルとテーブル・ビジュアルの中の1つのメジャーとして使うことができます。こちらを使ってより直感的にわかりやす…

#Power BI#SVG#カスタム#ビジュアル#グラフ

takaha_0の日記•10ヶ月前

epsファイルの作成方法

初めまして。今日は、TeXを使って論文投稿をする際に必要となるepsファイルの作成方法について記載します。画像を挿入する際に、ファイルサイズが大きくなりすぎるのでpngやjpegなどを利用しないとは思っていましたが、epsという初めてのファイル形式に出会ったので、備忘録も兼ねて記事にすることにしました。使用しているOSはMacOSです。(近日中にwindowsに乗り換える予定です。) adobe illustratorを持っている場合私は持っていませんが、adobe illustratorがあればepsファイルを簡単につくれるそうです。こちらを参照してください。 svgから変換する場合 …

#eps#nature#論文

uepon日々の備忘録•10ヶ月前

Claude×SVG×PowerPointの最強コンボ！生成画像を劇的に進化する編集方法！

SVG（Scalable Vector Graphics）は拡大縮小しても画質が劣化しない優れたベクター形式の画像ファイルです。最近ではClaude 3.7 Sonnet ArtifactsなどのLLMでは関係性や構成図の表す画像としてSVGを生成することができます。これを資料としていれることも可能ですが、位置の調整やフォントの変更（特に日本語）、色の修正などを行いたいと思うのですが、できればよく使っているアプリで行いたいところです。実はSVGの編集はPowerPointで可能なのです🤩 PowerPoint 2016ではSVGファイルのインポートは可能でしたが、編集機能は限定的でした。本格…

#Claude#SVG#PowerPoint#Anthropic