Hatena Blog Tags
はてなブログ トップ
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:ラスタ画像を扱うこともできる

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

[Power BI] SVGで独自グラフを作ろう①

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

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

ネットで話題

もっと見る
1480ブックマークほぼ劣化なしでJPG/GIF/PNG/SVG画像を超軽量化してくれる「Compressor.io」は要ブックマーク！｜男子ハックwww.danshihack.com
1214ブックマークビジネス系のイラストはおしゃれなのが無いと困っている人に！商用無料で使えるイラストのSVG素材 -unDrawcoliss.com
1181ブックマーク東京の鉄道路線図SVGを作りました＆パブリックドメインで配布します東京の鉄道路線図SVGを作りました＆パブリックドメインで配布します ロンドン地下鉄路線図での作図方法に基づいた東京の鉄道路線図を作ったので公開・配布します time2014/12/20 hatenabookmark- Illustratorを使って、東京圏の交通路線図を作りました。 現在、これを書きだしたSVGファイルを以下に置いて、ウェブ上から...note.openvista.jp
812ブックマークグリグリ動くUIをVueとSVGでサクッと書く - No Regrets in Bathinghashrock.hatenablog.com
670ブックマーク全部、完全に商用利用無料！さまざまなUIデザインに適した1,064種類のSVGアイコン素材 -Emblemiconscoliss.com
536ブックマーク無料で商用利用できるSVGのフリーアイコン4,500種類、デザインに合わせたカスタマイズもできるのはすごい！coliss.com
532ブックマークブックマークしておくと便利！ 背景、テクスチャ、パターン、シェイプ、グラデーションなどを生成するSVGツールのまとめcoliss.com
528ブックマーク商用利用無料、UIデザイン用のSVGアイコンが1000種類以上！ 改変・再配布も可の太っ腹ライセンス- MingCute Iconcoliss.com
513ブックマークアイコンフォントからSVGへ！より手軽にベクター画像を表示しようwww.webcreatorbox.com

関連ブログ

takaha_0の日記•2ヶ月前

epsファイルの作成方法

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

#eps#nature#論文
uepon日々の備忘録•2ヶ月前

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

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

#Claude#SVG#PowerPoint#Anthropic
dnjiro’s 9VAe blog•4ヶ月前

OnePをつかった簡単なアニメーションの書き方

OneP（One Picture）は、ひとコマアニメーションを保存する目的で開発された、ベクトルグラフィックスフォーマットです（拡張子.onep）。似たフォーマットに、SVG（SMIL）がありますが、OnePのほうが簡単です ほかの解説動画はこちら。 内容： OnePが使えるアプリ OnePの白紙の書き方 ３つの色が違う正方形 ２ページめをつくる 2ページの四角を内側に移動させる ３ページをつくり、赤青の四角をアニメキャストにする ４ページをつくり、アニメキャストを回転させる 解説動画の作り方 9VAeきゅうべえのダウンロード 画面キャプチャ方法 音声合成でしゃべる解説動画の作り方 アニメGI…

#9vae#ひとこま
dnjiro’s 9VAe blog•6ヶ月前

アニメーション制作の革命？：9VAeきゅうべえのアニメキャスト

無料アプリ9VAeきゅうべえは、なめらかに動くアニメを作るために、他のアプリにない「アニメキャスト」というすごいパーツ作成機能を持っています。これを解説。パソコンでもスマホでもできます。いらすとやを動かす方法はこちら。しゃべる解説はこちら。 ほかの解説動画はこちら。 内容： １．9VAeきゅうべえのダウンロード ２．9VAeのアニメキャスト機能 ３．アニメキャストの作り方（四角形の回転） ４．アニメキャストの作り方（動く図形の移動） ５．アニメキャストの中身の修正 ６．アニメキャストを矢印にそって動かす ７．別のアニメにして修正、矢印にそって向きをかえる ８．アニメキャストの回転中心を変更する…

#動画作成#9vae#SVG#フリー素材
Gr3@魔法陣プログラム言語製作中•8ヶ月前

宣伝的関連小説

そもそもGrmを完成させようと思ったきっかけになる、自作小説がこちら。 www.alphapolis.co.jp 陸奥の武将の娘がインカ帝国に渡るというトンデモ慈済小説ですが、 作中で「いんてぃかぱっく」という花札が出てきまして。 www.alphapolis.co.jp 南米花札 これがInkscapeで出来てるというのがまあ関連っちゃ関連ですが、あともう一つ。 魔法陣言語Grm完成のあかつきには、この「いんてぃかぱっく」を言語使ってゲーム化したいというのもあります。 その制作過程が言語のチュートリアルも兼ねられたらいいなと

#アルファポリス#SVG
ソフトウェア開発者のための OSS、まとめてみました！•9ヶ月前

JSON ベースでアニメーションをあらゆるプラットフォームに配信することができるOSS！「Lottie」

概要 今回は、JSON ベースでアニメーションをあらゆるプラットフォームに配信することができる OSS「Lottie」についてご紹介いたします。 「Lottie」は Android、iOS、Web、Windows 用のライブラリであり、Airbnb が開発をしています。 美しいアニメーションを簡単に作れ、またファイルサイズも非常に軽く、SVG ファイルを使用しているため拡大縮小した際の画像の劣化などもないという、非常にすばらしいライブラリです。 「Lottie」を使用することで静止画をプラットフォームに配信するのと同じくらい簡単に、アニメーションをを配信することができるということです。 それで…

#OSS#マルチプラットフォーム#JSON#軽量#SVG#簡単#きれい#アニメーション
内気なもんた君•1年前

SystemApps 内の画像一覧 (Windows 11 24H2 26100.994)

SystemApps 内の画像一覧 (Windows 11 24H2 26100.994) Windows Update のアイコンを探すときに苦労したので SystemApps 内の画像を抜き出してみました。 不要なコンポーネントを削除しているのですべてではないと思います。 サイズ、テーマ違い等で同様の画像はまとめてあります。 画像は実際にはサブディレクトリ内にあります。アドレス付きのリストは、こちらを参照してください。 - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - …

#Windows 11#24H2#SystemApps#SystemResources#画像#PNG#SVG
dnjiro’s 9VAe blog•1年前

地図を動かす動画の作り方

地図を動かす動画の作り方を説明します。 パソコンやスマホの無料アプリで作れます。いらすとやを動かす方法はこちら。ダンス動画の作り方はこちら。 しゃべる解説はこちら。 ほかの解説動画はこちら。 内容： １．9VAeきゅうべえのダウンロード ２．OpenClipart から日本地図を読み込む ３．ウィキペディアから大阪府の地図を読み込む ４．大阪府の外枠を消す ５．埋立て地を拡大 ６．夢洲の形を追加 ７．夢洲の色を変える。ふちを強調する ８．図形、矢印、文字をいれる ９．時間をひとコマにする 10．動画をMP４出力 ひとコマ解説動画の作り方 9VAeきゅうべえのダウンロード 画面キャプチャ方法 キ…

#動画編集#地図#万博#SVG
7rikazhexde’s tech log•1年前

CanvaとInkscapeを使用してPNGファイルからSVGファイルを作成する方法

経緯 やり方 Canvaでアイコンを作成してPNGファイルを保存する Inkscapeを使用してPNGファイルからSVGファイルを保存する 補足: InkscapeのDL方法 補足: SVGファイルのサイズ指定 サイト起動例 補足: Python、Node.jsでの作成方法 補足: favicon.icoの作成方法 まとめ 経緯 Docusaurusを使用して静的サイト(SSG)を作成する際にロゴをSVGで作成する必要がありました。 アイコン自体はCanvaで作成することができますが、SVGファイルでダウンロードする場合は有料版を使用する必要があります。 有料版は便利な機能がありますが、とりあ…

#SSG#Docusaurus#SVG#Inkscape