イラストレーターSenJ4のブログ■女性イラスト・水彩画・キャラクター・建築パース/鳥瞰図・公共工事イラストなどGalleryで850点以上の幅広いタッチを掲載し、イラスト制作を承り中!素材集もOK♪
<< August 2018 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 >>
<< 先取り好きAppleがSafari 3.1に取り入れたもの 1 | main | Tシャツデザイナーを目指す♪ >>
スポンサーサイト
2018.05.09 Wednesday 
- 

一定期間更新がないため広告を表示しています

by 言いたい放題のイラストレーター スポンサードリンク | - | -
Safari 3.1でSVGを見て遊ぼう!
2008.03.23 Sunday 
OS X Leopard 
前回、Safari 3.1に「HTML 5」のサポートが搭載されたエントリーを書きましたが、もう一つ気になっているグラフィックに関するサポート追加があります。ほとんど話題になっていないので興味ないかな?
それは次の2点。
・CSS イメージおよび<img>要素のSVGイメージのサポート追加
SVG拡張テキストのサポート追加

Safari3.0でSVG対応してたようですが、Safari 3.1でSVGがさらに拡張されたようです。
SVGについてはイラストレーターやデザイナーの人達は良くご存じでしょうが、一般の人にはほとんど知られていないでしょうし、作る事も無いと思います。SVGって一体なんの事?と言う人は下記を参照して下さい。
SVG について ※Adobe Help Centerから引用
Web 用のビットマップ画像形式(GIF、JPEG、WBMP、PNG)は、縦横に並んだピクセルによって画像を描画します。 これらの形式のファイルはサイズが大きく、1 つの解像度(通常は低解像度)にしか対応できないうえ、Web 上でネットワークに負荷をかける傾向があります。 一方、SVG は、シェイプ、パス、テキスト、フィルタ効果を使用して画像を描画するベクトル形式です。 SVG 形式のファイルはサイズが小さく、Web 上でも、印刷する場合でも、さらにはリソースに制約のある携帯機器でも高品質なグラフィックが得られます。 ユーザは、鮮明さ、明瞭さ、ディテールを犠牲にすることなく、画面上で SVG 画像を拡大表示できます。 さらに、SVG 形式はテキストとカラーの表示にも優れているため、Illustrator のアートボードに表示されているのと同じ画像がユーザ側でも確実に表示されます。
SVG 形式は XML に準拠しているので、開発者にとっても、ユーザにとっても多くの利点があります。 SVG 形式では、XML と JavaScript を使用して高度な Web グラフィックを作成できます。
SVG 形式のグラフィックでは、強調表示、ツールチップ、音声、アニメーションなどの洗練された効果を使用してユーザの操作に応答できます。
今回の追加サポートでネイティブでサポートしたのか?と、SVGファイルをSafariへドラッグしてみましたが.....プラグインを入れないと表示はムリでした。後ほど私のSVGファイルで遊んでみて下さいね。

元々SVGは、2000年6月にW3CとAdobe、Apple、HP、IBM、Netscape、マクロメディア、マイクロソフト、OASIS、サン.....などを含むW3Cのメンバー達が協力して作り上げた、次世代WebのXMLベクター・グラフィックス・フォーマットで、解像度に依存しない、拡大しても荒れないベクトル形式です。


ご存知のようにベクトル形式の「illustrator」ファイルはPostScript言語をベースに記述されています。
なので実際に描いているイラスト(いわゆるベジェ曲線)はソフト側でテキストデータに変換されてるので、
illustratorなどのソフトを持っていない人はエディターなどで開くことは出来ますよね。
ちなみにillustratorを持っていなくても、PostScript言語が記述出来ればイラスト描け.....素人にはムリじゃ!

このSVGファイルはillustrator 9以降で書き出せます。つまり画像では無くて、XMLをベースとしたオープンな言語の記述なわけで、あらゆる解像度でアートワークの画質を維持できる形式というわけです。



もちろんテキストだからと言っても、FinderでSVGファイルをルックアップしても何も表示されません。
また、JavaScript などのスクリプト言語を追加すると、SVG ファイルでさまざまな機能を実行できます。
マウスをONにすると色が変わったり、何かのアクションを起こしたり、インタラクティブなコンテンツの作成が可能になります。といっても、複雑な記述をイラストレーターの私がそこまでやる気にはとてもなりませんが。Webデザイナーさんならヤリごたえは十分でしょうね。

Web上で有名なベクトル形式と言えば、Flashでお馴染のSWFファイルがありますね。
SWFファイルもillustratorで書き出せますが、ラスタライズされてないSVGファイルは、画像にテキストを埋め込んでも、記述言語ですからそのテキストを選択したり、文字の検索、編集まで可能なのです。
しかも通常のillustratorの.aiファイルよりもファイルサイズが小さいのが特長です。
もちろんレイヤー属性もそのまま保持されてるので、illustratorで後から編集・保存も出来ます。

これらがGIF・JPEG・PNGなどのビットマップ画像と大きく違う点ですね。例えばjpgなら▼こうなります。



《 実際にSafari 3.1で見て▼ちょっと遊んでみよう♪ 》


さて、私のギャラリーサイトのサーバーにSVGフォーマットのイラストをアップしてみました。
下の「サンプルSVGファイル」と言う文字をクリックしてみて下さい。別ウインドウで表示されます。

サンプルSVGファイル
※尚、見る事ができない人は→ 日本語《 Adobe SVG Viewer 3.0 》最終版をインストールして下さいね。
 ページ下部にあります。対応OSはMac OS 10.1~10.4となってますが、Leopardも当然OKです。

▲ご覧頂けましたでしょうか?
ニャンコのイラストが表示されていると思います。でも単なる画像の表示だけではありません。(^-^)

《 隠し文字を見つけよう!》
さて問題:
1:中央の黒い鼻の部分に文字が書かれています。読めますか? (拡大すればすぐ読めます)
2:ピンクの耳の部分には、ある文字が書いてあります。さて、なんという文字でしょうか?
3:口の下にある文字とSenJ4の間にも文章が書いてあるんですが、わかりますか?(^-^)


下記の操作方法でいろいろ遊んでみて下さい。
《 操作方法:》
ズーム■「Command キー+クリック」するとマウスポインタのある位置がズームインします。
    「Command キー+クリック&ドラッグ」するとズームインする領域を選択
    「Command + Shift キー+クリック」するとズームアウトします
 パン■Option キーを押しながら SVG 画像をドラッグすると好きな場所へ移動できます。

小さい画像をドンドン拡大してみましょう!高品質なまま表示されますよ。
画像に書いてある文章も選択出来ます。文字上にカーソルを乗せて選択し、コンテキストメニューを開き、
>選択しているテキストをコピー を選んでから、エディターにでもペーストしてみて下さい!
耳の部分を選択コピーすれば何が書いてるかわかります。ちゃんとフォントとして認識される筈です。
画像上で文字検索をすると、ハイライトされます。
こうして、ちょっと目には見えない文章が書けたりします。...ってなんの意味があるんだか (^_^;)
※尚、画像にはSenJ4の著作権表記やコメントなどのメタデータも入っています。ソースにいろいろ...

《 SVGの活用参考サイト♪ 》
現時点でのSVGの有効な活用例は、地図です。携帯でも利用されていますね。私の使っているauケータイ、EZガイドマップのコンテンツなどに利用されています。例えば「災害時ナビ」では自分の住んでいる近くの“避難所マップ”を拡大縮小が可能な「地図ビューワ」で見る事が出来ます。→ EZガイドマップ

地図に限らず、直線・曲線などの幾何図形を扱えるベクトル形式ですから、ロゴやバナー・説明図・グラフ・ページのデザインなどはベクトルの方が扱いやすいですし、JavaScriptが書ければFlashのようにアニメーションも可能なので動くサイトも出来ちゃうわけです。
参考として下記のサイトは古いですが、SVGで作られてますので是非ご覧下さい♪
SVG Examples
JavaScript サンプル集/support/SVG/
 ※サイト自体がSVGなので「Option キー+ドラッグ」でサイトまる事パン出来ますよ!すげぇ^^

《 SVGの問題点・・・ 》
Web上にGIF・JPEG・PNG は、どのサーバーにでもアップロード出来ますが、SVGの問題点として....
・サーバー側がSVGに対応してないと表示出来ない点
たとえばこのJUGEMではSVGファイル自体のアップロードができませんし、別のサーバーにアップしてリンクを張って表示させようとしても画像が表示されず、青い枠に囲まれた「?」の画像になってしまいます。

・Web上ではまったくと言っていいほど一般には普及していない点
なにしろ、ブラウザーの巨人「IE」がSVGをサポートしていないのですから普及するはずも無いでしょう。
今後も独自の「VML(Vector Markup Language)」しかサポートしないのでしょうか?
いえ、確かモバイル用にSVG Viewerを開発中と言う話をどこかで見たような記憶もあるのですが....?

PDFを見るためのAdobe Reader や Flashのプラグインはかなり一般にも知られてきましたが、SVGを見るためのプラグイン《 Adobe SVG Viewer 3.0 》 自体がまったく普及して無かったのも原因です。
今後、ブラウザ(特にIE)側でネイティブサポートして行かなければスタンダードにはなり得ないでしょう。
※ Adobeはブラウザ側がネイティブ対応する事を始めたので、2009/1/1でSVG Viewerのサポート終了を決定しました。
Mac OS X用のSVG Viewerは2001年11月のバージョン3.0から開発停止です。来年からはDLできないと言う話もあります。


《 オマケ:SafariとOperaのSVG表示対決! 》
さて、既にMozillaやOperaなどのブラウザも対応してますし、Safari 3.1でさらにSVG表示が拡張されたわけですので、ネイティブ対応しているOpera 2.6での表示と、Safari 3.1に《 Adobe SVG Viewer 3.0 》を入れた場合の表示と比べてみましょう! 現時点でどれだけ違うのでしょうか。


ご覧のようにOperaでは SenJ4の文字が正確ではありません。Safariは指定したフォント種で表示出来ています。また、Operaではズーム&パンのショートカットが動作しないのでコンテキストメニューからのみ。
《 Adobe SVG Viewer 3.0 》に対応しているSafariがさらに使いやすくなっているのがわかると思います。
W3Cが標準として認めているのですから、Macユーザーの私達は今後のSafariの進化に期待しましょう!

さて、このSVGフォーマットがFlashやPDFのように浸透して、次世代Web画像形式のスタンダードになる日は果たしてやって来るのでしょうか!? ....マイクロソフトしだいか?
by 言いたい放題のイラストレーター SenJ4 | comments(2) | -
スポンサーサイト
2018.05.09 Wednesday 
- 
by 言いたい放題のイラストレーター スポンサードリンク | - | -
コメント
ごぶたさん、です、せんちゃんw
肝臓壊したりしてませんか?

ケータイ画面の仕事をしていると、ベクトル形式の画像の扱いやすさにかなり助けられます。だって拡大縮小してもキレイだもの!まあ、描くのは面倒だけどねぇ・・。
ただやはり、カチッとした感じの絵一辺倒じゃあ面白くないわけで、家に帰るとフォトショでお絵かきですww。
はるこは最近、フォトショの他にイラレとフラッシュも使えるようになってきましたよー。今度企画展するときは、より楽しいページを作れるようになってるはず☆ その時はよろしくお願いしますニャンw(かわいこぶるw)。
【2008/03/25 2:13 AM】 はるこ |
はるこさま
オヒさで素!...いつもコレから始まってるね!
おぉ、ケータイの仕事始めたの?ついにプロデビューかぁ(^-^)/
Flashはケータイに欠かせないお仕事のアイテムの一つだものね!
ま、確かにはるちゃんにはフォトショがお似合いです!
懐かしき企画展・・・今は昔。
【2008/03/25 2:24 AM】 SenJ4@管理人 |
お気軽にコメントをどうぞ♪(尚、リンクの記述は弾かれます)





 


W E L C O M E !
《 イラストレーターSenJ4のブログ 》

I'm Mac User♪

 follow us in feedly
  広告・出版業界で活動中の札幌在住
Macを愛するプロ・イラストレーター
元々は広告業界のG・デザイナー上がり

本家イラストGalleryでは、女性イラスト
水彩画・キャラクター・イラストマップ
建築系など広告使用された作品を公開中
▼Galleryはコチラ


《 SenJ4オリジナル 2 SHOP♪ 》

iPhone/iPodケース・トレーナー
 マグカップなどのアイテム専門♪
グッズShop

▼オリジナルTシャツ専門♪
TシャツShop



▼お世話になってます!
Macブログ大集合!




WeatherEye

プライバシーポリシーについて
New Entry
SEN CHARA
《 SenJ4オリジナルグッズBlog 》


ニャンコTシャツ
★漫画家・野間美由紀さんオーダー



《 愛まっくんシリーズ 》Tシャツ
★5カラーのバリエで好評発売中♪

▼マクプー_MP01(MEN'S)


▼マクプー_MP02(MEN'S)


▼愛まっくんPeople


▼愛まっくんPeople_W

SenJ4's Works♪


▲札幌すすきのでやたら目に付く看板! 有名な飲食店ビル『桂和ビル』と専用駐車場で使用されています。是非!

遠い叫び
遠い叫び
■SenJ4がカバーイラストを担当した
記念的な探偵推理小説の単行本。

▼Mac OS専用の2ゲームパッケージ
エアブラシで描いた記念的作品!
ビリヤード
ビリヤード

麻雀
麻雀

SenJ4's Recommend


ロリポップ!
▲《 ライトプラン 》月額250〜が
容量50GBにパワーアップ♪
しかもお値段変わらず!安すぎっ!
SenJ4もロリポユーザー♪

スタンダードプランはこちら
120GB大容量で月額500円〜
マルチドメイン、SSSL・SSH対応
WordPress設置も超カンタン!


ムームードメイン
▲こんなに安い独自ドメイン他に無し
アート系なら.comがオススメ!
ロリポ系列レンサバで使いましょ♪


heteml
▲クリエイター驚嘆256GB容量!
動画のストリーミング配信も可能!


マイフィギュア
▲コレはリアルなフィギュアです!
お祝いや記念日にミニチュア人形♪


▲軽く月129円のライトプラン
ちょいとプレミアムな200GB!
なんとSSD360GB専有まで6プラン
さくらブログも50個まで!


Color Me Shop! pro
▲イラスト作品やポストカードを
オシャレなカートで販売してみよう!

For Creators♪

SenJ4が暴露する業界の話!
▼ illustratorになりたい人へのコラム

illustratorのためのコラム

Recommend♪


MyBook
▲イラスト作品集や写真集を作ろう!
スライドショーの公開も出来ちゃう♪

Recommend Books♪
Appleサポートページ

Category
Comment,Thanks!
  • iOS 7の壁紙を創るのが更に楽しくなる・・・!?
    カリー (11/27)
  • iOS 7の壁紙を創るのが更に楽しくなる・・・!?
    senJ4@管理人 (11/25)
  • iOS 7の壁紙を創るのが更に楽しくなる・・・!?
    カリー (11/25)
  • au iPhone5sのテザリング無料キャンペーンでの勘違い・・・
    カリー (11/25)
  • スケッチをデジタル化する《 iSketchnote 》が面白いかもしれない!
    SenJ4@管理人 (06/02)
  • スケッチをデジタル化する《 iSketchnote 》が面白いかもしれない!
    とめ (06/01)
  • LINEスタンプ・クリエイターの報酬に魅力はある・・・?
    u1 (04/09)
  • iOS 7の壁紙を創るのが更に楽しくなる・・・!?
    SenJ4@管理人 (03/12)
  • iOS 7の壁紙を創るのが更に楽しくなる・・・!?
    トッポギ (03/11)
  • LINEスタンプ・クリエイターの報酬に魅力はある・・・?
    SenJ4@管理人 (03/02)
Useful Links
Past Voice
Powered
ブログ内 検索!
About Me...
Mac my using it now!




▼リンク用バナー・ご自由に♪


▼ニャンわんの里親です♪
猫とMダックスのブログ
Only Master





■当ブログのオリジナルイラストの
無断転載・引用・使用を禁じます。
全ての著作権はSenJ4に帰属します
(C) illustclub All Right Reserved.


★Come back to Sapporo!

Mac、Macロゴは、米国およびその他の国で登録されているApple Computer, Inc.の商標です。Made on a MacバッジはApple Computer Inc.の商標であり、同社の許可により使用しています。

PAGETOP