タグ

SVGに関するhatz48のブックマーク (7)

  • Shape Hover Effect with SVG | Codrops

    In this tutorial we’ll recreate the hover effect as seen on The Christmas Experiments website. We’ll be using SVG for the shape and Snap.svg for animating it on hover. If you have visited the fantastic new edition of The Christmas Experiments then you might have noticed the really cool hover effect in the Christmas calendar that uses a triangular shape. The shape is made up of a triangle using bor

    Shape Hover Effect with SVG | Codrops
  • 第3回 少し高度なSVG | gihyo.jp

    前回はSVGの基的な書き方を解説しました。今回は前回触れなかった座標変換・テキスト関連に、グラデーションを解説していきます。 座標とグループ化 SVGにはg要素という複数の要素をまとめるための要素があります。このg要素によってグループ化した要素に同じ色を適用したり、座標変換(後述)をすることなどができます。 グループ化のサンプルコード(SVG) <g fill="#33ff33"> <rect x="40" y="40" width="30" height="30" /> <polygon points="0,0 43.3,25 0,50"/> </g> グループ化のサンプルコード(SVGDOM) // g(group)要素を作成 var g = document.createElementNS(SVG, 'g'); g.style.fill = '#3333ff'; var rect

    第3回 少し高度なSVG | gihyo.jp
    hatz48
    hatz48 2011/06/08
  • XML -SVG(Scalable Vector Graphics)-

    ■ SVGとは SVGScalable Vector Graphics)とは、その名の通りベクタ画像であり、2次元の図形をXMLで 保存する為の技術です。ベクタ画像はjpegやgif、pngなど(ラスタ画像)と異なり、四角形や楕円などの図形の情報から 表現されるので拡大縮小に関係なくブラウザできれいに表示させる事ができます。 またDOMでも扱うことができたり、CSSで色や大きさなどの指定なども可能です。 ■SVGScalable Vector Graphics) http://www.w3.org/TR/SVG/ 但し、Internet ExplorerにはSVGを表示する機能がないので、 SVG Viewerというソフトをインストールする必要があります。 ここではAdobe社のSVG Viewerを下記のAdobe社のウェブサイトからダウンロードしてインストールすることにします。 ■

    hatz48
    hatz48 2011/06/08
  • Scalable Vector Graphics - Wikipedia

    Scalable Vector Graphics(スケーラブル・ベクター・グラフィックス、SVG、日: 変倍ベクタ図形[2][3])は、XMLベースの、2次元ベクターイメージ用の画像形式の1つである。アニメーションやユーザインタラクションもサポートしている。 1998年にアドビシステムズ・IBM・ネットスケープコミュニケーションズの3社によって提案されたPGML(英語版)(Precision Graphics Markup Language)[4]と、Autodesk・ヒューレット・パッカード・Macromedia・マイクロソフト・Visio(英語版) の5社によって提案された VML (Vector Markup Language)[5]をもとにして、W3C SVG ワーキンググループにより開発された[6]。現在の規格はオープン標準としてW3Cにより管理されている(#規格)。 1999年

    Scalable Vector Graphics - Wikipedia
    hatz48
    hatz48 2011/06/08
  • svgリファレンス

    <?xml version="1.0" encoding="utf-8"?> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve"> [内容] </svg> svgタグには属性として、viewBoxとpreserveAspectRatioを設定することができる。 objectタグにwidthとheightを設定したときに、svg画像の大きさを調整する。svgタグの属性属性名説明値例

    hatz48
    hatz48 2011/06/08
  • SVG女子|SVG Girl

    Daftar Serta Masuk Saat ini Di Situs Slots Online Terpilih Ojekslot Seperti yang kita pahami waktu ini ada sangat banyak permainan slot online paling sederhana yang dapat dimainkan dalam sekejap hanya cukup masuk di sana saja ojekslot terunggul. Di sini dapat ada sangat banyak bermacam permainan luar biasa yang pastinya dapat anda temukan dengan ringan. Beraneka permainan terbaik di sini dapat and

    hatz48
    hatz48 2011/04/29
  • 2011年はSVG元年に。デザイナー大注目の画像フォーマット「SVG」の特徴を一気におさらい。

    MIX11で「SVG女子」が紹介されました! 弊社が制作をさせていただいた「SVG女子」が先日ローンチし、MIX11で大きく取り上げられました。 こちらがその様子です。 日上陸は4/26!「SVG女子」をより楽しむために、まずはSVGについて知っておきましょう。 それでは続きからどうぞ! SVGの気になる疑問に答えます! SVGって何? SVGScalable Vector Graphics)は、XMLによって記述されたベクターグラフィック言語のこと、あるいは、SVGで記述された画像フォーマットのこと。W3Cでオープン標準として勧告されている。 Scalable Vector Graphics - Wikipedia 簡単に言うと、ブラウザで表示できるベクター画像のフォーマットです。 SVGって何がすごいの?どういうところが便利なの? ベクターデータなので拡大しても荒れません。 例えば

    hatz48
    hatz48 2011/04/27
  • 1