図形いろいろ

スマホの普及でSVGがかなり広がりました。イラストレーターなどの画像編集ソフトでも書き出し形式の一つとして定着しています。利点としてはコードを書き込むのでとても描画が速いということも大きいですが、エンジニアにとってちょっとした画像やグラフを作るときにとても都合がいいプログラミングです。その中でシンプルなものだけをまとめてご紹介します。
  • SVG 三角形のサンプル
  • SVGで三角形を描くサンプルを紹介します。 ちょっとしたデザインで三角が使いたくなった時にいちいちフォトショップやイラストレーターで作成して、サーバーアップして参照するのは面倒と感じることがありませんか。 そんな時には、SVGが重宝します。 三角形は特に決まったタグは無いようなので、パスを描画することになります。 塗りつぶした三角形 <svg width
  • 2016-10-02 17:13:23
  • SVG 四角形のサンプル
  • SVGで四角形、正方形、長方形を描くときのサンプルを紹介します。 rectタグが用意されており、簡単にかけます。 <svg width="100" height="100"> <rect width="100" height="100" style=&quo
  • 2016-10-15 23:54:09
  • SVG ひし形のサンプル
  • SVGでひし形、ダイヤを描くサンプルを紹介します。箇条書きやアイキャッチによく使われますが、画像をいちいち作るのは面倒です。SVGにもひし形を簡単に描けるようなタグはありません。そんな時はこのコードを使って数値を変えてカスタマイズして使ってください。 正方形のひし形 <svg width="100" height="
  • 2017-07-09 22:08:07
  • SVG 円のサンプル
  • SVGを使って円や楕円を作ります。SVGでは円の作り方は複数あって、用途によって使い分けるとよいと思います。 まずは単純な円を作るcircleタグ。 <svg width=200 height=200 class="bg"> <circle cx="100" cy="100
  • 2017-07-17 15:53:26
  • SVG 矢印のサンプル
  • たまに矢印が必要なとき、画像を作るほどでもないなぁ、と思う時があります。 そんな時はSVGが便利。 色やスタイルも変えられるので、コーディングの表現の幅も広がります。 角度もCSSやJSで変えられますが、上下左右の矢印のサンプルを載せておきます。 塗りつぶした矢印 右 <svg width="100" height="
  • 2017-12-14 19:13:09

top