This is an interactive article. To fully experience it, you'll need to turn JavaScript on. Today, I'll take you through the process I came up with in regard to transforming an SVG path into a vector rope drawing. We'll learn how to turn the path on the left into the rope on the right: The problem popped up on a project my colleagues were working on, and it stuck with me. I thought about it and sta
無料のアイコンはたくさんありますが、中でもオープンソースで利用できるアイコンは非常に使い勝手がよく、重宝します。商用のプロジェクトでも無料で利用できる、オープンソースのSVGアイコンのライブラリを紹介します。 10 open source SVG icon libraries that you can use for your next project by @zolidev 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 私は先日、reddit上でお気に入りのアイコンライブラリはどれですか？というスレッドを立ち上げました。このスレはすぐに人気がでて、私が知らないオープンソースの素晴らしいアイコンライブラリがたくさんあることを知りました。スレに基づいて、オープンソースのアイコンライブラリのベスト10をリストしたいと思い
シンプルなアイコン素材は、重宝しますよね。 Webサイトやブログ、スマホアプリなどにぴったりな、シンプルにデザインされた無料で利用できるSVG完備のアイコン素材を紹介します。 CC0なので、商用利用時のクレジット表記は不要、複製、改変、配布などもOKで、使い勝手がかなりよいと思います。
こんにちは！ Cacoo チームの中原です。現在CacooチームはFlashで作られている図の編集画面(以下エディタと表現します)を* HTML5 で置き換える開発を進めています。このブログでは、 HTML5 版 Cacoo で図形の描画に使用される、SVGを選択した理由と経緯について説明したいと思います。 （*置き換える理由については「Good-Bye Flash ~ CacooはHTML5で生まれ変わります」をご覧ください） どの技術を使って図形を描く?重視したのは「パフォーマンス」 図形の描画にどんな技術を使うか。いくつか候補を上げました。 2D Canvas 3D Canvas (WebGL) SVG (これ以外に、Unityという意見もありましたが今回はWeb標準技術を使うことを前提にしました。) さて、どれを使おう。私たちがどの技術を選択するのか、基準を決める必要があります。そ
東京の鉄道路線図SVGを作りました＆パブリックドメインで配布します ロンドン地下鉄路線図での作図方法に基づいた東京の鉄道路線図を作ったので公開・配布します time2014/12/20 hatenabookmark- Illustratorを使って、東京圏の交通路線図を作りました。 現在、これを書きだしたSVGファイルを以下に置いて、ウェブ上から見られるようにしています。まだマップとして大した処理はしていないので、PCとかだとスクロールが面倒ですが、スマートフォンなどタッチ端末だとそこそこ見られると思います。 なお、AIファイル・SVGファイルはパブリックドメイン(CC0)としますので、配布・改変・販売含め、煮るなり焼くなり好きに使っていただいてかまいません。 railmaps - github どうして描いたの？ 昔からハリーベック氏のロンドン地下鉄路線図がとても好きで、自分もこういうも
昨年の10月に iOS 7.0の Web 実装をレビューしました。このリリースは残念なもので、「大量のバグと壊れた機能があり、このリリースはどう見てもベータ版です」と判断しました。今 iOS 7.1 がリリースされたので、Apple がこの製品をどの程度改善したか再びレビューします。 良いニュースは、バグ、動作しない機能、パフォーマンス低下の大部分が解決されていることです。 例えば、SVG アニメーションは 60 fps に戻りましたし、ホーム画面に追加したアプリも無事に動作しているようです。 ホームに追加したアプリが元通りになりました Web 開発者から見て、iOS 7.1 の最も大きいニュースは「ホーム画面に追加」機能の不具合が解決されたことです。iOS 7 では「ホーム画面に追加」の機能は恐ろしく壊れていて、通知が無効になったり、ハードクラッシュしたり、他にも変な動作がありました。そ
「Snap.svg」は、SVGコンテンツのアニメーションと操作のための強力で直感的なAPIで、マスキング、クリッピング、パターン、フルグラデーション、グループ化などの機能によってコンテンツをインタラクティブで魅力的にできる。「Adobe Edge」ツール＆サービスを補完し、今日のモダンなWebブラウザに求められる強力な描画能力とパフォーマンスに優れたグラフィックス機能をサポートする。 Internet Explorer 6以降のWebブラウザ上でSVGを扱うためのデファクトスタンダード「Raphael」の作者である、アドビのディミトリ・ブラノフスキー（Dmitry Baranovskiy）氏が新たに作成しており、Apache 2ライセンスに基づいてリリースされる。なお、「Raphael」とは異なり、Internet Explorer 9以降、Safari、Chrome、Firefox、Op
これは GraphicalWeb (CSS, SVG, WebGL etc) Advent Calendar 2012 - Adventar への参加の記事です。 3日目の今日は私 id:rikuo がSVG画像ファイルの軽量化テクニックを取り上げてみます。 ちょっと長くなってしまったので、ご注意ください。 はじめに、SVGとは？ まず始めに、SVGとは何か？の簡単な説明です。 SVGとはScalable Vector Graphics（スケーラブルベクターグラフィックス）の略で、XMLを基盤に書かれた画像記述言語、またはベクター画像ファイルのことです。画像ファイルというと、JPEG、GIF、PNGまたBMPなどはよく知られていますね。それらの画像はピクセル（ドット）ごとに色を表現したもので、総じてラスター（ビットマップ）画像と呼ばれています。 対してSVGは座標や図形で扱うため、拡大・縮
クレジット表記なしで無料で商用利用できる60個のシンプルなアイコンセットがWebディレクションやWebデザインの情報を掲載しているArchからダウンロードすることができます。パスの変更・着色・拡大縮小などの加工も可能で、Illustratorなどのソフトで簡単に編集できるSVG形式となっています。 SVG形式のシンプルなアイコン60個セット | Arch http://www.ar-ch.org/mt/archives/2012/09/svg60.html 使い勝手のよさそうな、シンプルなアイコン60個は以下から。 ダウンロードはページ下部の青いボタンをクリックすれば完了します。 なお、禁止事項として以下の3つが挙げられています。 × 再配布、またはダウンロード可能な状態にすること × 販売 × 素材への直リンク
SVG が魅せる Web の未来 Firefox Developers Conference 2012, Osaka Brian Birtles 皆さま、こんにちは。Mozilla Japanのブライアンと申します。 今日は「才色兼備なグラフィックス」というテーマで話させていただきたいですが 最初に短い自己紹介をさせていただきます。 今日のテーマと打って変わって、私は才色兼備ではもちろんなくて、 グラフィックスについて話すくせに、デザイナーでもありません。 実は高校のとき、デザイナーになりたかったんですが、センスがなくてあきらめました。 それから、ウェブ開発もあちこちやりましたが、それも以外に難しかったです。 でも、私が悪いと思わなくて、ウェブが悪いと思いましたので、 ウェブを改善するため、2004年にボランティアとしてFirefoxの開発に参加し始めました。 今はMozilla J
このアプリです。YouTubeの作者紹介ビデオはこちら SVGファイルがObjCコードに変換できるとのことです。これがPaintCodeに勝っているともいえる理由は、 デザイナがなれたソフト(Adobe Illustrator, InkScape)で絵を書ける AIでも、EPSでも、svgに変換すればよいです。 @natsun_happy @tomohisa いいですよねコレ。Illustratorとで試してみたのですが、グラデーションメッシュを使っているとアウトでした。drawRect:が空っぽになりました。 — KatokichiSoftさん (@hkato193) 5月 30, 2012 こんな報告もありますのでご注意を。 安い（PaintCodeは、8500円ですが、こちらはなんと450円） これは、描画のためのUIを用意していない点が大きいですね。しかし、AIや、InkScape
The World Wide Web Consortium W3CのSVGワーキンググループは8月16日(米国時間)、SVG 1.1の第2版となる「Scalable Vector Graphics (SVG) 1.1 (Second Edition)」がW3C勧告になったことを発表した。SVG 1.1は2Dベクタグラフィックやベクタ/ラスタ混在グラフィックをXMLで表現するためのモジュール化された言語。グラフィックアプリケーションで利用されているほか、Webページにおいてスケールする画像データ、インタラクションやアニメーションのデータ形式として利用されている。 SVG 1.1 第2版では、第1版を公開してから発見された仕様上の問題がすべて修正されているほか、ドキュメントとしての読みやすさを向上させるためのスタイルの変更、そのほか解釈が曖昧だった部分をはっきりさせるための変更などが実施されて
MIX11で「SVG女子」が紹介されました！ 弊社が制作をさせていただいた「SVG女子」が先日ローンチし、MIX11で大きく取り上げられました。 こちらがその様子です。 日本上陸は4/26！「SVG女子」をより楽しむために、まずはSVGについて知っておきましょう。 それでは続きからどうぞ！ SVGの気になる疑問に答えます！ SVGって何？ SVG（Scalable Vector Graphics）は、XMLによって記述されたベクターグラフィック言語のこと、あるいは、SVGで記述された画像フォーマットのこと。W3Cでオープン標準として勧告されている。 Scalable Vector Graphics - Wikipedia 簡単に言うと、ブラウザで表示できるベクター画像のフォーマットです。 SVGって何がすごいの？どういうところが便利なの？ ベクターデータなので拡大しても荒れません。 例えば
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
SVGGraphはPHP製のオープンソース・ソフトウェア。HTML5が正式に決まり、メジャーなブラウザがHTML5対応を強めている。そんな中、ようやく日の目を見そうなのがSVGだ。技術的には昔からあるものの、対応ブラウザが限られることもあってあまり使われてこなかった。 棒グラフ、円グラフ SVGを使うと幸せなのが、クライアントサイドでレンダリングを行えるということだ。サーバサイドでは画像を生成する必要がなく、XMLベースでベクターデータを出力すれば良いだけだ。そしてSVGを使ったグラフライブラリがSVGGraphだ。 SVGGraphはPHPを使ってグラフを生成する。対応しているグラフは棒グラフ、円グラフ、折れ線グラフ、散布図となっている。棒、円グラフは3D表示にすることも可能だ。画像とは異なり、リンクを埋め込むことができたり、値のツールチップを入れることもできる。 折れ線グラフおよび散布
SVG-edit ブラウザ上で動くSVGグラフィックエディタのオープンソースが超凄いです。 次のようなインタフェースで、Chromeだとサクサク動くSVGエディタがGoogle codeにてオープンソースでダウンロード可能です。 SVGでお手軽にお絵かきしたい場合や、SVGなお絵かきサイトなんかを作るのにも活用できそう 描画したグラフィックをSVGに変換した例。ツールバーからそのまま出力可能です。 次のようなXMLデータになります。 触ってみるだけでも価値がありそうです。 関連エントリ JavaScriptでFlashやSVGを使わない3Dアニメーション PHPでベクターグラフィックスを作成するためのチュートリアル テキストで描画されたSVGグラフィックス
Scalable Vector Graphics Scalable 拡大/縮小できる 様々なもの/ことに対して適用できる Vector 絵をオブジェクト（円、四角、テキスト...）の集合として表現 ⇔ビットマップ画像 (画素の集まり) Graphics 図形/画像のための仕様 つまり、XML で 2次元図形を表現するための仕様 SVG の仕様 SVG W3C が標準化 SVG 1.1 (2003年1月) デスクトップ向け (Full) とモバイル向け (Basic/Tiny) SVG Tiny 1.2 (2008年12月) SVG 1.1 Full にない機能も (video/audio、折り返しできるテキストなど) 主要ブラウザのサポート Firefox, Opera, Chrome, Safari, Internet Explorer 9 既存技術との親和性 <svg xmlns="h
Google Web Search Google検索のインデックス対象にSVGファイルが追加された。SVGはXMLベースのベクタグラフィクフォーマット。スケーラブルでインタラクティブな2Dグラフィックのレンダリングが可能なフォーマットで、IE9でのサポートが明らかになってからWebコンテンツとして一気に普及する気配を見せている。SVGをインデックス対象に追加したことで、Google検索の対象データは次の種類まで増えたことになる。 HTML (.htm, .html) XML (.xml) SVG (.svg) テキスト (.ans, .asc, .cas, .txt, .text) リッチテキスト (.rtf, .wri) Microsoft Word/Excel/PowerPoint (.doc, .docx, .xls, .xlsx, .ppt, .pptx) OpenOffice.o
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
