2013/03/23 大阪にて開催された「第6回 HTML5など勉強会」で使用したプレゼン資料です。Read less
Already 4149 free icons for your games Last Update Apr 7, 2024 | Popular ones with random colors About the projectAn ever growing collection of free game iconsDozen new symbols are added weekly and organized in intuitive categories to offer both a comfy browsing and let room for serendipity. Stay up to date by following the project on twitter or just fetching the RSS feed. Easy styling thanks to S
どうも、松田直樹@まぼろし でございます。 当方、実はWeb制作が本業でして、このような記事を書くハメになってしまいました。(いや、喜んで書いてますよ) 「Fireworks」ってのは Photoshop のようなグラフィックツールでございまして。 Web制作に特化した機能が豊富だったりで Webな方々には多く使われていたりするのですが、僕も右に倣えで頻繁に使用しているわけです。この Fireworks に関する記事を書くにあたり、この歴史雑談録に何とか絡めようと表題のようなテーマに及んだ次第にござりまする。 ということで、この記事は「Fireworks Lover Advent Calendar 2012」の20日目の記事となります。(長いです。すんません) 今現在、Web制作界隈においては「脱ビットマップ」「SVG元年」といったキーワードが脚光を浴びておるわけですから、なんと時勢を読ん
Life with Web Browser Engine (Gecko, WebKit and etc), Mobile and etc. 来年の1月か2月のオーストラリアのF2Fミーティング以降にたぶんSVG 2.0のワーキングドラフトが更新されるらしいんだけど、今日はそれのお話。語られることないんで書いてみる。 HTML5だCSS3だって話がいろいろ聞かれるけど、SVGもやっと2.0の話がぼちぼち出てきてる。SVG自体は元から日本人とかが絡んでるってのをみんな知らなかったりする。キャノンの藤澤さんが元々仕様策定に絡んでいたりしたんだけど、2.0だとKDDI(もちろん日本のね!)が仕様策定に絡んでたり (次の更新の際にはエディタに入るんじゃないかな?)。 SVG 1.1とかを制定したときと比べて今一番違うところは、HTML5やCSS3を通った後ってところ。現在の状態だと、CSSとSVGで
Introduction Bonsai is a JavaScript graphics library. Bonsai's main features include: Architecturally separated runner and renderer iFrame, Worker and Node running contexts Paths Assets (Audio, Video, Images, Fonts, SubMovies) Keyframe and time based animations (easing functions too) Path morphing and much more... Community For the finer details, see the documentation. #bonsaijs on irc.freenode.ne
IE9 previewもSVGに一部対応したことですし、ここらで頭の整理でも…とおもったらSVGの仕様なんてまじめに読んだことないわけで。 仕様 Scalable Vector Graphics (SVG) 1.0 Specification - W3C Recommendation 04 September 2001 http://www.w3.org/TR/2001/REC-SVG-20010904/ Scalable Vector Graphics (SVG) 1.1 仕様 - W3C 勧告 2003年 1月 14日 http://www.hcn.zaq.ne.jp/___/REC-SVG11-20030114/index.html Mobile SVG プロファイル:SVG Tiny と SVG Basic - W3C 勧告 2003年 1月 14日 http://www.hcn.
前回の記事では、SVGのコードを“手書き”して、ブラウザー上に円を表⽰するまでを解説しました。しかし、複雑なベクター画像を作成する場合、コードの手書きは不向きです。例えば、ロゴや地図をSVGで作成するといったシチュエーションも十分に考えられます。こういった複雑なベクター画像はコードを⼿で書くのではなく、オーサリングツールを利⽤するといいでしょう。 代表的なSVGのオーサリングツールとしては、Adobe IllustratorやInkscapeがあります。そこで今回はIllustratorで作成したベクター画像をSVGとして出力し、これをDreamweaverで利用する⽅法を解説します。 さらにIllustratorでは、作成したベクター画像をSVGとして出⼒・保存することができます。その⽅法は2種類あり、1つは[Web およびデバイスように保存...]から“SVGとして出⼒”する⽅法、もう
Try-it Yourself 例 下の例は、HTML コード内に直接 SVG コードを埋め込んでいます。 これは、Firefox、Internet Explorer 9、Google Chrome、Opera、Safari によりサポートされています。 SVG 例 SVG 基本的な形状 円形 矩形 不透明度を持つ矩形 不透明度を持つ矩形 2 角の丸い矩形 楕円形 互いの上に重なる 3 つの楕円 2 つの楕円形 線 3 つの辺を持つポリゴン 4 つの辺を持つポリゴン 星形 別な星 ポリライン 別なポリライン パス 2 次ベジェ曲線 テキスト描画 テキストの回転 複数線上のテキスト リンクとしてのテキスト 線、テキスト、アウトラインの色を定義する (stroke) 線、テキスト、アウトラインの幅を定義する (stroke-width) オープンパスの線の終端にいろいろなタイプを定義します (
SVGは「特殊な画像」という特徴を持っています。SVGはただの画像ではなく、ベクター画像であり、JPEGやPNGといったラスター画像とは異なります。ベクター画像とラスター画像の差はそれぞれを拡大したときにわかります。 JPEGやPNGなどのラスター画像はピクセルで構成されているため、拡大すると画質が荒くなります。対して、ベクター画像であるSVGは、座標とそれを結ぶ線で構成されているため、拡大しても画質が変化することはありません。Adobe製品でこの違いを表現すれば、Photoshop(ラスター画像)かIllustrator(ベクター画像)かの違いと理解するといいでしょう。 また、SVGは「マークアップ言語」という特徴も持っています。SVGはXML言語であり、HTMLとよく似ています。そのため、SVGは画像であるにもかかわらず、テキストエディタで作成や編集ができるのです。 そしてSVGは、D
Inkscapeで描いたpath要素をRaphaëlを使ってアニメーションさせています。 まるで成長していない・・・・・・・・・・ はいだしょうこ画伯の5年間の成長を、SVGでモーフィングにしてみた jQuery UI v1.8.1 Raphael 1.4.3 - JavaScript Vector Library jQuery v1.6 (function($) { /** * MorphingImage class */ MorphingImage = function(name, data) { this.name = name this.data = data || [] } MorphingImage.prototype = { addData: function(pathName, pathData) { if(typeof pathData !== "object" || $
SVGを使ったコンテンツをいろいろ見て、可能性を探ってみる 2012/03/25(日) 03:44:42書いた人: girigiribauer タグ: SVG 今回は、SVGを使ったコンテンツをいろいろ見て、 どういった可能性があるのかを探ってみたいと思います。 様々なコンテンツを見ていくとよく分からなくなりそうなので、 一旦以下のようなカテゴライズをしてみます。 ビジュアル的に凝った表現 SVGの特性を利用したもの パフォーマンス クロスブラウザ、クロスデバイス(fallback) 1. ビジュアル的に凝った表現 モーグリのTweetキャッチ FinalFantasyXIII-2とMicrosoftがコラボして作られたコンテンツ。 技術的には、元々スクウェアエニックスが持っていたモーグリなどのキャラクターの資産を、Mayaという3DモデリングツールからSVGに書き出して動かしているとのこ
Scalable Vector Graphics (SVG) 2 W3C Candidate Recommendation 04 October 2018 This version: https://www.w3.org/TR/2018/CR-SVG2-20181004/ Latest version: https://www.w3.org/TR/SVG2/ Previous version: https://www.w3.org/TR/2018/CR-SVG2-20180807/ Editors draft https://svgwg.org/svg2-draft/ Single page version: https://svgwg.org/svg2-draft/single-page.html GitHub repository: https://github.com/w3c/svg
お知らせ 「関西マーケティング勉強会×まにまにカレッジ共催「ソーシャルコミュニケーション時代の『愛される会社』とは」」のお申し込みが始まりました! (2012.04.28) 「まにまにフェスティバル(まにフェス)P1」にご来場いただきありがとうございました! ご感想大募集中です。ぜひ!(2012.04.16) P5「どう作ればいい? どう使えばいい? SVG超入門」 2012年9月30日(日) 14:00〜16:30(予定) 中央会計セミナールーム (大阪府大阪市中央区備後町3-6-2 大雅ビル3階) 講師:門脇恒平(株式会社ShareWis CTO) 参加費:2,500円(当日会場にてお支払い・領収書あり/懇親会別途4,000円) 定員:70名 ハッシュタグ:#manisemi120930 このイベントに参加する 対象:SVGがどういうものか知りたいWebクリエイター 水準:初級 SV
このアプリです。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
以下に、いくつかの単純な例を示して、直線の描き方や曲線の描き方を見てみる。 パス要素のd属性に、「M 10,20」のように、命令コマンド(アルファベット1文字)と数字を入力していく。区切りは空白(改行など含む)かコンマ(,)のどちらかである(コンマの場合、前後に空白を付けても良いが、文字の前に、コンマが来てはならない)。 例:<path d="M10 20 L20 , 40 l0,10"> 図形を閉じるときは末尾にZかzを用いること。 例:<path d="M10,20 L20 40 L0,10z"> コンマは組となる座標の間の区切りのみに付けることができる。例えば、コンマ(,)を、命令コマンドの文字の前に付けるのは良くない。(注:これは私の独自の解釈です。仕様には明確に書かれていませんので、誤りがあるかもしれません) 悪い例:<path d="M10,20 L20 40 , L0,10z
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く