SVG画像を書き出す際に重要な設定「小数点以下の桁数」とはなにか？ - 聴く耳を持たない(片方しか)
これはSVG Advent Calendar 2014の参加記事です。 昨日はmemocarilogのSaori Miyazakiさんによる「filter 要素の基本的な使い方と filter 要素をつかったモノクロからカラーへ変化するマウスオーバー効果を作る方法」でした。 第3日目は私 id:rikuo が担当します。 （※追記）第4日目はイロドルハナ(@shino212)さんの「はじめてSVGでアニメーションを作った時の話」です。 ちなみにまだ空いている枠はあるので、興味のある方は是非ご参加ください。 はじめにSVGはXMLをベースにしているためテキストエディタでも簡単に作れるとは言え、実際の制作は何らかのオーサリングツールを利用することがほとんどでしょう。 中でもAdobe Illustratorはベクター系ソフトウェアの代表的な存在で広く普及しています。このIllustratorか
Animating an SVG Menu Icon with Segment | Codrops
A tutorial on how to implement an animated menu icon based on the Dribbble shot by Tamas Kojo using SVG and Segment, a JavaScript library for drawing and animating SVG paths. Today we are very happy to share an interesting menu icon effect with you. The idea is based on the Dribbble shot hamburger menu by Tamas Kojo. At first, the icon is the classic burger menu icon. But when you click on it, it
サンプルコードで学ぶ SVGの読み方、書き方 (1/2)
SVGの概要から基本的な使い方、Web制作での活用方法までをじっくり解説する本連載。前回はSVGができることをおおまかに解説しました。今回は、SVGの仕様をもとに、SVGの書き方、読み方の基礎を学びます。 SVGを描く、そして書く SVGは画像であり、コードを書かずとも、ツールで描けます。例えば、Adobe IllustratorやInkscape、Sketchなどのドローソフトを使えば、画面の操作のみでSVGファイルを作成できます。 ドローソフトを使って用意したSVGファイルは、HTMLでimg要素、あるいはCSSの背景画像などとして読み込むことで、手軽にWebページの一部として表示できます。 <img src="example.svg" alt="" width="600" height="400"> .example{ background: url( example.svg );
【追記あり】SVGコードゴルフと,GIZMODO「Google新ロゴ」記事へ反論 - 聴く耳を持たない(片方しか)
＜ここから追記：2015-09-10＞当初投稿した内容が、前提から誤った思い込みで書かれておりました、詳しくは後半の追記を参照してください。 ＜／追記ここまで＞ はじめに先日こうしたツイートが話題になりました。 https://twitter.com/thespite/status/639107572679712772 これは先頃リニューアルが発表されたGoogle社のロゴ Evolving the Google Identity - Library - Google Design がシンプルな構成に見えることから、それを荒く手軽に作るなら（quick and dirty version）290バイトで作れるよ！という内容です。 リンク先の中身を見てみるとこのような490バイトのSVGファイルになっており <svg xmlns="http://www.w3.org/2000/svg" wi
拡張機能Snap.svg Animatorを使ってAnimate CCからSVGを書き出そう - ICS MEDIA
（注記）この記事で紹介の「Snap.svg Animator」はすでに公開が終了しています。この記事の内容はアーカイブとして残していますが、動作しないためご注意ください。 SVGエス・ブイ・ジーとはHTMLでベクターグラフィックスを扱えるテクノロジーです。JPEGやPNGなどのラスターデータに対し、SVGはベクターデータのため拡大縮小に強いことが利点です。本記事ではこのSVGを使ってHTMLでアニメーションを実現する方法を紹介します。 まず前提としておさえておきたいのは、SVGでアニメーションやインタラクションを実装するには比較的低レベルのAPIの理解が必要となるということです。SVG 1.1 仕様の学習コストが高かったり、コンテンツ開発時の生産効率が上がらないといった課題が考えられます。そのためアニメーションやインタラクション用途のSVGコンテンツの開発にはJavaScriptライブラリ
Progressive Enhancement And Data Visualizations | CSS-Tricks
DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! The following is a guest post by Chris Scott. Chris has written for us before – always on the cutting edge of things. This time Chris shows us something new in the form of a new charting technique his company offers. But it’s based on something old: the fundamentals of the web itself. This m
Using ARIA to enhance SVG accessibility - TPGi
Jaws 15 and Internet Explorer 10 is the best combination at present, although nested SVG images are not well supported. NVDA and Internet Explorer present the role, title and desc, but support is erratic with multiple images announced and repetition of the title and desc. In all other browser/screen reader combinations the SVG is ignored. ARIA enhanced SVG accessibility It is possible to enhance t
Tips for Creating Accessible SVG — SitePoint
Scalable Vector Graphics (SVG) exists in a quantum state of accessibility. Which is to say that SVG is both accessible and inaccessible at the same time. Happily, there is no SVG uncertainty principle. We know which aspects of SVG are accessible to whom, which are not, and what we can do to improve both. SVG 1.0 was released by the W3C in 2001. SVG 1.1 came along in 2003, and SVG 1.1 2nd edition i
Tips For Optimising SVG Delivery For The Web
Sara Soueidan (@SaraSoueidan) is a freelance front-end web developer from Lebanon — focusing on HTML5, SVG, CSS3 and JavaScript. She loves writing and teaching and has combined both into writing articles and tutorials about front-end web development on her blog. She's a writer for various online magazines and for Codrops, where she is also an author and team member. SVGs are a great asset in our
透明が使用されているアートワークのプリントおよび保存
Illustrator ユーザーガイド Illustrator とは Illustrator の概要 Illustrator の新機能 よくある質問 Illustrator の必要システム構成 Apple Silicon での Illustrator の使用 ワークスペース ワークスペースの基本 Illustrator のもっと知るパネルで学習を高速化 ドキュメントの作成 ツールバー デフォルトのショートカットキー ショートカットキーのカスタマイズ アートボード入門 アートボードの管理 ワークスペースのカスタマイズ プロパティパネル 環境設定の指定 タッチワークスペース Illustrator での Microsoft Surface Dial のサポート 編集の取り消しとデザインヒストリーの管理 ビューを回転 定規、グリッド、ガイド Illustrator でのアクセシビリティ セーフモ
SVG
Illustrator ユーザーガイド Illustrator とは Illustrator の概要 Illustrator の新機能 よくある質問 Illustrator の必要システム構成 Apple Silicon での Illustrator の使用 ワークスペース ワークスペースの基本 Illustrator のもっと知るパネルで学習を高速化 ドキュメントの作成 ツールバー デフォルトのショートカットキー ショートカットキーのカスタマイズ アートボード入門 アートボードの管理 ワークスペースのカスタマイズ プロパティパネル 環境設定の指定 タッチワークスペース Illustrator での Microsoft Surface Dial のサポート 編集の取り消しとデザインヒストリーの管理 ビューを回転 定規、グリッド、ガイド Illustrator でのアクセシビリティ セーフモ
The SVG File Type: From Illustrator to the Web | Envato Tuts+
What Is the SVG File Type and What Does SVG Stand For? What is the SVG format? The SVG format was developed, and continues to be maintained, by the World Wide Web Consortium (W3C). The W3C comprises a group of clever folk who strive to standardize the web, making it an open and accessible place for everyone. SVG is good for the web, especially these days, as it bypasses the problem of screen resol
svgの印刷結果をクロスブラウザ化する
svgはxml記述で自由にグラフィックを描くことが出来る上，今日ほとんどのwebブラウザで表示・印刷することが可能であるなど，使い勝手が良いのが魅力です． そこで，レポート用紙などの用紙テンプレートをsvgで作ることを考えてみました．一般のテンプレートファイルはオフィスアプリケーションで作られていたりpdfで配布されているため，専用のツールを利用する必要があります．これをsvgで作っておけば環境を選ばずに出力可能となるためより利便性が高まるはずです． しかし実際に試してみるとwebブラウザ毎に出力結果が異なる等，中々思い通りには行かないようです．そこで，今回はsvgをwebブラウザで印刷する際の挙動についてまとめて見ました． svgを印刷用途で用いる svgは一般にディスプレイ上にグラフィックを描画するものとして考えられていますが，かつてのsvg1.2ではsvg printとして印刷用途と
アイコンフォントからSVGへ！より手軽にベクター画像を表示しよう
2014年7月3日 SVG ベクター画像を表示する際とっても便利なSVG。名前を聞いたことのある方も多いのではないでしょうか？SVG自体は10年以上前から存在するのですが、HTML5の普及とともに多くのブラウザーでサポートされるようになり、今年に入ってから徐々に見かける機会が増えてきました。今回はそんなSVGにフォーカスしようと思います。 ↑私が10年以上利用している会計ソフト！ 2014年7月3日 追記：SVGスプライトの書き方について修正＆追記しました。 SVGってなに？ SVG（Scalable Vector Graphics）はIllustratorで作成したようなベクター画像を表示する技術です。Web上で一般的に使われる画像形式であるJPEGやPNGなどのビットマップ形式とは違い、ベクター形式の画像は、拡大縮小しても画質が劣化しません。 Appleがレティナディスプレイを発表して
svg要素の基本的な使い方まとめ
この文書ではsvgをhtml埋め込みデータとして扱う際の覚書として作成した．svgの要素と属性は実際の例を踏まえて説明したつもり． 注意事項 仕様はここを参照のこと． 本文書では実際の挙動を調べつつ自分なりの解釈が入っているため，多々間違いが入ってしまうかもしれないが，気にしない． スクリプトを使ってsvg要素の中身(ソース)を出力しているため，一部実際のコードと表示されるコードとの間に差異があるが，予めご了承いただきたい． 目標は見栄えのする図形をsvgの手入力でサラっと記述できるようになることなので，複雑な図形は素直にinkscape等専用のツールを使うと良い．ただ，ここで示したことはツールを使う上でも役に立つと思う．特にアニメーションなど． svg:ベクター画像のカンバスの定義，title:タイトル，desc:説明 html文書においてsvg画像を挿入したい場合,embed要素を用い
Retina対応にSVGは本当に使えるのか？
高解像度スクリーンに対応できるのは嬉しいですが、普通の解像度しか持たない端末にも大きなファイルをダウンロードさせなければならないのは、3G回線などの遅い回線での表示パフォーマンスを考慮すると、SVGが適していないケースもありそうです。ただ、サーバ上でGZIP圧縮した場合、平均30%ほどサイズを削減できることを考慮すると、数十KBの差がある場合を除いて、表示パフォーマンスと表示クオリティのバランスもとれてくる気がしています。 ちなみに、Illustratorで「圧縮」を選択してsvgzとして保存すると2,395Bになりました。これならPNG8のファイルサイズにだいぶ近くて良い感じですね。Apacheの設定にSVGZが記述されていれば圧縮版を使えるので、このサイズだったら現実的な気がしてきました。ただ、サーバの設定がうまくいかないのか、Illustratorでの書き出しが悪いのか、SVGZを表
Advent Calendar 3日目:SVG画像を1キロバイトでも削るダイエット術！ - 聴く耳を持たない(片方しか)
これは 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は座標や図形で扱うため、拡大・縮
CSSで画像をグレースケールにする - Qiita
img { -webkit-filter: grayscale(100%); filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); filter: gray; } 1行目がwebkit系 2行目がFirefox 3行目がIE ■確認できたブラウザ ・Google Chrome ・Safari ・Firefox ・IE7〜9 ※Op
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Tumblr
WORKS ONLINE BOOK STOREの移管に関して