SVG はベクター グラフィックに使用される XML ベースの画像形式で、画質を損なうことなくサイズを変更できるため、レスポンシブ レイアウトで特に有用です。
SVG のサイズを変更する
SVG 画像またはシェイプのサイズを変更して大きくする場合は、3D スケーリングではなく、幅と高さのプロパティを使用します。選択ツールの [変形コントロール] を使用する場合、サイズスタイルの変更が必要になることがあります。
SVG を追加する方法
SVG をドキュメントに追加するには次の方法があります。
- SVG ファイルをインポートする（詳しくは下記をご覧ください）
- ペンツールとシェイプツールを使って SVG シェイプを描画する
- コードビューで SVG コードを直接挿入する
- デザインビューで SVG コードを貼り付ける
- SVG フィルタを適用してテキスト要素を SVG に変換する
SVG ファイルのインポート
SVG ファイルをインポートするには、[ファイル] > [アセットをインポート] メニュー コマンドを使うか、Google Web Designer ウィンドウに SVG ファイルをドラッグします。
インポートの際には、SVG を画像として扱うか、またはドキュメントの HTML 内に SVG コードをインラインで埋め込むかを選択できます。次の表に、各選択肢のユースケースをいくつか示します。
| 画像 | インライン |
|---|---|
|
|
SVG フィルタ
SVG フィルタを使用すると、SVG 要素にぼかしや発光などの特殊効果を加えることができます。SVG フィルタの一覧についてはこちらをご覧ください。
SVG フィルタの効果の例（左端は元の SVG）