create-react-appで作成したアプリの場合、デフォルトで svg ファイルをコンポーネントとして読み込むことができます。 import { ReactComponent as Hart } from './assets/hart.svg'; export function App() { return ( <Hart style={{stroke:'gray', fill:'lightblue', width:'300px', height:'300px'}}/> ); } viteで作成したreactアプリは、デフォルトで svg ファイルをコンポーネントとして読み込むことができません。 そこで svg ファイルをコンポーンネントとして読み込むためのライブラリをインストールします。 ライブラリはたくさんありますが、2022年3月16日時点で主要そうなところをピックアップしまし
アイキャッチ画像ジェネレーター 当サイトのアイコンを使用して、簡単にアイキャッチ画像(Featured Image)を作成し、png形式のファイルでダウンロードすることが出来ます。
2021年6月2日CSS SVGファイルをCSSでレスポンシブにする方法を紹介します。 おしゃれなSVGファイルの入手方法や編集方法は、unDrawとFigmaでSVGをCSSでアニメーションさせるための下準備手順を参考にしてみてください。 <svg width="500" height="500" viewBox="0 0 500 500" fill="none" xmlns="http://www.w3.org/2000/svg"> ... </svg> SVGでは、上のように、widthとheightを直接指定することで幅と高さを決めることができますが、 これではレスポンシブになりません。 よって、次のようにします。 widthとheightを削除 <svg viewBox="0 0 500 500" fill="none" xmlns="http://www.w3.org/2000
Blogger SVGアイコン26種類 /responsive/sprite_v1_6.css.svg • ガジェおた（本館）
<style> .svg-icon-36 { width: 36px; height: 36px; fill: white; /* Can edit color */ background: orange; /* Can edit color */ padding: 5px; } </style> （注）投稿記事内のみ有効な CSS記述は、 styleタグ で囲む必要があります Google Blogger ブログの "全テンプレート（テーマ）" で利用可能な「SVGアイコン26種類」を まとめました！ /responsive/sprite_v1_6.css.svg#[SVGアイコン名] にて呼び出せますよー。 <p> <svg class="svg-icon-36"><use xlink:href='/responsive/sprite_v1_6.css.svg#ic_24_email_
GitHub - yisibl/resvg-js: A high-performance SVG renderer and toolkit, powered by Rust based resvg and napi-rs.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
react-native-svgで手書きアプリを作ろう - カミナシ エンジニアブログ
カミナシの浦岡です。弊社が開発している「カミナシ」には、 以下のような用途を想定して、手書きメモ機能を組み込んでいます。 カメラで撮影した写真の上に矢印マークやメモを追加したい キーボード入力に不慣れなユーザーでも素早く簡単にメモを録りたい 手書きで入力できる署名欄 ちょっとした機能ですが、弊社アプリのように現場作業で使われるケースにおいて何かと重宝されている機能です。 今回、react-native-svgを使った実装について紹介します。 手書き線の表現 手書きされた一筆、一筆をsvgのpathタグを使用して表現することにします。 pathタグはd属性に指定された座標群の情報を基に線を描画してくれます。 https://developer.mozilla.org/ja/docs/Web/SVG/Attribute/d 例えば、以下のように３点の座標を指定すると、それらを結ぶ線ができあがり
Tabler Iconsはシンプルで使いやすい、オープンソースで提供される汎用的な300以上のSVGアイコンセットです TablerはOSSのシンプルなダッシュボードを提供するプロジェクトで、その一環で今回はアイコンをOSSとして提供してくれています クセも無くさまざまなプロジェクトに使えそうな印象でした
Excel for Microsoft 365 Word for Microsoft 365 Outlook for Microsoft 365 PowerPoint for Microsoft 365 Excel for Microsoft 365 for Mac Word for Microsoft 365 for Mac PowerPoint for Microsoft 365 for Mac PowerPoint for the web Excel 2021 Word 2021 Outlook 2021 PowerPoint 2021 Excel 2021 for Mac Word 2021 for Mac PowerPoint 2021 for Mac Excel 2019 Word 2019 Outlook 2019 PowerPoint 2019 Excel 2019 for
Next.jsでsvgr/webpackを利用してSVGをimportしたコンポーネントにJestのテストを実行するとエラーになる問題と対策
はじめに Next.jsでSVGファイルの扱い方を検討したところ、@svgr/webpackプラグインを導入することで実現したかったことが容易に実現できたし、Storybookでも読み込めるように設定が完了して、大変満足していたところに、Jestのテストを走らせると下記のエラーが発生してしまいました。 これまでの過程は下記を参照してください。 Jestを実行すると発生するエラー内容 console.error Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object. Check the render method of `ForwardR
SVG Crop
Remove blank space from around any SVG instantly.
svg.healthは医療に関するものを中心に500以上のシンプルなSVGアイコンをフリーで提供するSVGアイコンプロジェクトです。 CC-BYで提供されており、クレジットを条件に個人でも商用でも無料で利用できるようになっています。 矢印や動画UI、電話や、メールなど一部は一般的なアイコンが含まれますが、殆どは医療関係が占めており、症状や医療デバイス、医療器具、療法、健康管理、医療従事者、各診療科、歯科向けなどのアイコンが用意されています。 ライセンス的に使いやすいとはなかなか言えないかもしれませんが、医療系素材の多くは有料である事が多いので割と貴重かなと思います。とはいえ歯科素材.comのように最近では無料利用できる医療系素材も増えてはいます。コストを抑えたい医療機関の方はご覧になってみては如何でしょうか。 svg.health
HalftonePAL - 画像をドットやライン、円などのパターンに変換しテキストやSVG形式で出力可能な無料＆オープンソースのツール！Win＆Mac＆Linux
Unreal Engine アセット アセット-Asset Custom Actor Coloration - 各種パラメータの状況を可視化... 2024-05-03 元Epic Games Japanのおかず氏（岡田 和也氏 @pafuhana1213）がUnreal Engine 5.4向けに各Actor・PrimitiveComponentが特定の条件を満たすか否かを可視化するプラグイン『Custom Actor Coloration』を開発しGithub上で無料公開しました！ 続きを読む Blender アセット Blender アドオン プラグイン＆アドオン-Plugin&Addon THE MEGA FLEET - Blender向けの最大級の自動車モデルコレク... 2024-05-02 3D CGI StudioによるBlender向けの最大級の自動車モデルコレクションア
CSSで背景画像や疑似要素として使えるようにSVGをBase64にエンコードしてくれるWEBサービス「Base64 Encode and Decode」
Base64 Encode and Decodeは、Illustratorなどで作ったSVGをCSSで背景画像や疑似要素として指定できるように、Base64にエンコードしてくれるWEBサービスです。 Base64 Encode and Decodeの使い方 まずは、SVGファイルをテキストエディタで開きます。SVGファイルをテキストエディタで開くと、以下のようなコードが表示されます。 <svg id="レイヤー_1" data-name="レイヤー 1" xmlns="http://www.w3.org/2000/svg" width="142" height="142" viewBox="0 0 142 142"> <defs> <style> .cls-1 { fill: #c3d4fc; } .cls-2 { fill: #eaeaea; } </style> </defs> <ti
preserveAspectRatio="none"の追加でOK SVGをレスポンシブで表示させる時にどうしても縦横比（アスペクト比）が固定されてしまい困り果てましたが、解決する方法が分かったのでメモ。 ソース例 <svg preserveAspectRatio="none"> </svg> たったこれだけでOKでした。あとは<div>などでSVGを囲んでCSSで調整するのみで解決できました。
SVGでパス上の文字の均等配置をブラウザ（Win10のFirefox, Chrome, Edge）によらずに実現する方法について調べました。 SVGではtext要素にtextLength属性を設定することで文字間隔を調整できる。 textLengthの値はテキストの幅を表していてテキストがそれに合わせて自動的に配置されるから……多分。 <svg width="600" height="400" xmlns="http://www.w3.org/2000/svg"> <text x="0" y="20"> This is a pen. </text> <text x="0" y="60" textLength="300"> This is a pen. </text> </svg> <svg width="600" height="400" xmlns="http://www.w3.org/
AnimateCC(Flash)で「Animated SVG Exporter」を使ってSVGアニメーションを作成した話 | Qrunch（クランチ）
2019/5/26 追記 ・AnimateCCの使用バージョンについて訂正しました。 ・キーフレームアニメーション以外でも作成できる場合があるので追記しました。 はじめに 知人のポートフォリオサイトにちょっとしたアニメーションを入れることになり、 今回はAnimateCCで作成することにしました。 AnimateCCはHTML5のcanvasで動作するアニメーションを作成してくれますが、 作成されるjsファイルがES6形式ではないため、 WebpackやVue.jsなどに組み込むのが思ったより大変なことになりました。。 もっと手軽に使いたい！！ と思い調べていくと、AnimateCCはSVGアニメーションが書き出せるとのこと。 今回はこれを使うことにしました。 やりたいこと 星画像をクリック→星が弾けるアニメーション→画面遷移 Vue CLIで作成したプロジェクトにSVGアニメーションを入
⚙️ Step 1: Customize Change the height, color/gradient, the number of waves, and the overall complexity. 🎲 Step 2: Randomize Press the randomize button until you find an SVG wave you like. ⬇️ Step 3: Download Get the wave as an SVG, PNG or copy the code directly into your clipboard. This website is built on SoftrJoin 400,000+ companies and creators already using Softr. SVG Wave Generator is a fre
SVGファイル SVGファイル形式は、2次元のグラフィック、グラフ、イラストをwebサイトで表示する場合によく使用されるツールです。さらに、ベクターファイルであるため、解像度をまったく損なわずに、拡大縮小できます。ここでは、SVG画像の主な機能、メリットとデメリット、SVG形式の進化について説明します。 SVGファイルとは Scalable Vector Graphics（SVG）は、webに適したベクターファイル形式です。JPEGなどのピクセルベースのラスターファイルに対し、ベクターファイルは、グリッド上の点と線にもとづいて数式を使用して画像を保存します。つまり、SVGなどのベクターファイルは、品質を損なわずにサイズを大幅に変更できるため、ロゴや複雑なオンライングラフィックに最適です。 SVGがwebデザイナーに人気が高い理由は、そのサイズ変更機能だけではありません。SVGは、XMLコー
羽倉ねくら🐾 on Twitter: "この認識広まってほしいから言っちゃうけど、輪郭とか目の位置とかパーツ一部の一致でトレスとか言うの本当にやめてほしい…。 綺麗に見える位置って大体絞られるんだ…。 他の絵から輪郭だけ持ってくるとか、ただただ面倒なだけなので、そこそこ… https://t.co/pUXIbj0SVg"
この認識広まってほしいから言っちゃうけど、輪郭とか目の位置とかパーツ一部の一致でトレスとか言うの本当にやめてほしい…。 綺麗に見える位置って大体絞られるんだ…。 他の絵から輪郭だけ持ってくるとか、ただただ面倒なだけなので、そこそこ… https://t.co/pUXIbj0SVg
SVGにCSSやJSを組み込んでローディングアニメーションを作成する！ | Raccoon Tech Blog [株式会社ラクーンホールディングス 技術戦略部ブログ]
こんにちは！SDの開発担当のさいとーです！ 今回のネタは「SVG」です！ 皆さん、SVG使ってますか？？ SVG形式の画像って、拡大しても荒くならないとか、ロゴとかによく使われているとか、そういったイメージを持っている方が多いかもしれません。 良く使われているjpgやpngなどの画像形式との比較を簡単にまとめるとこんな感じになります。 特徴 SVG（ベクター画像） jpgやpng（ラスター画像） ここまでは良く目にする特徴かもしれませんが、 SVGはもっと色々なことができます！ この記事では、SVGにCSSやjavascriptを組み込んで「機能を持つSVG画像」を作り、 その機能をHTMLから呼び出す、ということをやっていきたいと思います。 例として、SVG画像でローディングアニメーションを作成してみましょう！ SVGの表示方法 まずはSVG画像の表示方法からご紹介します。 ※SVG画像
![SVGにCSSやJSを組み込んでローディングアニメーションを作成する！ | Raccoon Tech Blog [株式会社ラクーンホールディングス 技術戦略部ブログ]](https://cdn-ak-scissors.b.st-hatena.com/image/square/452d57bd246bb54ca35caa5415cf2a70123bcf5e/height=288;version=1;width=512/https%3A%2F%2Ftechblog.raccoon.ne.jp%2Fwp-content%2Fuploads%2F2019%2F09%2Floading4.gif)
Easy SVG Customization And Animation: A Practical Guide — Smashing Magazine
Developers often feel discouraged from editing SVG markup and experimenting with SVG animations, thinking it’s a significant time investment or they need to use a complex animation library to do so. In this article, Adrian showcases his favorite tricks, which make the process streamlined and fun. Scalable Vector Graphics (SVG) have been a staple in Web Development for quite some time, and for a go
最近ロゴやアイコンであれば、SVGにするのが主流になってきました。 ただ、SVG画像は他の画像に比べて画像の保存が面倒です。 今回はそんなSVG画像を簡単に保存するためのChrome拡張機能「svg-grabber」の紹介です。 svg-grabberのインストール svg-grabberのインストールはChromeウェブストアからインストールできます。
SVG Quick Editorは任意のSVGの各所の色やパスの削除等を簡単に行えるオープンソースのWebアプリです。 アップロードにはほとんど時間がかからず即座に表示されます。色やパスが個別にリスト化され、変更やパスの削除などが可能となっています。リストにマウスホバーすることでプレビューエリアの該当箇所がハイライトされるのでどの部分を編集するかも分かりやすくなっています。 SVGファイルの簡易的な編集をノーコードで行える、といったもので非開発者向けとなっています。本アプリはOSSとしてもソースコードが公開されています。ライセンスはMIT。 SVG Quick Editor
■2020/12/31追記 「続・Mohoから出力したSVGを制御したい妄想の話」ということで、続きを書きました。 ７記事あるけど。ワロス。 【SVG制御妄想１】SVG解析しないと始まらない https://qiita.com/flying_echidna/items/5a628db0d652d1558208 【SVG制御妄想２】Mohoから出力したSVGのマスクがバグる https://qiita.com/flying_echidna/items/3930caf04626deec7bfb 【SVG制御妄想３】連番データをどげんかせんと https://qiita.com/flying_echidna/items/ded3f3590c3d67fadb86 【SVG制御妄想４】変形させたいよなぁ？ https://qiita.com/flying_echidna/items/188634f3
SatoriはHTMLやCSSをSVGに変換するためのオープンソースのライブラリです。ホスティングサービスのVercel謹製のようです。 イメージ的にはHTMLやCSSを書く感覚でSVGを生成できる、と言った方が近いかもしれません。尚、JSX構文がサポートされています。 import satori from 'satori' const svg = await satori( <div style={{ color: 'black' }}>hello, world</div>, { width: 600, height: 400, fonts: [ { name: 'Roboto', data: robotoArrayBuffer, weight: 400, style: 'normal', }, ], }, )このように書く事で600×400サイズのSVGコードが生成される、というものに
週刊Railsウォッチ（20200526後編）Rubyでよくやるスレッドバグ、Kubernetesでよくあるミス10、CSS/SVG/Canvasの使い分けほか｜TechRacho by BPS株式会社
2020.05.26 週刊Railsウォッチ（20200526後編）Rubyでよくやるスレッドバグ、Kubernetesでよくあるミス10、CSS/SVG/Canvasの使い分けほか こんにちは、hachi8833です。先ほど以下のツイートを見つけました。 Ruby安定版保守についての講演（ @unakさん）とRubyアソシエーション開発助成の成果報告（@udzuraさん＆@aycabtaさん）を7/17(金)にZoomウェビナーでやります。事前に参加登録が必要なのでよろしくお願いします https://t.co/RyseFGvYES — Shugo Maeda (@shugomaeda) May 26, 2020 各記事冒頭には⚓でパーマリンクを置いてあります: 社内やTwitterでの議論などにどうぞ 「つっつきボイス」はRailsウォッチ公開前ドラフトを（鍋のように）社内有志でつっつ
みなさんこんにちは！編集部です。 寒くなってきましたが、しっかり保湿していますか？ 今回はAdobe AfterEffects(以下Ae)を使用してSVGアニメーションを制作する方法をご紹介したいと思います。 Bodymovinをインストールする まずAeのプラグインBodymovinをAdobeストアからDLします。 DLできない場合はLottieのGITHUBからもDLできます。 動かしたいベクターをAi形式で保存する SVGはベクターデータに動きをプラスしていくのでpngやJpgなどは使えません。 動かしたい画像は事前にベクターデータを用意しておきましょう。 ベクターデータをAdobe Illustrator(以下Ai)で開き、新規HDTVにペーストして保存します。 通常のアートボードでも問題ないと思いますがAe用のAiデータはこっちの方がいいって偉い人が言ってたのでわたしはこの形式
Preloaders.net - Loading GIF, SVG & APNG (AJAX loaders) generator
Loading GIF or, so called loader gif is an animation that indicates a loading process on a web-site or an application. Being an critically important part of web-site and application design and usability, mostly the animations are used to show that something is loading on the background (e.g. AJAX applications). The animation objects are usually used in GIF format which is very popular due to it's
GitHub - omnibrain/svguitar: Create beautiful SVG guitar chord charts
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
ssshape SVG blob/shape generator that puts you in the driver's seat start by drawing a few points ↷when you're happy, click the ssshape button ↷tweak it using the control buttons ↷
SVG Flag Icons
Powered by Nucleo: Icon Manager for Mac/Windows SVG Flag Icons Explore over 200 optimized SVG country flag icons — Perfectly crafted on a 32px grid No results found. Suggest missing flag. SVG Flag of Aaland Islands SVG Flag of Afghanistan SVG Flag of Albania SVG Flag of Algeria SVG Flag of Andorra SVG Flag of Angola SVG Flag of Antigua Barbuda SVG Flag of Argentina SVG Flag of Armenia SVG Flag of
CSS animation day18 となりました。 本日は、SVG を使って、Line でアニメーションを設定します。 1. 完成版 2. なぜか？ モニター心電図って病棟管理ではめちゃくちゃ大事ですが、なかなか難しいです。特に看護師さんたちが教科書で勉強するのに、適した教材は少なく、現場で苦労している姿をよく目にします。教科書のような静止画を、座学で見て勉強しても、臨場感がないため実戦に活かしづらく、苦手意識を持つ人々は多いと一循環器内科医として、感じております。 そこで、近い将来、SVG animation を使って、モニター心電図のweb siteを作りますが、この技術をふんだんに使えればと思いました。 3. 参考文献 CSS trick SVG line drawing animation | SVG Stroke Animation With Html and CSS 4.
【サンプルコード付き】CSS背景アニメーション！jQuery・SVGなしで動く背景アニメーションの作り方 | SWELLマニア
.box { width: 100%; height: 500px; background: linear-gradient(180deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 35%, rgba(0,212,255,1) 100%); position:relative; } .box div { height: 80px; width: 80px; position: absolute; top: 8%; left: 8%; animation: animate 5s linear infinite; background: transparent; border:solid 3px rgba(255,255,255,0.8); z-index:999999; } .box div:nth-child(1) { top: 18%; left: 18%;
Shiho Yokoyama ｜ Nesto CXO on Twitter: "手描き文字を自動生成してくれるサイト。 スタイル、速度、読みやすさ、ストローク幅を設定し、SVG ファイルでダウンロードできて便利。達筆ではなく自然な感じ。 https://t.co/OufKcILWdX https://t.co/A0rcmEnyuc"
手描き文字を自動生成してくれるサイト。 スタイル、速度、読みやすさ、ストローク幅を設定し、SVG ファイルでダウンロードできて便利。達筆ではなく自然な感じ。 https://t.co/OufKcILWdX https://t.co/A0rcmEnyuc
GitHub - yawaramin/dream-html: Render HTML, SVG, MathML, htmx markup from your OCaml Dream backend server
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
IconsetはSVGアイコンを一か所でまとめて整理、管理できるデスクトップアプリです MacアプリのIconJarと似たような感じでしょうか。フォルダを作ってセットで管理しつつ、アイコン単体にタグ付けする等して探しやすくする事が出来ます。一応、タグは何もせずともファイル名を元に自動で作成してくれるみたいです という訳で試しに使ってみました 動作テスト アイコンをセットしてみました。一括でドラッグ&ドロップすると自動でフォルダを作成してくれるので名前を付けるだけ 任意のアイコンを選択するとSVGのコードをコピーできるだけでなくBase64やData URI、JSX等としても使えるようにしてくれます IconJarと違い、無料で利用可能でMacだけでなくWindowsでも使う事が出来ます。アイコンを多く扱う方はお試しになってみては如何でしょうか メールアドレスやユーザー登録等も不要です。が、
漫画で使えそうな背景画像（SVG）をPLATEAUの3Dモデルとblenderを使って作ってみた！ - Qiita
（※東京駅周辺） みなさんこんにちは！ PLATEAUのデータ活用してますか！！！ PLATEAUとは国交省主催で、現在56都市分のビル群や地形などの3Dデータを整備し、街づくりや防災、デジタルシティやメタバースなどの分野で（それ以外にも）利活用を広げることを目的としたプロジェクトで、そのデータは誰でも自由に利用することが可能です。 また、今年もその他の都市を整備するみたいです！ （トップページかっこよすぎ） そんなPLATEAUの3Dデータですが、ARやVRで仮想空間にリアルな3Dデータを配置したり、3Dプリンターを使って家を作ったりしているこの時代に、あえて2次元で平面の画像を作っていきましょう！！！！！ 田舎まで含めて全国分整備されたら日本中どこでも、サクッと背景画像が作れちゃうからめちゃ便利な気がする！！！ まずはデータのダウンロード G空間情報センターというところでPLATEAU
JSer.info #613 - Rollup 3.0.0がリリースされました。 Release v3.0.0 · rollup/rollup rollup.js#migration 破壊的な変更として、プラグインのAPIの変更、オプションの変更が行われています。 また、デフォルトでimport()を維持するように変更、chunkのアルゴリズムの変更なども含まれています。 そのほかには、デフォルトでNode.jsのESMサポートとの相互運用性を改善するためにoutput.interop/output.exports/output.esModuleオプションのデフォルト値が変更されています。 基本的には__esModuleというNode.jsが考慮しない(ESMとCJSの総合運用性のために使われていた)プロパティを減らす方向になっています。詳しい変更内容は次のPRを参照すると良さそうです。
CSS疑似要素にSVGを指定する方法
CSS 疑似要素の ::before や ::after は文字だけでなく，SVG を指定することもできます． クラスを指定するだけでデザインが適用できるので，毎回 HTML ソースに追加するような手間なく SVG を使用できるようになるので超楽です． 大きさ指定不要の場合最も簡単なのは content に直接 URL を指定してしまうことです． url() を使用することで，SVG ファイルを相対パスで呼ぶことができます．
Wireframerはモックアップ等でダミーテキストを表現する為のSVGを作成できるシンプルなWebアプリです たまにインフィニティスクロールのローディング時での採用も見かけますね。テキストが表示されますよ、とロード中に明示する、みたいな 行数やテキストの高さ、角丸や色などが設定可能です。SVGで出来ているのでアニメーション等を追加するのも良いかもしれません 作ってみました。直接DLも出来ますが、コードをコピーする事も出来ます。 設定項目は、角丸、文字数、行数、テキストの高さ、スペースと色です。作成は設定内容に沿ってランダム生成されますので気に入らない場合はRefleshしてください 需要が無さそうでありそうなアプリですが、この手のWebフォントなどもあるので需要はあるんじゃないかなと思います Wireframer
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Vite + React(typescript) で SVGファイルをコンポーネントとして読み込む方法
FLAT SVG DESIGNS | 無料(フリー)で商用利用可能なSVG素材サイト
SVGをCSSでレスポンシブにする方法 | devsakaso – プログラミングの独学サイト
シンプルで汎用的な、オープンソースで提供される300以上のSVGアイコンセット・「Tabler Icons」
Microsoft 365 で SVG イメージを編集する - Microsoft サポート
医療に関するものを中心に500以上のシンプルなSVGアイコンをフリーで提供する・「svg.health」
SVGのサイズを「縦のみ」または「横のみ」で固定したいとき | QWERTY.WORK
SVGのtextPath要素上のテキスト均等配置について - Qiita
SVG Wave Generator – Create SVG waves for your designs
SVGファイル：ファイルを作成、編集、開く方法 | Adobe
サイト上のSVG画像を簡単に保存できるChrome拡張機能「svg-grabber」
任意のSVGの各所の色やパスの削除等を簡単に行えるオープンソースのWebアプリ・「SVG Quick Editor」
Mohoから出力したSVGを制御したい妄想の話 - Qiita
HTMLやCSSをSVGに変換するためのオープンソースのライブラリ・「Satori」
SVGアニメーションをAfterEffectsで作ろう！｜ケーワンプラス｜ケーワン・エンタープライズStaffブログ
ssshape: SVG Blob/Organic Shape Generator with Extra Controls | fffuel
CSS animation で遊び倒す -SVG Line - - Qiita
SVGアイコンを一か所でまとめて整理、管理できるデスクトップアプリ・「Iconset」
2022-10-12のJS: Rollup v3、Volar 1.0(Vue LSP)、Satori(HTML + CSS = SVG)
モックアップ等でダミーテキストを表現する為のSVGを作成出来る・「Wireframer」