スタートページ＞
（主張・講演、
Ｗｅｂ教材）
歴史＞
パソコンの歴史、
静止画像ファイルの歴史
参考ＵＲＬ
画像ファイル全般
ラスター形式
ベクタ形式
画像ファイルの基本知識
画像ファイルを取り巻く環境の変化
- 用途の変化
画像をデジタル化する目的は大きく２つある。
- 記録保管や印刷の目的
できるだけ元のアナログ画像を忠実に記録すること、さらに印刷目的では人間の視覚にあったインクの配色を重視することが重要。サイズが大きくなるのは、ある程度仕方がない。
- Ｗｅｂページでの表示の目的
サイズが小さく短時間で表示されることが重要。ある程度の画質低下は仕方がない。
現在ではＷｅｂページ目的が圧倒的に多く、保管・印刷目的もあるものの、専門分野に特化した用途に限定される。
しかし、インターネットが普及する 1990年代中頃までは、保管・印刷目的が大部分であり、ＤＴＰ（Desktop publishing、机上出版）が注目されていた。
- 通信環境の変化
現在 ４Ｇでは1Gbps、５Ｇでは20Gbps。の高速回線を固定料金制で利用しており、画像ファイルの伝送に時間や費用を考慮することは少ない。
- 1980年代～1990年代：大企業での専用回線を除けば、電話回線を利用していた。
初期は、300bps 最終的には 14Kbpsで現在の百万分の１の速度。電話料金：３分１０円。
- 1989年、インターネットが民間に開放。実際に広く利用されるようになったのは1990年代中頃
- 1990年代後半：ISDN 64Kbps
- 2000年代初頭：ADSL 回線下り50.5Mbps、上り12.5Mbps。この頃から固定料金制が出現
- 2000年代中期：光回線 1Gbps
- 配送媒体の変化
手渡しや郵送で渡すには、小型の記録媒体が必要。現在では TB クラスのＵＳＢメモリがある。
- 1980年 3.5インチフロッピーディスク 1.4MB
それまでは音楽用のカセットテープを用いていた。
- 1985年 最初のＣＤ－ＲＯＭ。650 MB これでだいぶ楽になった
- 2000年 ＵＳＢメモリ。当初は１２Ｍbpsだったがすぐに GB のオーダになった。
- パソコン、ディスプレイの変化
画像の鮮明度をよくするには、デジタル化でのサンプリング間隔を小さくする（画素数を大きくする）必要があるが、ディスプレイの解像度が小さいと１画面に収まらない。また、パソコンの性能（ＶＲＡＭの容量やパソコン－ディスプレイの伝送速度など）が低いと表示に長時間かかる。
ディスプレイの１画素に対応する１～４バイトのサイズのＶＲＡＭが必要であり、ＶＲＡＭの価格は高い
- 1993年 ＶＧＡ （640x480）
- 1994年 ＳＶＧＡ（800x600）
- 1996年 ＸＧＡ （1024x768）
- 1998年 ＳＸＧＡ（1290x1024）
- 1999年 ＵＸＧＡ（1600x1200）
また、大容量のＶＲＡＭ→ディスプレイを短時間で処理しるパソコンの性能も必要
画像ファイルの区分
画像の特徴や目的の違いにより、画像ファイルのタイプは次のように区分される。
ラスター形式 (ビットマップ画像)
元画像の各画素に対応した１～３バイトのデジタルデータとした画像ファイル。点のみで構成されているので、複雑な画像の表示に適する。逆に数式のグラフのような規則性が高い画像には適さない。
ラスタ形式画像を扱うソフトをペイントソフトという。Adobe Photoshopなど。
- 非圧縮画像
- 画像の１画素を１～３バイトのデータとして保存する形式。画像を忠実に記録できるが容量が大きくなる。そのため主に印刷を目的とした画像ファイル形式である。
BMP、RAW、TIFFなど
（元の画像は、光の３原色（ＲＧＢ）の加法混色であるが、印刷ではイエロー（Y）・シアン（C）・マゼンタ（M）の減法混色なので、それに変換することもある。）
- 圧縮画像
- Ｗｅｂページなどで表示する画像では、画像ファイルの容量を小さくことが求められる。多様な画像圧縮理論がある。
- 可逆圧縮
元画像を圧縮した圧縮画像から、何らかの方法により、元画像を復元できる圧縮方法。圧縮率は少ないが復元することは必要なときに適している。イラストなど、境界が明確で同一の色が続く画像に適する。
GIF、PNG など
- 非可逆圧縮
復元性を犠牲にして高圧縮率を目的にする圧縮方法。写真など細密な元画像は画素数が大きいので、高圧縮率が求められる。
JPEGなど
ベクター形式
複数の点の位置とそれを繋いだ線、中心点の位置と半径での円などの太さや色などを数値データとして持ち、表示する形式。データ量は非常に少なくできること、変形がしやすい特徴がある。数式のグラフ、統計データのチャート、単純な図形などの画像に適する。
ラスタ形式では、アナログ原画があり、そのデジタル化することが主であった。
それに対してベクター形式では、原画がなく、画像を創生することが重要な処理になる。そのため、「画像ファイル」と「画像作成ツール」を厳密に区分することはできない。
また、ベクター形式の画面の一部にラスタ画像を組み込むことが多い。それで「ベクター画像」とは「ベクター形式の画像を含む画像」だとするのが適切である。
画像ファイルの諸元と機能
ＲＧＢ表示色とビット数
- 8bitカラー（パレットカラー） 256色
１画素あたりのビット数を８（１バイト）とすると、２８＝２５６の色を表現できる。
256色の各色が固定的に決まっている場合もあるが、多くの場合、24ビットカラーの約1677万色などから表示に必要な256色を選んで0から255の色番号に割り当てる方式が採用される。
その場合、画像データ本体以外に、色番号と実際の色データの対応関係を記載したカラーパレット（カラーマップ）が添付される。このような表現方式を「パレットカラー」「インデックスカラー」という。
- 24bitカラー（フルカラー） 1677万色
光の３原色RGBそれぞれに8bit（256階調）の値を割当てる。1677万色なら人間の色感覚では十分だとされ、フルカラーといわれる。
- 32ビットカラー（フルカラー、トゥルーカラー）
24bitカラーにさらに8ビットを加えて、透明度（アルファ値）とし半透明処理をするなどに用いる。
- ディープカラー（30/36/48/64ビット）
10億色かそれ以上の色からなる色域を表現可能。
透明度
二つの画像を重ねるとき、後から与えた画像で前の画像は隠れてしまう。後画像び透明度を与えることにより、前画像が透けて見える。これは両画像の色を混ぜるにも使える。
一般に画像は長方形である。必要な部分だけを残し、それ以外の透明度を最大にすれば、任意の形状の図形のように見える。
JPEGは任意の透明度が指定できるが、完全に透明にするとノイズが発生する、GIF では 透過GIF があり、背景を見せることはできるが、半透明の指定はできない。PNG は全透明、半透明ができる。
印刷用表示色成分
- CMYK 印刷用
インクの混色は減法混色であり、３原色はＣ（Cyan）、Ｍ（Magenta）、Ｙ（Yellow）である。それにＫ（Key plate＝黒）を加えてCMYKという。
家庭用プリンタでは、自動的に RGB → CMYK 変換が行われるが、印刷物を作る場合、CMYK 変換した画像データを印刷会社に入稿する必要があることもある。
- グレイスケール カラー写真→白黒写真
人間の視覚が最も敏感に反応するのは緑で、最も反応が鈍いのは青である。カラー写真を白黒写真にするには、各ピクセルでＲ・Ｇ・Ｂの値を平均するのではなく、0.2126Ｒ＋0,7152Ｇ＋0.0722Ｂの変換を行う。
インターレース
通常の画面表示では、上から順に表示される。インターレースでは、まず数行おきに表示し、次にその間の行を表示することにより、粗い画像が次第に鮮明になるように見える。大きな画像を表示するときに効果がある。
インターレースGIF、プログレッシブJPEG、インターレースPNG など
アニメーション
画面の全部あるいは一部を変化した画像を作り、連続的に表示することにより、画面が動くように見せる機能
画像圧縮理論
画像ファイルの圧縮が活発になるかなり以前に、数学としての圧縮理論の基本はほぼ確立しており、特定の分野では活用されていた。また、画像圧縮では、これらの理論をそのまま使うのではなく、特性に応じた修正をしたり、複数の理論を組合せたりしている。
可逆圧縮の方法
- ？年 ランレングス符号化（RLE）
RLE（Run-length encoding、連長圧縮）は文字列中に出現する文字の繰り返しの回数を用いて文字列を圧縮する。
1967 年にアナログ テレビ信号の伝送に採用、1967年に1983年に日立製作所が特許取得とされているが、情報理論としては管理以前に知られていたと思われる。
白と黒以外にほとんど情報がないモノクロファクシミリでよく使われていた。
PCXでデフォルトで用いられ、BMP、TGA、TIFFでもエンコーディング方法のひとつとして使用されている。
- 1950年 差分パルス符号変調（DPCM）
DPCM（differential pulse-code modulation）。1950年にベル研究所のカトラー（Cassius C. Cutler）が発明。予測符号化の一つ。
予測符号化は周囲の値によって次の値を予測し，予測値と実際の値との差分値をハフマン符号化などで符号化する方式。自然画像や音声は値が滑らかに変化するので，隣り合ったサンプル値を予測値として使用することができる。
Lossless JPEG に使われている。
- 1952年 エントロピー符号化
符号化する情報の出現確率に応じて符号長を変え、平均の符号長を短くできる。
算術符号化とハフマン符号化（1952年にデビッド・ハフマンによって開発）が一般的。
エントロピーとは、平均の符号長は，そのデータについて測定されるエントロピ（平均情報量）以下にできないので，このエントロピにできるだけ近い効率で符号を割り当てるという意味。
JPEG 2000 で採用
- 1984年 適応辞書アルゴリズム（LZW）
LZW（Lempel–Ziv–Welch）は、1978年にAbraham LempelとJacob Zivが考案したLZ78法を、1984年にTerry A. Welchが改良した圧縮技法。
圧縮対象のデータを端から読み込んでいき、すでに読込済みの部分の一覧（これを辞書になぞらえている）の中に一致する箇所が発見されたら、その位置と（一致する）長さで置き換えるという手順を繰り返してデータを圧縮していく。
GIFおよびTIFFで使用。
非可逆圧縮の方法
- 1950年代 クロマ・サブサンプリング
1938年にジョルジュ・ヴァランシによるルーマ・クロマ分離をベースに、1950年代にAlda Bedfordがクロマ・サブサンプリングとして開発した。
これは人が色相や彩度やよりも明度の違いを重視することに着目して、輝度データに有利になるように信号における色情報を減らす圧縮、明るいレベルよりも暗いレベルに多くのレベルが割り当てるガンマ補正による色の割付などにより、データ量を削減できる。
JPEGで使用されている。
- 1974年 離散コサイン変換（DCT）
DCT（discrete cosine transform）は、1974年にAhmed、Natarajan、Raoによって開発
離散信号を周波数領域へ変換する方法の一つ。最も広く使用されている非可逆圧縮の形式
画像では、JPEG、MJPEG、MPEG、DVなど、音声ではMDCT、AAC、Vorbis、MP3に使われている。
ラスタ型画像ファイルの歴史
| 開発時期 | 画像名 | 圧縮方式 | 圧縮理論 | 色数(bit) | 透過 | CMYK | インタ
レース | アニメー
ション |
| 1985 | PCX | 可逆圧縮/td> | RLE |
8→24 | ○ | × | × | × |
| 1986？ | ILBM | 可逆圧縮 | RLE |
？ | | | × | × |
| 1986 | BMP | 非圧縮 | |
8. 24 | × | WebP | | × |
| 1986 | TIFF | 非圧縮、可逆圧縮 | RLE。LZW |
24、48 | ○ | ○ | | × |
| 1990s初 | RAW | 非圧縮 | |
12～14 | | sRGB | | ○ |
| 1987 | GIF | 可逆圧縮 | LZW | 8 | 注 | × | ○ | ○ |
| 1994 | JPEG | 非可逆圧縮 | 組合せ |
24 | × | ○ | ○ | × |
| 1996 | PNG | 可逆圧縮 | Deflate |
8, 24, 24, 48 | ○ | ○ | ○ | × |
| 2010 | WebP | 可逆圧縮、非可逆圧縮 | VP8ビデオCodec |
24 | ○ | × | × | ○ |
| 2017 | HEIC | 非可逆圧縮 | HEVC |
12～14 | | sRGB | | ○ |
（注）完全透過はできるが、半透過はできない。
1985年 PCX (.pcx, .dcx)
- PCX（Picture Exchange）は、1985年にZSoftがPC Paintbrush専用のファイル形式として開発。
- その後、MS-DOS OSの標準形式として広く利用された。
- RLEを用いた可逆圧縮。
- 当初は 8ビット（パレット）のみであったが、その後、24ビットカラーにも対応。
1986?年 ILBM (.ilbm)
- ILBM（Interleaved Bitmap）はElectronic Artsにより開発。IFF（Interchange File Format）形式。
コモドールのコンピュータ「Amiga」向けに開発され、当時は広く利用されていた。
- 水平方向と垂直方向の連長圧縮による可逆圧縮
- 画像内の各ピクセルの特定のビットだけを集めたビットプレーンとして格納される。
- インターリーブのオプション機能（.LBM 拡張子）あり
1986年 BMP（,bmp）
- BMP（BitMaP）は、1986年にMicrosoft が Windows 3.x, IBM-PC 用に開発。Mac にも搭載。
当時はデバイスを限定しないことで注目された（それを BID（Device Independent Bitmap）ともいう）。
- 圧縮オプションもあるが利用されず。通常は非圧縮で用いられる。
- 8bitカラー（パレットカラー）と24bitカラー（フルカラー）の選択。
- 画像のぶれや歪みを防ぐオプション機能を持つ。
- Microsoft の ペイントでのファイル形式でもある。
1986年 TIFF（.tiff、.tif）
- TIFF(Tagged Image File Format)は、1986年にMicrosoftとAldusによって開発された画像ファイル形式。
互換性が高く、ほとんどすべてのパソコンで使え、様々なアプリケーションで使用可能
- 非圧縮、または可逆圧縮
- 24bitフルカラーまたは48bit＝約280兆色（RGB）。
- RGB、CMYK、グレースケールに対応。印刷用に適する。
- 透過やレイアー情報など様々な追加情報を加えることができる。
- 非圧縮の画像ファイルとして標準的な存在になっている。
1990年代初頭 RAW（.raw）
- 写真のRAWファイルが最初に登場したのは1990年代初頭。普及したのは2000年代に入ってから。
- RAWとは「未加工」の意味で、デジカメがイメージセンサーで受け取った生の情報をそのまま記録した画像フォーマットで、RAWデータからRAWファイルやJPEGファイルなどを生成することを「現像」という。
- RAWファイルは３原色を圧縮せずにのまま保持するので、サイズは大きいが、他の形式に編集する現像処理が容易であり、多様な形式に変換できる。
- RAWファイルはカメラ固有の形式が多く、仕様が標準化されていない。そのため、読み込めるソフトが付属ソフトなど、機種ごとに限定されているのが現状。異なるカメラのRAWファイルを1つのソフトで一元管理できないという不都合もある。
1987年 GIF（.gif）
- GIF（Graphics Interchange Format）は、1987年に大手パソコン通信会社「CompuServe」が開発。
インターネット上で画像データを転送する負荷を少なくすることが目的だった。
- 主にイラストなど色数が少なく境界がはっきりしている画像、透過GIF／アニメーションGIFによるＷｅｂページの加工や画像変化を目的とした画像ファイルの標準的な形式になっている。
- LZWを用いた 可逆圧縮
- 8ビット（パレット） 色数が少ないため、フルカラーから圧縮すると元に戻せない。
- インターレース対応
1989年 透過GIF／アニメーションGIF （GIF89aがサポート）
- 透過GIF（transparent GIF）
画像内の特定の一色を透過色に指定することで、その色の画素を透明にできる。透過色の画素の位置には画像の背景にある別の画像や背景色の画素がそのまま表示される。
画像データそのものは矩形でありながら、表示の上では任意の形状を表現することができる。
半透明は表現できない。
- アニメーションGIF（GIF animation）
1つのファイルに複数の画像を格納できる。それを順に表示する（表示間隔の指定可能）ことにより、パラパラ動画のような効果が得られる。
GIF特許騒動
- 1985年 GIFの圧縮技術である LZW は Unisys が特許を取得
- 1994年 CompuServe が Unisys 社に特許料を払うことで合意
- 1996年 Unisys は LZW を用いているフリーソフトでもソフトウェア製作者に特許料徴収を開始
GIF を業界標準として使うのは不適切だとして大混乱になった。
- 2003年 特許失効。存続特許の申請をしないと発表
1994年 JPEG （.jpeg, .jpg）
- 1994年、ISO、IEC、ITUの合同グループ JPEG により国際規格化。1995年にJIS規格化
- 現在では、Ｗｅｂページの静止画像形式での標準になっている。
特に写真のような多彩な色がなめらかに広がっていく画像に適する。
- 多様な圧縮技術を組み合わせた非可逆圧縮。圧縮率の指定ができる。
- ２４ビットカラー。RGBとCMYK、YCbCr、グレースケールをサポート
- プログレッシブJPEG対応。（GIFでいうインターレースのようなもの）
- 透過は不可
JPEG 2000 は JPEG とは異なる規格で可逆圧縮。しかし利用は少ない。
1996年 PNG（.png）
- PNG（Portable Network Graphics）は、1996年、PNG Group」により開発 2002年にＪＩＳ規格、2003年にISO/IEC規格になった。
- GIFの特許問題を回避するため、圧縮方法を LZW からフリー Deflate に変更。可逆圧縮
- 8ビットカラ―（パレット）、16bitのグレースケール、24ビット・48ビットカラ―
- 「透過色」をサポート。ガンマ補正値を保有できる。
- プログレッシブ対応。
- PNGの仕様そのものにはアニメーション機能はないが、チャンク（データのブロック）で1ファイルに複数の画像を含めることができる。
- PNGを処理するための開発者向けPNG公式のオープンソースライブラリ、libpngがある。C言語で開発
- 現在、非圧縮形式の画僧ファイルとして、広く利用されているが、以前の GIF も多く使われている。
2010年 WebP (.webp)
- Googleによって開発されたＷｅｂページを目的にした画像ファイル
近年は、Windows、macOS、Android、iOS などのＯＳ、主要ブラウザの多くが WebP 対応になっている。
次第に利用が広まっているが、2020年代初期では未だ主流にはなっていない。
- 可逆圧縮と非可逆圧縮の両保存形式がある
非可逆圧縮モードで同一、同等画質のJPEGやPNGと比較して圧縮度が高い
- 32ビットカラー。24bitカラー＋アルファ値 半透明にできる
CMYKカラーモデルには対応していない
- インターレースは対応していない。
- アニメーション対応
2017年 HEIC (.heic、.heics)
- HEIC（High Efficiency Image Container）は、MPEG（Moving Picture Experts Group）が開発した。
主にデジタルカメラやスマートフォンの写真を対象にしている。
- Appleは、それ以前にHEIF（High Efficiency Image Format）を標準にしていたが、HEICはその改良版であり、iOS 11とmacOS High Sierraの発表にあわせHEICを標準にした。以来、HEICファイルは、iPhoneやiPadの標準画像形式となっている。
その後、Microsoftやキヤノンなど、他のメーカーもHEIF形式を採用するようになった。
- スマートフォンはストレージ容量が小さいので、高度な非可逆圧縮をしている。
それにもかかわらず、JPEG よりも高品質な画像を保存できる。
- 色はsRGBを採用。sRGBとは、IECによる国際標準規格の色空間で、デジタルカメラ、パソコンのモニター、プリンター、画像編集ソフトなど画像ファイルを扱う機器をsRGBの色空間で統一している。画像調整を行わずに印刷する場合などに適している。
- ファイルには各画像の関連メタデータ（ＥXIF情報）も含まれ、サイズ、解像度、撮影場所などが記述される。
- HEICファイルの拡張子は単一画像では.heic、複数画像では.heicsで、このときはアニメーションも使える。
ドロー型画像ファイル
ここでのドロー型画像ファイル
ドロー型画像ファイルの定義は難しい。広くとらえれば CAD用ファイル、PDF、ドロー型画像ファイルPowePoint も含まれる。ここでは、定義は避けて次のように考えた。
画像創生が主目的
ラスタ型画像ファイルでは、写真などのアナログ原画が存在し、それをデジタル化して保存するための方法が主になる。
それに対して、ドロー型画像ファイルでは、アナログ原画はなく、直線や円などの幾何学的図形や数式のグラフなどを画像として表示すること、すなわち、画像を創生することが主になる。
画像創成の方法
- コマンド入力
基本的には、ＸＹ座標系の仮想空間を設定し、直線を定義するには、２点の座標 (x0,y0),(x1,y1) 、直線の太さや色などを与える。すなわち、アプリ固有のプログラミング言語で記述したコマンド群により画像を定義する。
このプログラミング言語が JavaScript のような汎用言語ならば、座標などを計算で求めることができる。
- 画像作成ツール
コマンド群を記述するのは面倒である。ＧＵＩ環境で、座標をマウスで指定、直線や円などの図形や太さや色はアイコンで指定すれば画像が表示されるドロー型画像作成ツール（Adobe Illustratorなど）がある。それらの操作はコマンド群に翻訳される。
しかし、作成ツールで提供されていない図形や処理、例えば数式を求めてそのグラフを表示するのには限界がある。
- 文書作成ツール
ベクター画像ファイルや作成ツールを広義に捉えれば、PDF や PowerPoint なども含まれるが、ここでは対象にしない。
- 特定用途の画像編集ソフト
これには、多数のライブラリがあるが、ここでは対象にしない。
・棒グラフや円グラフばど統計画像の表示：chart.js、google-charts など
・地図：google-maps、Leaflet など
実際に表示される実空間のサイズは仮想空間のサイズとは異なるが、コマンド群を変更する必要はない。表示時に実空間サイズを指定すれば、アプリが自動的に拡大・縮小の変換を行う。
色空間などは、ＯＳ、表示ソフト（ブラウザ）、画像作成ツールが扱える範囲で決まる。
ドロー型画像ファイル
いずれにせよ、ドロー型画像ファイルとはコマンド群を持つ文字列ファイルだといえる。
しかし、実務的には、作成した画像をさらに加工したいことがある。その加工目的に合わせて、コマンド群に加えて多様な情報を持つ必要があり、特定の識別子を持つ画像ファイルにすることが多い。
画像編集ソフト
- ●初期の画像編集ソフト
- 1961年 T-Square
MITのIvan Edward Sutherlandによる開発。初期のCADプログラム
PDP-1の Type 30 高精度CRT用に作成。あまり普及しなかった。
- 1963年 Sketchpad
Ivan Edward Sutherlandによる開発
現在のCADプログラムやコンピューターグラフィックスの基礎を作り上げた。
コンピューターグラフィックスが技術的な用途と芸術的な用途の両方に使えることを示した。
後のAdobe IllustratorやCorelDRAWへと繋がる。
- ●代表的画像編集ソフト
- 1987年 Adobe Illustrator
最も利用されている画像編集ソフト。後述
- 1989年 CorelDRAW
Corel社は1985年に設立。1989年にCorelDRAWの初版がWindows 2.1向けに、その後にMac OS版も追加
Adobe Illustrator の競合製品として機能追加を繰返し現在も用いられている。
CorelDRAWは、操作が単純、デフォルトの指定、ヒント・教育の内蔵など、初心者に優しい特徴がある。
- 1996年 Flash
初版は、FutureWave Softwareが、アニメーション・データ作成用ソフトFutureSplash Animatorと再生プラグインFutureSplash Playerを開発。Macromediaが買収して、Flash に改称。さらに Adobe が買収して Adobe Flash となる。
代表的なアニメーション開発ツールであったが、HTML5の CANVAS に追われ、2020年に終了した。
- ●Javascriptによる画像編集
- 1998年 SVG →後述
- 2016年 HTML での CANVAS →後述
Illustratorの歴史
- 1987年 初版 Macintosh向けに開発。1988年、日本語版発売
- 1989年 Windows版。その後、新版のたびに、Macintosh／Windows版を発表
- 2000年 「アピアランス」機能、ＡＩファイル（後述）対応
- 2005年 ラスタ画像→ベクター画像 変換の「ライブトレース」機能
- 2007年 「ライブカラー」「消しゴムツール」、「アンカーポイント強調表示」機能
- 2010年 「遠近グリッド」「絵筆ブラシ」機能
- 2012年 「64ビットＯＳ対応」、「グラデーション」機能
ユーザーインターフェース、レイヤーパネル、RGBコードなどが新しくなっている。
- 文字列の表示
PowerPointのように、文字列を適当な位置に書き込み、ツールにより位置やフォントを調整する。長方形の背景色を指定したり透明にしたりできる。
- アピアランス機能
Appearance”は「見た目・外観」の意味。線、塗り、効果、不透明度の4つの属性がある。
オブジェクト（画像要素）にこれらの属性を変えて、きれいな画像にできる。
角丸長方形、飾り文字、線路などによく用いられる。
- 画質加工
ラスタ画像的な加工だが、エンボス化や先鋭化などの加工をメニューにより簡単にできる。
- 遠近グリッド
遠近法により遠近感のある立体図形を作成できる。面に陰影をつけたり、後ろにある画像を消すことができる。
- ライブカラー（オブジェクト再配色）
オブジェクトの色を、プレビューしながら変更できる。グループ化されたオブジェクト、パターン、グラデーション、ライブペイント、ブラシなど、どんなオブジェクトにも適用できる。
- グラデーション
線形グラデーション：ある点から別の点へカラーを一直線にブレンド
円形グラデーション：ある点から別の点へカラーを円形にブレンド
フリーグラデーション：カラー分岐点を指定して徐々に変化させる
- レイヤーパネル
画像を複数のフィルムの重ね合わせのようにする方法。
花のレイヤーと蝶のレイヤーにしておき、花に蝶がとまっているような画像ができる。
Illustratorなど画像作成ツールを前提とした代表的なベクター型画像ファイル
1980年 EPS (,eps)
- EPS (Encapsulated PostScript)は、1980年にAdobeが開発した初期のIllustratorファイル形式
- ほとんどがテキストベースであった制作物に画像やイラストを簡単に組み込めるよう設計
- 印刷前のプレビューの表示が可能
- この形式は、逐次改版が進み、Illustrator以外の多くのドロー画像作成アプリケーションで採用され、1990年代前半まで業界標準になった。
1982年 DXF（.dxf）
1982年 DWG（.dwf）
- Autodesk社 が開発したＣＡＤ用の画像形式。DXF(Drawing ExchangeF)は描画用、DWG(drawing)は共有用
- DXF はオープンソースで、目的に特化した多様なCAD製図プログラムがある。
- DWGはAutodesk社のプログラム以外では使用できない。
DWGファイルには、ベクター画像と、そのベクター画像の指示を記述するメタデータが記録されている。
2000年 AI（.ai）
- AI (Adobe Illustrator) は、Adobe がEPSの後継として開発したベクターファイル形式
Illustrator 専用のファイル形式。しかし、AIファイルへのアクセス、表示、使用ができるツールが増加している。
- 「Illustratorの歴史」で示した拡張機能に対応
- AIファイルは、特にクリーンでシャープなラインを持つ、小さいグラフィック用（ロゴ、アイコン、ポスター、プリントなど）での使用が多い。
JavaSciptの機能拡充による画像作成
1998年 SVG（.svg）
2001年 SVGZ（.svgz）
SVG（Scalable Vector Graphics）はW3Cにより、ＸＭＬの拡張機能として、ベクタ画像作成の <svg> タグが追加された。
SVGZは、SVG形式を圧縮し更に軽量化した形式。gzip 圧縮アルゴリズムを使用。
ＸＭＬでのSVG
- 例えば横幅300ピクセル、縦幅200ピクセルの領域で２点 (50,10), (200,50) を結ぶ赤の直線を描画するには、JavaScript で次のように記述すればよい。
<svg width="300" height="200">
<line x1="50" y1="10" x2="200" y2="50" stroke="red" />
</svg>
- 図形：直線（line）、長方形（rect）、円（circle）、図形変形（transform）
オプション：線色（stroke）、線幅（stroke-width）、内部色（fill）など
操作：パス（path）、ベジェ曲線（CSQT）など
表示範囲：viewBox="x, y, width, height"
- 文字列を取り込める。表示文字列（text）、サイズ（font-size）、左右揃え（text-anchor）など
- 画像を取り込める。<a xlink:href="URL">
- アニメーションができる。animate タグ
- Ｗｅｂページに表示されている画像部分を画像ファイルに取り出すことはできない。
IllustratorでのSVGファイル
- Illustratorを利用すれば、ＸＭＬコマンドをＧＵＩ環境で表示しながら作成できる。
- 完成した画面を、拡張子を「.svg」として保存すればSVGファイル、「.svgz」ならSVGZになる。
現在では、次の CANVAS が主流になっている、
2016年 CANVAS
画像ファイル形式ではなく HTML の拡張機能であり、JavaScript により画像を作成、Ｗｅｂページの一部に表示する機能である。W3C が策定した HTML5 に含まれる。
機能は、SVG のようにベクター画像の作成だけでなく、文字列やラスタ画像の取り込みもできる。
Ｗｅｂページに表示するだけの機能である。その画像をファイルに取り出すには、「右クリック→名前を付けて画像を保存」で行う。保存可能形式はブラウザにより異なるが、通常はラスタ画像になる、
JavaScript の記述例を示す。
- HTMLのBody部で CANVAS 領域を定義
<canvas id="canvas1" width="300" height="200"></canvas>
- JavaScript での定義
var canvas = document.getElementById("canvas1");
var ctx = canvas.getContext("2d"); // 以降、canvas1 を対象することを cts で示す
- 多角形の表示
ctx.beginPath(); // 各頂点座標
ctx.moveTo(80, 50);
ctx.lineTo(180,100);
ctx.lineTo(130,120);
ctx.closePath();
ctx.strokeStyle = "blue"; // 線の色
ctx.lineWidth = 3; // 線の太さ
ctx.stroke(); // 線を引く（多角形の枠の表示）
ctx.fillStyle = "yellow"; // 多角形内部の色
ctx.fill(); // 塗りつぶす
このように、最小のレベルで記述するので面倒だが、多様な機能を記述することができ、しかも JavaScript と混在できるので、実務的に必要なことはほぼ満足できる。
記述を簡単にするため、高度な処理をするために、多くのライブラリが公開されている。
CANVAS では、左上 (0,0)、右下 (cw.ch) （cw,ch はピクセル）であるが、仮想の (xmin,ymax), (amax,ymin) の領域を設定して、cw, ch と xmin, xmax, ymin, ymax の変換を行えば、通常のＸＹ座標系で位置を指定することができる。数学を扱うときに便利である。
→（自作ライブラリxycoordinate.js）