タグ

SVGに関するTomato-360のブックマーク (5)

  • ついに、Webアプリでの帳票印刷のベストプラクティスを編み出しました💡

    PHPカンファレンス 2021 1週間前イベント 〜 帰ってきたPHP勉強会@東京 の発表資料です。 https://phpcon.connpass.com/event/224128/

    ついに、Webアプリでの帳票印刷のベストプラクティスを編み出しました💡
  • SVG Repo - Free SVG Vectors and Icons

    500.000+ Open-licensed SVG Vector and IconsSearch, explore and edit the best-fitting free icons or vectors for your projects using a wide variety vector library. Download free SVG vectors and icons for commercial use.

    SVG Repo - Free SVG Vectors and Icons
  • SVGのviewBoxをわかりやすく紐解く|NEWS|株式会社INDETAIL(インディテール)

    11月も後半になり今年も残すところあと僅かとなってきました。 こんにちは、rockdです。 皆さんはSVG使ってますか? はじめてSVGを使うときにイマイチよくわからないのが、viewBoxの設定です。 今回はそんなわかりづらいことで有名な(?)viewBoxについて解説していきたいと思います。 viewBoxとは? viewBoxはsvgタグの中に記述する属性です。 viewBoxを指定することで、描画エリアのアスペクト比、およびその中の要素の相対的なサイズを決定します。 viewBoxで指定できる値は4つです。 viewBox="x, y, width, height" x,yは左上からみたx座標とy座標の位置、そしてwidth,heightは描画エリアの幅(座標値)と高さ(座標値)です。 4つの値は、カンマもしくは半角スペースで区切って使うことができます。 サンプルを使って解説 vi

    SVGのviewBoxをわかりやすく紐解く|NEWS|株式会社INDETAIL(インディテール)
  • 一から学ぶベジェ曲線 | POSTD

    (編注:SVGアニメーションを元記事にならい追加しました。リクエストありがとうございました。) 皆さんは線分のことをどう表現しますか? 線分は、端点によって考えられるかもしれません。その端点を P0 、 P1 と呼ぶことにしましょう。 線分を厳密に定義するならば、「 P0 と P1 を結ぶ直線において、 P0 と P1 の間にある全ての点の集合」と言えるかもしれません。これは以下のように表せるでしょう。 便利なことに、上記の定義から、その線分上のどこにある点の座標でも簡単に求めることができます。例えば、中点は L(0.5) にあります。 実は、2点間のどんな値でも、任意の精度で 線形補間する ことが可能です。そのため、時間関数 L(t) の t で線をたどるといった、より複雑なことができるのです。 ここまで来ると、「それが曲線と何の関係があるのか?」と不思議に思うかもしれません。2つの点だ

    一から学ぶベジェ曲線 | POSTD
  • D3.jsで作成したグラフ(SVG)を画像として保存する - Tech-Sketch

    先日公開した D3.jsをつかってData-Drivenにリッチなグラフやチャートを作成しよう の記事ではD3.jsをつかってグラフを作成しました。記事ではD3.jsで作成したSVG形式のグラフをPNG形式の画像として保存する方法をご紹介します。 D3.jsにはCSVやJSONなど 様々なデータ形式を扱う為の便利なメソッド が用意されており、アプリケーションへの組み込みが容易です。しかしアプリケーションへの組み込みとなると、「X月X日の状態のグラフを保存しておきたい」、「グラフを資料に添付したい」といった要望も出てくるのではないでしょうか。 単純に画面のスクリーンショットを取得する以外では Phantom.js を利用してキャプチャを取得する方法や Apache Batik を利用してSVGを変換する方法などが考えられましたが、クライアントサイドだけで完結しない上、実装が少々手間です。

  • 1