東京の鉄道路線図SVGを作りました＆パブリックドメインで配布します
東京の鉄道路線図SVGを作りました＆パブリックドメインで配布します ロンドン地下鉄路線図での作図方法に基づいた東京の鉄道路線図を作ったので公開・配布します time2014/12/20 hatenabookmark- Illustratorを使って、東京圏の交通路線図を作りました。 現在、これを書きだしたSVGファイルを以下に置いて、ウェブ上から見られるようにしています。まだマップとして大した処理はしていないので、PCとかだとスクロールが面倒ですが、スマートフォンなどタッチ端末だとそこそこ見られると思います。 なお、AIファイル・SVGファイルはパブリックドメイン(CC0)としますので、配布・改変・販売含め、煮るなり焼くなり好きに使っていただいてかまいません。 railmaps - github どうして描いたの？ 昔からハリーベック氏のロンドン地下鉄路線図がとても好きで、自分もこういうも
クリエイター手抜きプロジェクト［320］Illustrator CS3/CS4/CS5/CS6編 自動的にトレースしSVG/PNG形式で保存する／古籏一浩
クリエイター手抜きプロジェクト［320］Illustrator CS3/CS4/CS5/CS6編 自動的にトレースしSVG/PNG形式で保存する ── 古籏一浩 ── 投稿：2012年06月11日 著者：古籏一浩 今回は、Illustratorで選択したフォルダ内にあるJPEG画像を、トレースしてSVG形式またはPNG形式にして保存するスクリプトです。 トレースした画像データをベクター形式で保存できるSVG形式であれば、HTML5対応のブラウザでも表示することができます。ベクター形式の場合、ブラウザで拡大しても画像がモザイクのように粗くなってしまうことがありません。 HTML5のインラインSVGにすると、JavaScriptで手軽に操作することもできます。以下のプログラムは、選択したフォルダ内にあるJPEG画像を開いて「カラー変換（16色）」でのトレースを行いSVG形式で保存します。 (
アートワークの保存
Illustrator ユーザーガイド Illustrator とは Illustrator の概要 Illustrator の新機能 よくある質問 Illustrator の必要システム構成 Apple Silicon での Illustrator の使用 ワークスペース ワークスペースの基本 ドキュメントの作成 Illustrator のもっと知るパネルで学習を高速化 コンテキストタスクバーを使用してワークフローを加速 ツールバー デフォルトのショートカットキー ショートカットキーのカスタマイズ アートボード入門 アートボードの管理 ワークスペースのカスタマイズ プロパティパネル 環境設定の指定 タッチワークスペース Illustrator での Microsoft Surface Dial のサポート 編集の取り消しとデザインヒストリーの管理 ビューを回転 定規、グリッド、ガイド I
スタンダーズコーナー：W3C規格解説 「SVG」 - XML Square
SVGとは、ベクター・グラフィックスやイメージやテキストといった、2次元のグラフィックスをXMLで表現するための規格で、9月4日に勧告となりました。（http://www.w3.org/TR/SVG/）画像の表示にはよくJPEGやGIFが使われますので、SVGとの比較を通して、その特徴について説明します。 XMLデータ JPEGやGIFはバイナリデータとなるのに対して、SVGはXMLデータとなるので、様々なツールでの作成や編集が容易であり、ファイルのサイズも小さくなります。 ベクター方式 画像の表現には、色の強さや参照番号を数値化するラスター方式と、直線や曲線のパラメータによるベクター方式があります。JPEGやGIFはラスター方式であり、SVGはベクター方式です。 スクリプト SVGは途中にスクリプトを埋め込むことで、その内容を実行することができます。 アニメーション SVGはFlashの
デベロッパーズコーナー：実践！SVG（2） - XML Square
１．イントロダクション 本連載第１回ではSVGの基本的な書き方を解説しました。第２回では、他の規格と一緒にSVGを活用する方法を紹介します。SMIL Animationを使ってグラフィックを動かしたり、数字データとして格納されたXMLデータを、XSLTによってSVGのグラフィック表示に変換することができます。 2. SMIL Animationと連携してグラフィックに動きを加えるでは、Adobe社の「SVG Viewer」をIEにプラグインして使います。Adobe社のダウンロードサイトからダウンロードしてください。指定されたインストール手順に従うと、IEにプラグインされます。 また、3. XSLTによりXMLからSVGに変換するでは、「msxsl.exe」を使用します。まず最初にMicrosoft社のMSDN Libraryからダウンロード（無償）しておきましょう。 ２．グラフィックに動き
デベロッパーズコーナー：実践！SVG（1） - XML Square
１．イントロダクション SVGはXMLベースのベクタ・グラフィック記述言語で、ベクタ・グラフィック、イメージ、テキストの３種類のグラフィック・オブジェクトを記述することができます。「Scalable Vector Graphics (SVG) 1.0 Specification」は、2001年9月4日W3C勧告になり、新たなWebグラフィック標準になることが期待されています。 本連載では、SVGの基本的な書き方を紹介してSVG機能を概説するとともに、XSLTやDOMと連係させて使用する方法を解説します。なお、第１回では、Adobe社のSVG ViewerをIEにプラグインして使います。Adobe社のSVG ViewerをAdobe社のダウンロードサイトからダウンロードしてください。指定されたインストール手順に従うと、IEにプラグインされます。 ２．SVGの書き方 2-1. SVG文書のフレ
地理情報システムにも「2.0」の流れ、“国産Google Maps”が実現するか!?
財団法人日本情報処理開発協会（JIPDEC）とgコンテンツ流通推進協議会の協催によるシンポジウム「g-Contents WORLD 2006」が10月16日・17日に開催され、SVG電子地図を活用するためのデモが行なわれた。また、マイクロソフトやヤフーも出席し、自社の地域情報サービスについて講演した。 ● 「地理空間情報活用推進基本法」で、国が整備した基盤地図の共用が可能に 「g」は「Geographic」の頭文字で、gコンテンツとは「位置情報に関係したコンテンツ」を表わす。従来、このような情報を扱うために必要な地理情報システム（GIS）の開発・流通は、限られた事業者においてそれぞれ独自の仕様で行なわれており、基盤となる地図（「基盤地図情報」「背景地図」などという）の整備から地域情報などコンテンツの制作・流通に至るまで、事業者ごとに閉じられた縦割りのシステムの中で進められてきたという。 g
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年
SVGのグラデーションとJavaScriptとの連携
はじめに HTMLの周辺技術について解説する本シリーズですが、前回はSVGの様々な図形描画要素について解説しました。今回はWebデザインでも有用なSVGのグラデーション機能について解説します。また、JavaScriptからSVGの要素を操作する方法についても解説します。 サンプル一式は、会員限定特典としてダウンロードできます。記事末尾をご確認ください。 グラデーションを使ってみる 前回はfill属性を使って図形を単色のベタ塗りを行いましたが、SVGではよりスタイリッシュな、Webページで多用されるグラデーションによる塗りつぶしも可能です。SVGでは線形グラデーション（linearGradient要素）と放射状グラデーション（radicalGradient要素）の2種類のグラデーションに対応しています。 グラデーションの使い方はやや複雑なので、まずはサンプルから見ていきましょう。以下のコード
ベクター形式のグラフィックを扱うSVGの基本
SVG（Scalable Vector Graphics）とは、HTMLやXMLなどと同じくマークアップ言語の一種で、ベクター形式と呼ばれるグラフィックを扱うための言語です。 インターネットで一般的に使われる画像形式であるJPEGやPNGなどはビットマップ形式と呼ばれ、画像をピクセルという小さな四角に分割し、「各ピクセルが何色か」という情報を集めることで、画像を構成しています。 それに対し、ベクター形式のグラフィックスでは、画像を線や曲線、円などの図形の集合体として扱います。SVGの内容は「どこからどこへ線を引く」「どこを中心に円を描く」といった情報の集合になります。ベクター形式のデータは、ビットマップ形式のデータに比べ、拡大縮小を行っても画質が悪くならないというメリットがあります。 SVGは最初のバージョンであるSVG 1.0が2001年に正式な仕様となり、現在の最新版は2011年8月に
Daftar Serta Masuk Saat ini Di Situs Slots Online Terpilih Ojekslot
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
HTML5のInline SVGをJavaScriptで操作 (1/5)
HTML5で手軽に扱えるようになったSVG（Scalable Vector Graphics）。前回は、Inline SVG（インラインSVG）で基本的な図形を描く方法を解説しました。今回は、HTML5文書内に埋め込まれたインラインSVGをJavaScriptで制御します。 JavaScriptでSVG要素にアクセスする 最初に、制御対象となるSVGデータを作成しましょう。JavaScriptで制御したいSVG要素にはid属性を記述し、ID名を付けておきます。通常のHTMLタグ（要素）にID名を指定する場合とまったく同じです。たとえば<rect>（四角形）を制御したい場合は以下のように記述します（ID名は任意）。 <svg> <rect id="myBox" x="0" y="0" fill="red" width="100" height="80" /> </svg> ID名を指定してお
Web時代のgis勉強会 20120525 takagi 後編
1. 2012年5月25日 第3回 Web時代のGIS勉強会 Web(Map|GIS)の理念検討と、 初期的実践としてのSVG Map 高木 悟 KDDI Copyright © 2012 by Satoru Takagi @ KDDI All Rights Reserved 1 2. 2012年5月25日 第3回 Web時代のGIS勉強会 前編 基本的に、第２回の 前編資料です・・ http://www.slideshare.net/totipalmate/webgis-20110311-takagi 差分のみ掲載します 差分のみ掲載します のみ掲載 Copyright © 2012 by Satoru Takagi @ KDDI All Rights Reserved 2 3. 2012年5月25日 第3回 Web時代のGIS勉強会 WWWの変化の分析(仮説) • 元来のWWW(静的な
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
blog.svg-map.com is Expired or Suspended.
Microsoft PowerPoint - FIT2009_W3C_SVG_Panel_pub.ppt
Microsoft PowerPoint - SSK090310_SVGMap.ppt
Microsoft Word - ‡P‡WKDDI„¤‰ƒ‘−.doc
ASCII.jp：HTML5で注目！インラインSVGの使い方 (1/5)｜古籏一浩のJavaScriptラボ
