質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.35%
SVG

SVGは、XMLを基盤とした2Dベクター画像記述言語。画像を線・面といった図形の集合体として扱うベクター画像のため、環境に適した表示が可能です。アニメーション機能もサポートされており、簡単なインタラクティブコンテンツ作成もできます。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

0回答

389閲覧

icomoonでダウンロードしたSVGを、幅いっぱいに広げたい

kemusi

総合スコア2

SVG

SVGは、XMLを基盤とした2Dベクター画像記述言語。画像を線・面といった図形の集合体として扱うベクター画像のため、環境に適した表示が可能です。アニメーション機能もサポートされており、簡単なインタラクティブコンテンツ作成もできます。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2020/12/25 08:42

前提・実現したいこと

icomoonのSCGアイコンについて、サイズを大きくしたいです。

発生している問題・エラーメッセージ

inkscapeで変更しているのに、HTMLでサイズが変わりません。

###inkscapeによるサイズ変更の手続き
目的のアイコンはこちらのアイコンです。少しサイズが小さくて、枠いっぱいになっていないのです。
イメージ説明
これをHTMLで見るとこのようになっています。

HTML

1<symbol id="icon-person" viewBox="0 0 24 24"> 2<path d="M12 14.016q2.531 0 5.273 1.102t2.742 2.883v2.016h-16.031v-2.016q0-1.781 2.742-2.883t5.273-1.102zM12 12q-1.641 0-2.813-1.172t-1.172-2.813 1.172-2.836 2.813-1.195 2.813 1.195 1.172 2.836-1.172 2.813-2.813 1.172z"></path> 3</symbol>

そして上記アイコンをinkscapeで開き、下記のように枠いっぱいに大きくしました。
イメージ説明

結果このように大きくしたつもりです。

HTML

1<symbol id="icon-person2" viewBox="0 0 24 24"> 2<path d="m 12,14.016 q 2.531,0 5.273,1.102 2.742,1.102 2.742,2.883 v 2.016 H 3.984 v -2.016 q 0,-1.781 2.742,-2.883 2.742,-1.102 5.273,-1.102 z M 12,12 Q 10.359,12 9.187,10.828 8.015,9.656 8.015,8.015 8.015,6.374 9.187,5.179 10.359,3.984 12,3.984 q 1.641,0 2.813,1.195 1.172,1.195 1.172,2.836 0,1.641 -1.172,2.813 Q 13.641,12 12,12 Z"></path> 3</symbol>

しかし、これら2つを比較できるものを作ったのですが、サイズに変化がございません。

CSSを使えばごまかせますが、できればSVGの方で大きくしたいと思っています。もし可能であれば宜しくお願い致します。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問