photoshopとテキストエディタを使ってSVGのソースコードを作り、CSSを適用させてレスポンシブにタイプするやり方です。 SVGはいろいろな記述方法があり、やり方を忘れそうなので記載しました。
目次
photoshopでSVGのソースをコピーする
![photoshopでSVGのソースをコピーする方法](https://eating2003.com/wp-content/uploads/2022/04/css-svg-1.jpg)
- 画像を作成する
- 作成したレイヤーを右クリックする
- SVGをコピーを選び、クリップボードにコピーする
テキストエディタで編集
![赤いところを削除する](https://eating2003.com/wp-content/uploads/2022/04/css-svg-2-2min.webp)
photoshopでコピーしたものを、そのままテキストエディタにペーストします。 その際に上の赤い部分を削除します。
![不要部分削除後のソースコード](https://eating2003.com/wp-content/uploads/2022/04/css-svg-3.jpg)
削除したら残りは上のようなコードになります。
htmlファイルにSVGコードを貼り、CSSを適用する
![htmlにSVGソースコードを貼り付けてCSSを編集する](https://eating2003.com/wp-content/uploads/2022/04/css-svg-4.jpg)
ポイント
- SVGのコードで、<g>タグと<path d=”~”>を残す
- SVGタグの、width、heightはpxなどの単位が無い状態にする
- SVGタグのviewboxは残す
画像はクロームのデベロッパーツールでCSSを適用してみた状態です。fillでカラーの指定もできます。
CSSのサイズと色が適用できれば、レスポンシブにもタイプできますね。