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

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

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

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

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

Sass

Sassは、プログラミング風のコードでCSSを生成できるスタイルシート言語です。 scss ファイルを、変換(コンパイル)してCSSファイルを作成します。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

4回答

402閲覧

SVGを微調整したい

KOMANETI

総合スコア16

SVG

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

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

Sass

Sassは、プログラミング風のコードでCSSを生成できるスタイルシート言語です。 scss ファイルを、変換(コンパイル)してCSSファイルを作成します。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2019/07/12 16:37

編集2019/07/12 16:44

前提・実現したいこと

SVGを微調整したいのですが、複雑すぎてわかりません。

こちらに書いてある通りに変更したいのです。
https://jsfiddle.net/3aq7y1bv/

要は、リツイートマークと保存マークについて、矢印や棒を統一したいということになります。

MやLなどSVGの構造は一部理解できても、いざ思う通りにはなかなか設計できず…。
どなたか、もしわかったらお願い致します。

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

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

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

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

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

guest

回答4

0

ベストアンサー

コマンドを1つずつ順番に理解していけば意外と簡単でした。(勉強になりました)
片方だけやってみたので、参考にしてください。
完成品は以下になります。
http://yutamptech.com/svg.html
※自分の勉強用のサイトなので、1週間で削除します。

もう片方(リツイートアイコン)は自分で考えてください。自分で考えてください。(少なくとも私にはその気力はありません)
各指示子については以下のサイトが参考になりました。
https://takaya-com.jp/archives/2015/10/svgpart2/
https://developer.mozilla.org/ja/docs/Web/SVG/Attribute/d

では、簡単に解説します。(間違ってたらごめんなさい)

以下のコードは人間が読みやすいように整形したコードです。
コマンドごとに改行し、適宜スペースを空けました。

HTML

1<svg class="icon icon-in"> 2<use xlink:href="#icon-in"> 3<symbol id="icon-in" viewBox="0 0 16 16"> 4<path d=" 5M 15 7 6c -0.553 0 -1 0.448 -1 1 7v 6 8h -12 9v -6 10c 0 -0.552 -0.447 -1 -1 -1 11s -1 0.448 -1 1 12v 7 13c 0 0.552 0.447 1 1 1 14h 14 15c 0.553 0 1 -0.448 1 -1 16v -7 17c 0 -0.552 -0.447 -1 -1 -1 18z 19M 9 7 20v -6.122 21c 0 -0.485 -0.447 -0.878 -1 -0.878 22s -1 0.393 -1 0.878 23v 6.122 24h -3 25l 4 4 4 -4 26h -3 27z 28"></path> 29</symbol> 30</use> 31</svg>

図を見れば明白ですが、コードにおいても「凵」と「↓」に分解できることが分かります。
それぞれ一行ずつ見ていきましょう。

・「凵」を描画します。

No.コマンド説明
0M 15 7 (15,7)の座標に移動
1c -0.553 0 -1 0.448 -1 1 (15,7)から[-1,1]まで三次ベジェ曲線を引きます。(指示子が小文字の時は相対距離を表します。以後[]は相対距離を表すこととします。)
2v 6 (14,8)から垂直方向に[6]だけ線を引きます。
3h -12 (14,14)から水平方向に[-12]だけ線を引きます
4v -6 (2,14)から垂直方向に[-6]だけ線を引きます。
5c 0 -0.552 -0.447 -1 -1 -1 (2,8)から[-1,-1]まで三次ベジェ曲線を引きます。
6s -1 0.448 -1 1  (1,7)から[-1,1]まで三次ベジェ曲線を引きます。
7v 7 (0,8)から垂直方向に[7]だけ線を引きます。
8c 0 0.552 0.447 1 1 1 (0,15)から[1,1]まで三次ベジェ曲線を引きます。
9h 14 (1,16)から水平方向に[14]だけ線を引きます。
10c 0.553 0 1 -0.448 1 -1 (15,16)から[1,-1]まで三次ベジェ曲線を引きます。
11v -7 (16,15)から垂直方向に[-7]だけ線を引きます。
12c 0 -0.552 -0.447 -1 -1 -1 (16,8)から[-1,-1]まで三次ベジェ曲線を引きます。
Endz(15,7)でパスを閉じます。(これで「凵」が完成しました。)

イメージ説明
丸くなっている部分は①、⑤、⑥、⑧、⑩、⑫の6か所ですので、この箇所をLineToに置き換えればいいことが分かります。
①なら”c -0.553 0 -1 0.448 -1 1”→”l -1 1”といった感じです。

・「↓」を描画します。

No.コマンド説明
0M 9 7 (9,7)の座標に移動
1v -6.122 (9,7)から垂直方向に[-6.122]だけ線を引きます。
2c 0 -0.485 -0.447 -0.878 -1 -0.878 (9,0.878)から[-1,-0.878]まで三次ベジェ曲線を引きます。
3s -1 0.393 -1 0.878 (8,0)から[-1,0.878]まで三次ベジェ曲線を引きます。
4v 6.122 (7,0.878)から垂直方向に[6.122]だけ線を引きます。
5h -3 (7,7)から水平方向に[-3]だけ線を引きます。
6l 4 4 4 -4 (4,7)から[4,4]まで直線を引いた後、[4,-4]まで直線を引きます。(同じ動作が連続する場合、指示子は省略できます。”l 4 4 l 4 -4”と同じ意味です。)
7h -3 (12,7)から水平方向に[-3]だけ線を引きます。
Endz(9,7)でパスを閉じます。(これで「↓」が完成しました。)

イメージ説明
丸くなっている部分は②、③の2か所だけですので、この箇所をLineToに置き換えればいいことが分かります。
(9,0.878)から(7,0.878)に一直線に引けばいいので、②と③をまとめて"l 7,0.878"に置き換えればOKです。

最後に一言。
絶対、SVGエディターで1から作ったほうが早いです。

投稿2019/07/29 03:20

編集2019/07/29 10:32
yutampp

総合スコア182

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

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

退会済みユーザー

退会済みユーザー

2019/07/29 08:23

最後の一言www
KOMANETI

2019/07/31 12:34

「ここだけ直せば角は丸くなる」という簡単な対処があると思い気軽にご質問させて頂いたのですが、まさかこんなに大変だとは…誠に申し訳ございません。 そして、その大変なものについて、ここまで丁寧に!!!!ご回答いただいたこと、心より感謝申し上げます。 どのサイトさんよりわかりやすかったです。本当にありがとうございます。
guest

0

c と s はベジェ曲線を表します。
c は x1 y1 x2 y2 x y、
s は x2 y2 x y
のパラメーターをとって最終的に座標 x y に移動するので、曲線が不要であれば単純に l x y に置き換えたらいいのではないでしょうか。

https://triple-underscore.github.io/SVG11/paths.html#PathDataCubicBezierCommands
https://developer.mozilla.org/en-US/docs/User:Jt_Sandbox/Curves_in_Paths

投稿2019/07/16 07:57

x_x

総合スコア13749

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

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

KOMANETI

2019/07/28 12:38

すみません、置き換えるといいますと、どこのことでしょうか?
x_x

2019/07/29 00:23

cとsをlにするということです。 「MやLなど」はわかっているのですよね? わかっているものに置き換えるだけです。
KOMANETI

2019/07/31 12:36

置き換えても形は崩れてしまいまして、他にもいろいろ必要だったみたいです。ありがとうございました。
guest

0

こちらにSVGの詳細がかかれてあります。
こちらを見て理解できなければ思う通りに設計することは
できないのであきらめるしかないです。
https://developer.mozilla.org/ja/docs/Web/SVG

投稿2019/07/13 00:40

yasutomi

総合スコア2937

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

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

KOMANETI

2019/07/28 12:38

ありがとうございます。
guest

0

コードで修正するのが、難しいのであればillustratorで編集してからSVGとして吐き出すという方法もあります。

投稿2019/07/29 01:52

beginner_t

総合スコア716

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

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

KOMANETI

2019/07/31 12:35

もとはイラレから作れるんですね。知りませんでした。ありがとうございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問