What is SVG Format ?
No Reply
March 14th, 2008
Datis Design Weblog
Designing for Communicating
SVG stands for Scalable Vector Graphics. Illustrator can export the SVG files, also it ships with SVG viewer plug-in, which works with different browsers to play back SVG graphics and web pages.
Also there is SVGZ format which is compressed version of SVG.
SVG format features :
- Fully scalable for zooming and panning
- Pixel perfect positioning
- High resolution gradients, drop shadow, and other filter effects
- Enhanced color control and color accuracy
- Highest possible printing resolution
- Better typographic control including kerning, text on a path, and unlimited fonts
- Editable and searchable text
- Ability to search text elements within graphics
- Dynamic content, animation, and interactivity through scripting
- Compact download sizes
- Cascading style sheet support (CSS) enabling global web site changes
- Multiple levels of transparency
- Support for other devices such as palmtops, GPS, cell phones
As you know, colors are one of the important factors for attracting a user attention, when you enter a web site first thing that attract you is the color scheme of the web site. If you like the colors you will stay longer and if you don’t like them you will leave the site !
But each color has its own meaning and personality, choosing a right color when you are designing a web site is very important. Because if the chosen color matches the web site goals and services the user will feel better when browsing the web site. In this post I will tell the meaning of some important colors, hope it will be useful for you.
Red
Useful for love, feelings, danger, warning, food, action, impulse, …
Blue
Useful for trustworthy, success, calmness, power, professionalism, seriousness, …
Green
Useful for nature, money, animals, health, cure, life, harmony, …
Orange
Useful for comfort, creativity, fun, celebration, youth, …
Purple
Useful for justice, luxury, royalty, ambiguous, dream, fantasy, …
White
Useful for innocent, purity, simplicity, cleanliness, …
Yellow
Useful for amusement, curiosity, playfulness, cheerfulness, …
Pink
Useful for softness, sweetness, innocence, youthfulness, tenderness, …
Gray
Useful for neutrality, indifference, reserved, …
Brown
Useful for earth, nature, simplicity, tribal, primitive, …
Black
Useful for seriousness, darkness, mystery, secrecy, …
At the end again I think that following rules won’t give you the best result always, combining creativity and rules is the best choice I think.
Screen Frequency (LPI)
Screen frequency is the number of halftone cells per inch. Printer simulates continuous tone images by printing lines of halftone spots. This called LPI (Lines Per Inch). Recommendation image resolution (PPI) equalizes twice the screen frequency (LPI) for ensure highest quality.
The lower the LPI the more halftone dots will be visible in printed image. The quality of the printed image depends on the image resolution and screen frequency. If we want to produce a high quality image then we must set the image resolution 1.5 or 2 times of screen frequency. Some low quality papers can not be used for high quality printing because of the way they absorb ink. They usually use 85 LPI for printing. High quality papers can accept more closely spaced dots at 150 LPI or more.
Scanning Images
When we want to scan an image, it is good to scan it to the size that we actually want on the final printed piece. This formula is helpful in scanning images :
Scan Resolution (DPI) = 2 x LPI x enlargement or reduction factor
For example if we are going to create a advertisement to be printed in high quality papers like glossy or color magazines (LPI will be 150) and the image will be printed double sized (enlargement factor will be 2), formula will be :
Scan Resolution (DPI) = 2 x 150 x 2 = 600 DPI
Therefore scan resolution should be 600 DPI.
Resolution is a way to measure the output quality of an image, usually in terms of samples, pixels, dots or lines per inch.
Image Resolution
The numbers of pixels per unit of length in an image called image resolution. It is determined by pixels per inch (ppi) printed.
Image Resolution (ppi) = No. of pixels / Printed length of image
The important thing to remember is relationship between image’s resolution (ppi) and image print size (actual width and height). For example an image with high resolution has more pixels than the same dimension image with low resolution.
Monitor Resolution
It determines the display size of an image. The number of pixels or dots displayed per unit of length of the monitor, usually measured in dots per inch (dpi).
Monitor Resolution (dpi) = No. of pixels / Length of monitor
Printer Resolution
Printer resolution refers to number of dots per inch (dpi) that output device produce.
Printer Resolution (dpi) = No. of ink dots per inch
Color depth is number of bits per pixel that can be displayed. Every bit can have 2 value 1 and 0. The more bits in a pixel will represent the more color. For example a 1 bit color image can have only two colors, 4 bit color image can have 16 colors, 8 bit color image can have 256 color, 16 bit color image can have 16,777,216 colors and so on.
Each channel in true color image has 8-bit color depth. For example RGB image have 3 x 8-bit color which will be 24-bit image. A CMYK image will have 32-bit color because it has 4 channels.
Alpha channel is 8-bit channel, which you can use them to show images through them. They can have values from 0% which is fully transparent and 100% which is fully opaque (Or we can tell because it is 8-bit channel it has 256 range of colors, so 0 is transparent and 255 is opaque).
Because Alpha channel will use another channel, when we use it in RGB image it will become 32-bit image (24bit + 8-bit), and it is known as RGBA (A for Alpha channel).
Pixel Dimension
First of all we need to know what is pixel dimension ?
Pixel dimension is total number of pixels in both horizontally and vertically. For example an image with 640px width and 480px height has 307200 pixels in total.
There is another concept named DPI (Dot Per Inch), for example you have an image with 15″ x 10″ with 300dpi, pixel dimension for this image will be
15 x 300 = 4500 pixels in width and 10 x 300 = 3000 pixels in height, and total pixels in this image will be 4500 x 3000 = 13500000 pixels.
Read More
Images in computer world fall into two categories, Vector images and Raster images. Programs like Adobe Photoshop can create Raster graphics and Adobe Illustrator can produce Vector graphics.
But what is the difference ? Read More
Additive primaries are the three colors of light (red, green, and blue) that produce all the colors in the visible spectrum when added together in different combinations. Adding equal parts of red, blue, and green light produces white. The complete absence of red, blue, and green light results in black. Computer monitors are devices that use the additive primaries to create color.
When any computer generated image is magnified to large extent it shows small colored squares, which are called as pixels. Pixel is the smallest picture element of the image that is viewed on computer or television.
An image composed of pixels is called bitmapped image or raster image. Higher the number of pixels higher will be the resolution and better picture quality. Pixels do not have height or width because it is just a piece of information.
A digital color image has three numerical RGB values (Red,Green,Blue) to represent the color. In a pixel, each RGB component is represent by 8-bit. Three 8-bit (one byte for each of RGB) are called 24-bit color.
Each 8-bit RGB component can have 256 possible values, ranging from 0 to 255. For example values like (250,165,0), meaning (Red=250, Green=165, Blue=0) to indicate one Orange pixel.
The way that multimedia software presents information and enables you to interact with it is called its “user interface“. The interface must do two things. First, it must tell you what is available and what can it do. Second, it must provide you with a way of making a choice from the option present. In most multimedia titles, this achieved through the use of what is known as “hypermedia”
- Hypermedia : The term hypermedia means a hypertext that uses multiple media. In other words, hypermedia is a collection of multimedia materials with multiple possible arrangements and sequences.
- Hypertext : Text based titles often make the best use of hypertext. With hypertext, every word is “live”, which means that you can select or interact with it in some way - exactly how depends on the way the title has been changed.
- Hotspot : Most multimedia titles use of hotspots. A hotspot is usually a button or picture that reacts when you select it - by taking you to another part of the title. Most of the hotspots are revealed by exploring the screen with the mouse and observing where the pointer or image changes.
