Softonic

SVGのサイズ変更

ステップ 1 / 2
次へ

SVGはベクター形式なので解像度に依存せず、どのサイズでも鮮明なままです。SVGの「サイズ変更」はラスタライズもせず、図形も変えません。このツールはルート要素<svg>に新しいwidthとheightをピクセルで設定するだけで、これは宣言された表示サイズにあたります。viewBox、パス、すべての座標はそのまま保たれるため、図形は縦横比を保ち、画質も落ちません。マークアップを貼り付け、幅と高さを設定し、結果をプレビューして、コピーまたはダウンロードしてください。

SVGのサイズを変更する方法

  1. 1

    SVGを貼り付ける

    `<svg>...</svg>`の完全なマークアップをテキストボックスに貼り付けます。

  2. 2

    幅と高さを設定する

    新しい幅と高さをピクセルで入力します。

  3. 3

    ライブプレビュー

    ツールがルートの`<svg>`の`width`と`height`を書き換え（無い場合は追加）、結果をすぐに表示します。

  4. 4

    コピーまたはダウンロード

    更新したマークアップをクリップボードにコピーするか、`.svg`ファイルとして保存します。

表示サイズとviewBox

SVGには表示サイズ（width/height）と、独自の座標系（viewBox）があります。

<svg width="200" height="200" viewBox="0 0 100 100">
    <circle cx="50" cy="50" r="40" />
</svg>

このSVGは画面上で200×200ピクセルですが、内部座標は0から100まで動きます。r="40"の円はviewBoxの約80%を占めるため、幅およそ160pxで描画されます。このツールはwidthとheight、つまり宣言された表示サイズだけを変更します。viewBoxや座標には手を加えないため、図形は縦横比を保ち鮮明なままです。これは、同じ絵を別のサイズで描くようブラウザーに指示しているだけで、描き直しているわけではないからです。

サイズを変えてもSVGが同じに見えることがある理由

SVGが<img src="icon.svg" width="500">のような形で配置されていたり、CSSでサイズ指定されていたりすると、周囲のページが表示サイズを制御し、ファイル内のwidth/heightを上書きします。その場合は、マークアップの中だけでなく、SVGが使われている場所（<img>、CSS、コンテナ）でサイズを変更してください。

線と文字は鮮明なまま

何もラスタライズされないため、文字は本物のベクターテキストのまま、線はどのサイズでも滑らかなままです。線の太さは座標系で定義されるので、図形と一緒に拡大縮小されます。サイズにかかわらず線の見た目の太さを一定に保ちたい場合は、サイズ変更の前に、元データのその要素にvector-effect="non-scaling-stroke"を追加してください。

マークアップをきれいに保つ

Figma、Illustrator、Sketchから書き出したSVGは、余分な重みを抱えていることがよくあります。エディター独自の名前空間（sodipodi:、inkscape:）、隠れたメタデータ、未使用の<defs>などです。このツールはサイズ以外はマークアップをそのまま残します。不要な部分を取り除くには、サイズ変更の前後にSVGOのような最適化ツールへファイルを通してください。

よくある質問

いいえ。ルートの<svg>にwidthとheightを設定するだけです。viewBox、パス、すべての座標はそのまま保たれるので、図版は正確な縦横比を維持します。

たいていはページ側がサイズを制御しています。<img>のwidth、CSSのルール、あるいはコンテナが、ファイル自身の寸法を上書きしているのです。マークアップの中だけでなく、SVGが使われている場所でサイズを変更してください。

はい。SVGはベクター形式なので何もラスタライズされず、文字も線もどのサイズでも鮮明なままです。元ファイルですでに文字がパスに変換されている場合は、ほかの図形と同じように拡大縮小されますが、それでも鮮明です。

はい。変更されるのはwidthとheightだけで、SVG内の<animate>、<script>、イベントハンドラー、CSSはそのまま残ります。

マークアップはサイズ変更後のプレビューを描画するためにサーバーへ送信され、リクエストの後は保存されません。保存も共有もされません。

関連ツール

マテリアルデザイン カラーピッカー

Material Designのカラーパレットを閲覧できます。任意の色調（50からA700）を1タップでHEX、RGB、HSL形式でコピーできます。

旗作成ツール

6種類のレイアウト、色、文字、シンボルで、シンプルな3:2のカスタム旗をブラウザ内でデザインします。SVGまたはPNGをダウンロードするか、ブラウザの印刷ダイアログを開けます。

方眼紙ジェネレーター

印刷できる方眼紙をオンラインで作成：方眼またはドット罫を選び、間隔をmmで設定し、A4かLetterと好きな線の色を指定して、印刷または鮮明なSVGでダウンロードできます。

画像アップスケーラー

AI超解像または従来の補間処理で、低解像度画像を2×、3×、4×に拡大しながら重要なディテールを保ちます。

ビジョンボードメーカー

目標をひとつのボードに視覚化：画像をアップロードし、オリジナルのタイトルとキャプションを添え、色とレイアウトを選べば、印刷用のPNGとしてダウンロードできます。入力した内容はすべてブラウザの中だけにとどまります。

クロスステッチ図案メーカー

JPEG・PNG・WebPを、10～150目、2～40色、記号、正確な目数、布サイズ付きの印刷可能なクロスステッチ図案に変換します。

このツールは他の言語でも利用できます