SVGの画像サイズ指定でわかったこと - Qiita
せっかくHTML5なんで、SVGタグを使って画像をきれいに表示させることを検討してもらったのですが、 それを利用しようとしてわからなかったことが、サイズ指定でした。 imgタグだと、widthとheight属性を設定するかCSSで同様の指定をすればいいだけです。 さくっとできます。 しかし、SVGだとキャンパス制御になるためちょっとだけ面倒なようです。その面倒な面がわかったため取りまとめします。 svgタグは、HTML5で追加された新しいタグのようで「キャンパス」という表現が使われていることから、 ブラウザをキャンパス用に自由に自在に位置指定でオブジェクトを配置できる。 けれど、その自由さ故の分かりにくさがあります。 今回、サイトのロゴファイルをSVGファイル形式で保存した、logo.svgというファイルを作成した前提で説明です。 logo.svgで表示される大きさは幅450px高さ114
SVGでアウトラインをカスタマイズしてみよう
2014年7月30日 SVG これまで、二回ほどSVGに関する記事を書きましたが、SVGの面白さは伝わっていますかね…！？今回はSVGのアウトライン（線）の装飾に注目！オブジェクトを徐々に描いていくラインエフェクトにも挑戦します！SVGの基本的な情報や書き方は過去記事「アイコンフォントからSVGへ！より手軽にベクター画像を表示しよう」をご覧ください！ ↑私が10年以上利用している会計ソフト！ SVG線種プロパティの基礎 基本的な書き方ですが、SVGのコード内に直接記述する方法と、CSSで指定する方法があります。例えば stroke プロパティを使う場合： <svg viewBox="0 0 200 200"> <line x1="10" y1="10" x2="190" y2="190" stroke="#000"/> </svg> のように、 stroke="#000" と直接記述しても
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
