Digital Images. Denis Helic

Transcription

1 Digital Images Denis Helic

2 Digital Images(1/2) Raster images, Vector graphics, Meta graphics (combination of raster images and vector graphics) Very important (probably most important) part in any multimedia presentation Use digital images: Information brokering (Informationsvermittlung) Illustration Optical finery (2/107)

3 Expressive power of images A picture is worth a thousand words Very long history (stone age) Digital Images(2/2) Humans have fast picture perception and recognize the meaning of pictures easily Important to understand properties of images (digital images) to use them in an efficient way (3/107)

4 Visual Perception: The Eye and The Brain(1/7) Light is electromagnetic radiation The eye is sensitive to a certain portion of electromagnetic spectrum Visible spectrum: 380nm (blue) - 780nm (red) 126 millions of photosensitive cells in the eye ( /mm 2 ) retina (4/107)

5 Visual Perception: The Eye and The Brain(2/7) Rods Sensitive across the whole visible spectrum in the same way I.e. do not distinguish between colors Distinguish between dark and bright Situated in the peripheral part of retina (peripheral vision) in one eye (5/107)

6 Visual Perception: The Eye and The Brain(3/7) Cones Sensitive to small portions of the visible spectrum Three types of cones with the sensitivity peak at different wavelengths 445 nm (blue), 535nm (green), 575nm (red) (6/107)

7 Visual Perception: The Eye and The Brain(4/7) (7/107)

8 Cones Visual Perception: The Eye and The Brain(5/7) Sensitive only in the daylight (less sensitive than rodes) Situated in the centar of retina Responsible for the high resolution vision The eye moves constantly to focus (keep the light falling on the centar) (8/107)

9 Visual Perception: The Eye and The Brain(6/7) Three types of cones (red-sensitive, green-sensitive, blue-sensitive) Red (64%), Green (32%), Blue (4%) Red and green in the centar Blue a bit outside of the centar Perception of all three colors is same: Blue amplifier in one eye (9/107)

10 Visual Perception: The Eye and The Brain(7/7) Blue cone distinction Perception of intensely blue objects is less distinct than red and green objects Blue cones outside of the center - a bit lower resolution Red and green in the focus, blue a bit outside of the focus (10/107)

11 Color Perception(1/3) Cones and rods convert the light waves into electrical signals Depending on the wavelength of the incoming light Red, green, and blue cones signal how much they sensed Example: 500nm all of the cones send signal Electrical signal carried by the optic nerve to the brain 16 images/second transmitted to the brain (11/107)

12 Color Perception(2/3) Brain gets different signals red - green (for red/green distinction) red + green (= yellow) (for brightness) yellow - blue (for yellow/blue distinction) Blue not important for perception of brightness (12/107)

13 Color Perception(3/3) The way we perceive color (properties of color distinguishable by humans) Hue (red, blue, yellow, etc.) Brightness or value (intensity of visual stimulus) Saturation (mixture of color with white), fully saturated - no white (13/107)

14 How to use colors?(1/2) Because of the characteristics of our color perception Do not use different saturated colors from different spectral areas, makes the eye tired Avoid blue text, thin lines, or small forms hard to see, as no bluereceptible cells are in the center of the retina Avoid red or green in the outer areas of images (no red/green receptors in peripheral retina) Do not use red characters on blue background: an example text Do not use different colors, that differ only in the blue (14/107)

15 How to use colors?(2/2) Do not use colors as the only difference of attributes (9% of men color blind) Older people need more intensity of light Color perception depends on surrounding light Differences between saturated colors are harder to see (15/107)

16 Color Models Easy specification of colors Does not contain ALL perceivable colors Intro: GP Two families of color models Perception-oriented models Technical models (16/107)

17 Color Models - CIE(1/3) Completely independent of any device Based as closely as possible on human color perception International Commision of Illumintaion (CIE) 1931 the first color diagram (2D) 1964 extension of the first color diagram (2D) 1975 extension to 3D color diagram (17/107)

18 Color Models - CIE(2/3) Based on tristimulus values for three colors that we sense Each color is expressed with three values Can be mapped into x and y for hue and saturation (18/107)

19 Color Models - CIE(3/3) (19/107)

20 Color Models - HSV HSV = hue/saturation/value (20/107)

21 Color Models - RGB(1/2) RGB = red/green/blue Most used for active light-emitting media (displays) Additive color mixing All colors added results in white See: color selection dialog of gimp/photoshop (21/107)

22 Color Models - RGB(2/2) cyan (0,1,1) blau Achse blau (0,0,1) weiss (1,1,1) magenta (1,0,1) grün Achse grün (0,1,0) schwarz (0,0,0) gelb (1,1,0) rot Achse rot (1,0,0) (22/107)

23 Color Models - CMY(1/4) CMY = cyan/magenta/yellow Most used for printers (reflecting media) Subtractive color mixing Spectral intensities are removed from white Color range not equal to RGB-model! Sometimes CMYK (K for black) (23/107)

24 Color Models - CMY(2/4) rot (0,1,1) yellow Achse gelb (0,0,1) schwarz (1,1,1) grün (1,0,1) magenta Achse magenta (0,1,0) weiss (0,0,0) blau (1,1,0) cyan Achse cyan (1,0,0) (24/107)

25 Color Models - CMY(3/4) (25/107)

26 Color Models - CMY(4/4) (26/107)

27 Color Models - YUV Intensity/blueish/redish (=YCbCr) Compatible to black/white television Ranges Y [0,1] U/V [-0.5,0.5] Usage PAL-video Digital video (CCIR 601) JPEG compression (27/107)

28 Color Models - YIQ Similar to YUV Usage NTSC-video JPEG compression (28/107)

29 Color Models - Conversion(1/2) (C M Y ) = (1 1 1) (R G B) (Y U V ) = (R G B) e.g. luminance: Y = R G B chrominance 1 (blueish): U = R G B range [-0.5,0.5]!! (29/107)

30 Color Models - Conversion(2/2) HSV: c = 2 3 R 1 6 (G + B) s = 1 2 (G B) m 1 = max(r, G, B) m 2 = min(r, G, B) H = arctan ( s c ) + saturation: S = m 1 m 2 value: V = m 1 180, wenn c < 0 360, wenn s < 0 und c > 0 (30/107)

31 Raster Images Image digitalizing Lay raster over images pixel ( picture element ) Assign for each pixel color/brightness/... average of area Properties of raster images Dimension = height x width (e.g. 1024x768) Color depth (e.g. monochrome, grayscale, color tables, true-color) different number of bits Compression technique (none, lossless, lossy) (31/107)

32 Raster Images - Color(1/2) Human: only 19bit (ca ) of color resolution RGB (1 byte/color) = 24bit (true color) Table of color entries (GIF, TIFF) (32/107)

33 Raster Images - Color(2/2) Gamma correction: Cathode ray tube (CRT) displays light intensity proportional to voltage raised to the power of gamma Look-up table to adjust the intensity Alpha channel Add 8 bit Transparency Not standardized (33/107)

34 Compression Uncompressed images very large (height * width * color-depth (in bytes!)) e.g.: RGB image: 1024x768x24bit = 2304KBytes = 1024x768x x8 Compress digital images to reduce size! (34/107)

35 Compression Concepts(1/3) Entropy coding (statistical distribution of input data) Data as bitstream Do not look at data semantics Which single symbols we have in input data, how often? Which patterns we have in input data, how often? (35/107)

36 Compression Concepts(2/3) Source coding (semantic coding) Investigate the semantics of data Prediction (two subsequent blocks are not independent) Reduction (remove irrelevant blocks of data) Select the best suited method for coding (e.g. color model) (36/107)

37 Compression Concepts(3/3) Hybrid coding Combine two or more algorithms Usually combination of entropy and source coding (37/107)

38 Compression Classification(1/2) Lossless After decompressing the original data is fully restored Does not remove information e.g. black/white image coded with 8 bit 1 bit is enough! All entropy codings, Prediction, Hybrid coding with entropy/prediction (38/107)

39 Lossy Compression Classification(2/2) Removes irrelevant information from the original data After decompression the original data can not be fully restored Reduction based on the characteristics of human sensing (e.g. visual perception) Only for human perception (39/107)

40 Compression - RLE(1/2) Multiple symbols replaced by number and symbol Lossless Simple, fast, low efficiency Worst case = 2*original size Escape codes Large blocks of same symbols (e.g. large areas of same color) (40/107)

41 Compression - RLE(2/2) MacIntosh packbits Counter n + data n = 0 to 127: n+1 original bytes follow n = -127 to -1: the next byte is repeated -n+1 times n = -128: not used Worst case slightly above original size TIFF, BMP, PCX, JPG, FAX G3 (41/107)

42 Compression - LZW(1/6) Abraham Lempel and Jakob Ziv 1977 (LZ77, LZ78) Text compression (e.g. zoo, lha, pkzip, arj) Terry Welch from Unisys 1984 (LZW) Different types of data (text, images) Lossless! (42/107)

43 Compression - LZW(2/6) Principle: Entries in dictionary (symbols, patterns) Index in the dictionary as output Code table (dictionary) grows during encoding/decoding Code table not stored! Code fixed length or variable length (GIF) (43/107)

44 Algorithm: Compression - LZW(3/6) Code table initially filled with base alphabet (256 ASCII characters) Rest of code table: new patterns New substring is created by appending a character to an existing substring. The new substring is put in the next free entry in the dictionary (44/107)

45 Compression - LZW(4/6) Coding example: input: /WED/WE/WEE/WEB char. input code output new code value /W / = <47> <256> = /W E W = <87> <257> = WE D E = <69> <258> = ED / D = <68> <259> = D/ WE <256> <260> = /WE / E = <69> <261> = E/ WEE <260> <262> = /WEE /W <261> <263> = E/W EB <257> <264> = WEB B = <66> output: /WED<256>E<260><261><257>B (<47><87><69><68><256><69><260><261><257><66>) (45/107)

46 Compression - LZW(5/6) Decoding example: input: /WED<256>E<260><261><257>B code input char output new code value / = <47> / W = <87> W <256> = /W E = <69> E <257> = WE D = <68> D <258> = ED <256> /W <259> = D/ E = <69> E <260> = /WE <260> /WE <261> = E/ <261> E/ <262> = /WEE <257> B = <66> WE B <263> = E/W <264> = WEB output: /WED/WE/WEE/WEB (46/107)

47 Compression - LZW(6/6) If dictionary full CLEAR-signal, if compression rate is bad Compression rates of factor 2 or 3, up to 10 Part of algorithm is patented by unisys!!!! license fees for implementation! GIF, TIFF (47/107)

48 Compression - Huffman(1/5) Lossless Output codes different length Short length codes for symbols that occur the most times Like Morse-alphabet, letter e = one dot 1952 invented Very fast decoding, two pass encoding 1. Determine percentage of characters & create code-tree 2. Code data (48/107)

49 Compression - Huffman(2/5) Example input: abbbbccddddddeeeeeee char count p a b c d e Sum: (49/107)

50 Compression - Huffman(3/5) Code tree a c b d e (50/107)

51 Compression - Huffman(4/5) output: 000, 01, 01, 01, 01, 001, 001, 10, 10, 10, 10, 10, 10, 11, 11, 11, 11, 11, 11, 11 = , , , , , 111xxxx 20 bytes compressed to 6 bytes general compression rate: factor 2 to 8 (51/107)

52 Compression - Huffman(5/5) Disadvantages Needs two passes One bit toggle 0/1 big problem! Code tree has to be stored adaptive Huffman-coding: Coder and encoder same code-tree Code tree is created and improved on coding/decoding Huffman coding is used by TIFF, TGA, JPEG, PNG, G3 FAX (52/107)

53 JPEG 1993 Joint Photographers Expert Group (JPEG) Writes standards for image compression JPEG is no data format is an organization JFIF is data format (JPEG Intechange File Format) Defines standards for losless, lossy compression (53/107)

54 Compression - Lossless JPEG(1/3) Ignores colors (for every channel separately) Based on prediction of pixel values Stores value of a few pixels, then for other pixels stores differences (54/107)

55 Calculates 7 values Compression - Lossless JPEG(2/3) 7 algorithms (A = pixel left, B = pixel above, C = pixel left,above) Nr. Algorithm 0-1 A 2 B 3 C 4 A + B - C 5 A + (B - C)/2 6 B + (A - C)/2 7 (A + B)/2 (55/107)

56 Compression - Lossless JPEG(3/3) Choose one algorithm, store algorithm number and difference to pixel Select that algorithm where difference is closer to 0 A lot of zeros higher compression rates Compression up to 50% (56/107)

57 Compression - Lossy JPEG(1/2) Principle: Source coding, i.e., it investigates the semantics of the data stream Characteristics of the human visual perception Removes irrelevant data, that would not be seen by humans anyway (57/107)

58 JPEG Reduction: Compression - Lossy JPEG(2/2) Data reduction by using more appropriate color model YUV/YIQ instead of RGB, because humans are more sensitive to changes in brithness (value) than in color (hue) Transforms color values into frequencies, reduces higher frequencies since most of visual information is contained in lower frequencies (58/107)

59 Steps of Lossy JPEG Compression(1/10) Color model transformation, i.e. from RGB into YUV/YIQ Usually chroma subsampling, i.e., reducing color data compared with brithness data Different subsampling rates Sometimes: 4:4:4 (subsampling off, e.g. Photoshop) Mostly: 4:1:1, i.e., 2x2 pixel blocks are replaced with 1 color value (average), 50% data reduction Sometimes: 4:2:2 33% data reduction (e.g. digital cameras) Lossy step, but usually non percivable by humans (59/107)

60 Steps of Lossy JPEG Compression(2/10) (60/107)

61 Steps of Lossy JPEG Compression(3/10) Dividing of image into 8x8 pixel macro-blocks Computing of Discrete cosine transformation (DCT) for each macro block DCT local distribution of pixel values distribution of frequencies and amplitudes F (u, v) = i=0 7 j=0 C(u) C(v) f(i, j) cos (2i + 1)uπ 16 cos (2j + 1)vπ 16 C(u) = 1 2 wenn u = 0, sonst C(u) = 1 C(v) = 1 2 wenn v = 0, sonst C(v) = 1 (61/107)

62 Results of DCT 8x8 coefficients / macro block Steps of Lossy JPEG Compression(4/10) Large continous areas lower frequencies Fine details higher frequencies Lower frequencies in the upper left part, higher in the lower right part of macro blocks Visual information mostly in lower frequencies! (62/107)

63 Quantization (lossy!) Steps of Lossy JPEG Compression(5/10) Remove higher frequency (their weight is lower) F Q (u, v) = round q(u, v): F (u,v) q(u,v) (63/107)

64 Steps of Lossy JPEG Compression(6/10) Results of quantization The upper left part of a macro block contains non-zero values The lower right part of a macro block contains usually all zeros (64/107)

65 Entropy coding DC-coefficient / AC-coefficients Steps of Lossy JPEG Compression(7/10) j i DC v u f(i,j) F(u,v) Run-length-encoding / Huffman coding (65/107)

66 JPEG Compression in action Steps of Lossy JPEG Compression(8/10) Java applet from Simon Fraser University in California html (66/107)

67 Compression rates Steps of Lossy JPEG Compression(9/10) compression factor subjective quality 4:1 bis 5:1 with naked eye not distinguishable from original 5:1 bis 10:1 excellent quality 10:1 bis 20:1 good quality 20:1 bis 30:1 visible artefacts 30:1 bis 40:1 Klötzchengrafik (67/107)

68 Steps of Lossy JPEG Compression(10/10) Decode lossy JPEG Entropy decoding (using Huffman table) Dequantisize Inverse discrete cosine transformation Convert from YUV/YIQ to RGB (68/107)

69 Lossy JPEG - Advanced Featuers Progressive mode: Encoding of quantization results not block-wise, but using slices of frequencies First DC lower frequencies higher frequencies More zeros in sequence better compression rates Hierarchical mode: Different images with different resolution, from low to high resolutions Low resolution encoded completely Other resolutions encoded as differences from previous one (69/107)

70 Lossy JPEG - Properties(1/2) Very good for photorealistic images Good compression rates Complex algorithm Quality decreases, if images are compressed more than once (70/107)

71 Edges artefacts or blurred images e.g. compression rate 1:100, zoomed: Lossy JPEG - Properties(2/2) (71/107)

72 JPEG2000 Standard file format JPEG parts Part 1 finished end of 2000 (draft) Part 2 finish end of 2001 (72/107)

73 Requirements for JPEG2000(1/3) Better image quality (higher compression rates) (e.g bit/pixel or 1:64) (73/107)

74 Requirements for JPEG2000(2/3) Regions of interests (74/107)

75 Requirements for JPEG2000(3/3) Higher resolution (up to 4.3 Billion pixels (32bit) height/width) More channels (16384) Selection of lossy and lossless algorithm Different progression modes (resolution, quality, position) Optimization for special applications Meta data Security/copyright Robustness against transmission errors Detailed slide show: JPEG2000/ (75/107)

76 Compression Wavelet/JPEG2000(1/4) JPEG 1:35, wavelet 1:65 Strategy similar to JPEG (remove invisible details) Filter image structures Wavelet transformation without dividing into macroblocks (76/107)

77 Compression Wavelet/JPEG2000(2/4) Mathematical background f(x) f(x/2) f(x/2 1/2) g(x) (77/107)

78 Compression Wavelet/JPEG2000(3/4) Wavelet coefficients, contain small copies of original (78/107)

79 Compression Wavelet/JPEG2000(4/4) Quantization (compression) Entropy coding (Run Length Coding, etc.) Example: material/misc/wavelet.html (79/107)

80 Digital Images Fileformats Denis Helic

81 Image Formats Raster images BMP, TIFF, PNG, JPEG (JFIF) Vector graphics (PS, PDF, DXF, SVG,...) Stores mathematically defined curves (e.g. lines, circle,...) Scalable Less amount of memory needed (to store them) Arbitrary exact (no pixels) Dependent on output device No photorealistic images (81/107)

82 Image Formats Meta formats (WMF, PICT) Store function calls (incl. parameters) Dependent on system (GDI for Windows, etc.) (82/107)

83 Image Formats - BMP Very simple MS Windows world Compression: RLE, etc. Color table (for 1, 4, 8 bit color information) If no color table, true color images (83/107)

84 Image Formats - TIFF Aldus Corporation 1986 (now Adobe) Goals: Portability Hardware independence Very general approach Stores nearly any kind of raster images Black/white Grayscale Color (different color-models) Different compression algorithms Problem: some applications implement only part of the features (84/107)

85 Image Formats - GIF Compuserve 1987 (GIF87a), 1989 (GIF89a) Included in HTML-specification - became very popular Legal problems (LZW patent by Unisys until 2003/2004) Color table (only 256 colors out of all true colors (24 bit)) Transparency (GIF89a): one entry in color table is marked as transparent Stores multiple images GIF87a: shows all images (offset) GIF89a: animations (1/100 sec) Interlaced mode: lines are displayed in binary-tree-order: e.g. image with 13 lines: ,12-2,6,10-1,3,5,7,9,11 Meta information (author, description,...) LZW compression (85/107)

86 Image Formats - PNG(1/5) PNG = Portable Networks Graphics ( ping ) Specified by W3C ( Should replace GIF (PNG = PNG s not GIF ) Everything GIF can do and more Properties: Organize data as stream Lossless compression Transparency (browser test): Faster interlacing than GIF (86/107)

87 Image Formats - PNG(2/5) More meta information (author, description,...) than GIF True color images (up to 48bit/pixel) Grayscale images (up to 16bit/pixel) Alpha channel Gamma indication Standard programming library to help implementations Standard set of benchmark images to help testing No animations (MNG available) No multiple images in one file No license problems/fees (87/107)

88 Image Formats - PNG(3/5) Interlacing Normal: sequence of scan lines (top to bottom) Progressive: lines stored as an interlace-pattern (Adam7) Adam7: 7 passes (first 6 for even linenumbers, 7th for odd lines) First 6: not whole line, only specific pixels 1/64, 1/64, 1/32, 1/16, 1/8, 1/4, 1/2 of line Compared to GIF: 1/8, 1/8, 1/4, 1/2 Display of image in 8x8, 4x4, 2x4, 2x2, 1x2 blocks Last pass fills odd lines (88/107)

89 Image Formats - PNG(4/5) Human eye needs only 30% to recognize content of image (GIF 50%) Sligthly worse compression rate (10%) (no similar pixels side by side) Raster put over bitmap to determine pixels: Compare to gif: interlacing (89/107)

90 Compression Images are always compressed Prediction of pixel values Variation of deflate-method (pkzip) Image Formats - PNG(5/5) Deflate-method = variation of LZ77, no sorted hash-tables (no patent fees), free, fast, well documented (90/107)

91 Image Formats - JPEG (JFIF)(1/2) Contains lossless or lossy compressed images Three images (scans) of color model are stored in a sequence JPEG compression (91/107)

92 Image Formats - JPEG (JFIF)(2/2) EXIF Metadata EXIF-Tag Value Camera make Canon Camera model Canon DIGITAL IXUS Date/Time 2002:05:11 23:06:04 Resolution 1152 x 864 Flash used Yes Focal length 5.4mm (35mm equivalent: 37mm) CCD width 5.23mm Exposure time s (1/60) Aperture f/2.8 Focus dist. 1.02m Metering Mode center weight Jpeg process Baseline (92/107)

93 Image Formats - JPEG 2000.j2k: colorblind jpeg 2000 data stream, no file headers.jp2: wraps jpeg 2000 data stream, including color space, optional copyright info (part I).jpx: adds extensions (part II), may be written in jp2-files..mj2: collection of images (part III) (e.g. video).jpm: multiple compression types, layering (part IV) (93/107)

94 Image Formats - Metaformats Windows Meta File (WMF) PICT Stores function calls incl. parameters to GDI (Graphics Device Interface) GDI-library contains functions to draw high level objects (lines, circles,...) Same as WMF, but for MacIntosh Function calls to QuickDraw (94/107)

95 Image Formats - Postscript Adobe 1984 Programming language for describing page layouts (including variables, loops,...) Describes text, vector graphics, embedded raster images Different levels of postscript Level 2: supports JPEG compression, true color,... ASCII format Example: line from (1900,2000) to (4500,2000) with color 0: % Polyline slw n m l gs col0 s gr (95/107)

96 Image Formats - PDF Portable Document Format (PDF) Rather a document format, than an image format Based on Postscript Differences to postscript: Stored as binary (not ASCII) Extended interface to operating system (file operations,...) Meta informations Hyperlinks inside document and to other documents (web,...) (96/107)

97 Image Formats - DXF Autodesk (AutoCAD) CAD/CAM/CIM 3-D objects ASCII format Only 256 colors Relatively easy to create (97/107)

98 Image Formats - SVG(1/10) Scalable Vector Graphics (SVG) Developed by W3C ( Web standard for vector graphics XML application (SVG DTD) (98/107)

99 Image Formats - SVG(2/10) Features Basic shapes: rectangles, circles, ellipses, path, etc. Text: different fonts Grouping of basic shapes (99/107)

100 Image Formats - SVG(3/10) Features Painting: filling, stroking, etc. Colors: true color, transparency, gradients, etc. Clipping, masking Filter effects (100/107)

101 Image Formats - SVG(4/10) Features Interactivity: user events Linking: outside links, in-document links (XLink) Scripting, i.e. JavaScript, supports DOM Animation (101/107)

102 Image Formats - SVG(5/10) Features Raster image may be embedded (JPEG, GIF,...) Compression: Transferred as zipped file (102/107)

103 Tools No browser support up to now Viewers: Adobe SVG Viewer Viewers: X-Smiles Image Formats - SVG(6/10) Applications to create SVG: Adobe Illustrator, CorelDraw with SVG Plugin, Gill (Gnome Illustrator) (see also SVG/SVG-Implementations) More information: (103/107)

104 Image Formats - SVG(7/10) Example: stars and stripes (from samples.html) (104/107)

105 Image Formats - SVG(8/10) Parts of SVG-code (XML): Svg-header: <?xml version="1.0" encoding="iso "?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG Stylable//EN" " Definitions of stripes and rotating stars: <defs> <rect id="red" width="900" height="40" style="fill:#dd0000"/> <rect id="white" width="900" height="40" style="fill:white"/> <polygon id="star" style="fill:white;fill-rule:nonzero;" points="0, , , , ,11.32 <animatetransform attributename="transform" type="rotate" values="0;360" dur="3s" repeatdur="indefinite" /> </polygon> </defs> (105/107)

106 Image Formats - SVG(9/10) Drawing the lines of the banner by using xlink-references: <use xlink:href="#red"/> <use xlink:href="#white" y="40"/> <use xlink:href="#red" y="80"/> <use xlink:href="#white" y="120"/> <use xlink:href="#red" y="160"/> <use xlink:href="#white" y="200"/> <use xlink:href="#red" y="240"/> <use xlink:href="#white" y="280"/> <use xlink:href="#red" y="320"/> <use xlink:href="#white" y="360"/> <use xlink:href="#red" y="400"/> <use xlink:href="#white" y="440"/> <use xlink:href="#red" y="480"/> (106/107)

107 Image Formats - SVG(10/10) Examples: Map Examples: cartography/vienna/ (107/107)