【JavaScript】免許証ジェネレータを作ってみた【SVG】 - Qiita

はじめに 仕事で少しSVGを扱うことがあったので、免許証ジェネレータを作ってみました。 制作工数: 2日間(20時間程度) 作ったもの 免許証ジェネレータ 🥳 パラメータを設定して↓のような免許証を生成できます。 使い方 下部のタブから画像やテキスト等を設定して「変更を反映」を押下します。 「画像を保存」からローカルに画像を保存できます。 ソースコード 雑ですが↓に置いています。 免許証ジェネレータの作り方 定数を設定しようと考えましたが、めんどくさくなってマジックナンバーだらけになりました😿 SVGコードのベストプラクティス的なものがよくわかっていないので今後勉強しようと思います。 技術 JavaScriptとHTMLだけです。 JavaScriptでSVGを生成して、HTML要素にappendします。 描画メソッドを作る 線、枠、文字、画像を描画するメソッドを作成します。 座標、大