14th
Framer Advent Calendar

FramerのSVG

目次

目次

目次

FramerのSVGの読み込み方法

FramerでSVGを使う方法は2種類あります:

  1. 画像として読み込む方法

  2. 編集できるグラフィックとして読み込む方法

画像として

プロパティパネル「Fill」→ 「Image」→ SVGファイルを追加で画像としてアップロードできます。特にパスやレイヤーが多い場合、パフォーマンスに影響を与える可能性があるためこの方法が適しています。

編集できるグラフィックとして

キャンバスにドラッグ&ドロップでsvgファイルをアップロードできます。この場合はダブルクリックで色や線などを編集できるグラフィックに変換されます。

SVGアイコンをコンポーネント化し、色違いのVariantsを作るのも便利そうですね!

Framer上でSVGを作成する

ショートカットキー G でGraphicモードに入り、簡単なSVGなら作成することが可能です

番外編: SVGアニメーション

https://animator.page/

番外編ですが、こちらのページでコピーできるコンポーネントを使うと簡単にSVGアニメーションを作成できます。

  1. サイトからコンポーネントをコピーしFramerのキャンバスでペースト

  2. キャンバスにドラッグ&ドロップでsvgファイルをアップロードしダブルクリックでグラフィックに変換

  3. 1のコンポーネントに接続する

  4. プロパティパネルで値を編集

\ このカレンダーで学んだことを、ハッシュタグをつけてXに投稿してください! /

このカレンダーで学んだことを、

\ ハッシュタグをつけてXに投稿してください! /

カレンダーへ戻る

カレンダーへ戻る

Let Potential Bloom

© Framer Japan Community 2025 All rights reserved

イベント

ブログ

テンプレート

コンポーネント

日本のFramerサイト

Proプラン25%割引コード

Japanese

Let Potential Bloom

© Framer Japan Community 2025 All rights reserved

イベント

ブログ

テンプレート

コンポーネント

日本のFramerサイト

Proプラン25%割引コード

Japanese

Let Potential Bloom

© Framer Japan Community 2025 All rights reserved

イベント

ブログ

テンプレート

コンポーネント

日本のFramerサイト

Proプラン25%割引コード

Japanese