photoshopでSVGを作り、htmlに貼り、CSSでサイズと色をレスポンシブに調整する簡単な方法

photoshopとテキストエディタを使ってSVGのソースコードを作り、CSSを適用させてレスポンシブにタイプするやり方です。
SVGはいろいろな記述方法があり、やり方を忘れそうなので記載しました。

photoshopでSVGのソースをコピーする

テキストエディタで編集

photoshopでコピーしたものを、そのままテキストエディタにペーストします。
その際に上の赤い部分を削除します。

削除したら残りは上のようなコードになります。

htmlファイルにSVGコードを貼り、CSSを適用する

画像はクロームのデベロッパーツールでCSSを適用してみた状態です。fillでカラーの指定もできます。

CSSのサイズと色が適用できれば、レスポンシブにもタイプできますね。