誰でも簡単！！SVGで行うアニメーションとクリッピングマスク

https://web-designer.cman.jp/html_ref/abc_list/svg/

web-designer.cman.jp

SVGタグに使用する属性や、図形の形状で使用されるタグは形状毎に違うので、こちらでしっかりと理解しよう！

SVG 要素リファレンス - SVG: スケーラブルベクターグラフィック | MDN

« SVG / SVG 属性リファレンス »

developer.mozilla.org

SVGで使用する要素はこちらで確認できます。

SVGで画像を切り抜く [クリッピングマスク] [IE含め全モダンブラウザに対応] | 東京のホームページ制作 / WEB制作会社 BRISK

更新するコンテンツの画像が正方形・長方形以外の形のとき、どうコーディングしようか迷うことがありますね。 ただの

b-risk.jp

SVGで行うクリッピングマスクの基本がこちらのサイトでわかります！

Clippy — CSS clip-path maker

bennettfeely.com

CSSのclip-pathで図形を自動作成する便利なジェネレーター

SVG アニメーション（SMIL を使ったアニメーション）

SMIL を使った SVG アニメーションについて。animate 要素や animateMotion 要素、animateTransform 要素の基本的な使い方についての覚書です。

www.webdesignleaves.com

SMIL を使用した SVG アニメーション

runebook.dev

animate要素などを使用して、HTMLにアニメーションの記述を行っていく方法が詳しく説明されています！

SVGのプロパティを理解してアニメーションさせてみよう | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作

どうもですよ、はやちですよ( ˇωˇ)☝ 今回は、SVGのプロパティを理解して実際に動かしてみようと思います( ˇωˇ)☝

liginc.co.jp

こちらではSVGにかかわる基本的なCSSプロパティがわかりやすく説明されています！

SVGとCSSで簡単な描画アニメーションを実現する

www.ibnet.ne.jp

ロゴをリッチに！？SVGアニメーションの簡単作成

皆さん、こんにちは。サツキです。今回は、SVGアニメーションの話をしようと思います。「SVGアニメーション」と聞いて難しいのでは？と思った方もおられるかもしれませんが、今回はCSSのみを使用した簡単に実装できるSVGアニメーションをご紹介し

www.e-webseisaku.com

5分で簡単にできる！SVGアニメーションの基本

今回は、簡単に実装できるSVGアニメーション実装の基本をご紹介します。複雑なアニメーションを実装することもできますが、そのためにはまず基本を押さえておくことが非常に重要になります。手順を理解して、ユニークなアニメーションを作成していきましょう。

ferret-plus.com

基本的なアニメーションの方法をこちらで理解していきましょう！

SVGアニメーション 作り方。

〽️ ベクターをwebで自由に動かす。

fuuno.net

こちらでは様々なアニメーションを丁寧な説明と共に紹介してくれています！かなり応用されているアニメーションもありますが、実際に自分で作成しながら学ぶと技術向上になると思います！

vivus.jsで簡単SVGドローアニメ　その1 - WEBサイト制作のElectric Fruits

SVGアニメーションSVGアニメーションを作る場合は、CSS3 のプロパティのfillやstroke-dasharray、stroke-dashoffsetを利用したり、transformで変形させる方法。JavaScriptを使う方方法。Adobe Animate、AffterEffectを使う方法など手段は様々で...

www.electric-fruits.com

もう使ってる？ たった3行で美しいSVGアニメが作れる「Vivus」がスゴい

まるで「見えないペン」で描いているような手描き風のSVGアニメーション。CSSとJavaScriptの知識があれば実装できる、定番アニメーション表現ですが、Vivusならもっと手軽に実装できちゃいます。 90年代初期のBLINKタグから、最新のCSS3トランジションやアニメーションに至るまで、Webページやアプリケーシ...

ascii.jp

vivus.jsというライブラリを使用したSVGアニメーションを行う方法です。

SVGで滑らかなモーフィング（変形）を！SVG Morpheus の使い方 | ARAKAZE NOTE

SVG Morpheus 今回はSVGを使って、特定の形から特定の形へのなめらかな変形を行う、いわゆるモーフィングを実現するJavaScriptライブラリをご紹介します。 あまり複雑なSVG間だと綺麗にいかないこともある... もっと読む »

arakaze.ready.jp

SVGモーフィングで、図形を徐々に変化させてみよう

モーフィングとは、ある図形から別の図形へと自然に変形するように中間の画像を補正して映像を見せる技法です。Flashでは「シェイプトゥイーン」でモーフィングを表現していましたね（懐かしい！）。CSS3のアニメーションだと、

www.webcreatorbox.com

JSやCSSで行うモーフィングアニメーションの作成方法です！

Vivus Instant - inline SVG animation with CSS

Inline SVG Drawing Animation

maxwellito.github.io

SVG画像をアップロードするだけで、アニメーションを自動作成してくれる、便利なジェネレーターです！

SVGの様々な書き出し方法（Photoshop,Illustrator）

Web業界でここ数年よく利用されるようになったなSVG形式ですが、様々な書き出し方法があるのをご存知でしょうか。今回は制作現場でよく使用するアプリ、Photoshop、Illustratorを使用したSVG形式の書き出し方法をご紹介します。

01earth.jp

イラストレーターとフォトショップでSVGファイルを作成する方法です！

Online Image Vectorizer

Online raster to vector converter. Convert your images (jpeg, jpg or png) into scalable and clear vector art (svg)

www.vectorizer.io

jpgやpng画像をアップロードするだけでSVGファイルを作成することが出来るオンラインツールです！

【#2】SVGを極めたい！~ ビューポートとは何か・svgタグの描画領域・width,height,viewBox属性の挙動について ~ | WEMO

前回、SVGで簡単に図形を描画してみたのですが、そもそもこの図形が描画されている領域はどういうものなのでしょうか。 また、タグにはその描画領域を決めるための属性として、width、height属性と、viewBox属性

wemo.tech

SVGの応用。レスポンシブなど描画領域について詳しく説明されています！

SVGを使うときに知っておくといいことをまとめました - Qiita

アイコンやロゴ、見出しやイラストなど、写真以外の画像ではSVGを使うことが多くなりました。PNGのように荒れたりしないし、使い方によってはCSSで変更することができるので便利です。ただ、PNGと…

qiita.com

SVG使用時の「困った」「わからない」の解決策がここに！