Vector Images ?

Posted:
in Genius Bar edited January 2014
How exactly do vector images work? How are they able to do variable scaling w/out loss in picture quality?

Comments

  • Reply 1 of 12
    rodukroduk Posts: 706member
    I believe each vector is held as a mathematical formula, including start point, end point etc, hence it can be scaled without loss of quality by putting different values into the formula. For example, a circle would be held as its centre point and radius. To scale the circle up, you just increase its radius value and the formula calculates the circle itself.



    [ 08-07-2002: Message edited by: RodUK ]</p>
  • Reply 2 of 12
    badtzbadtz Posts: 949member
    is that why the icons in the dock scales so well?



    does the original designer of the icon/graphic must know this in advance?



    how do you create a vector image? can you do it from an already pre-existing image?
  • Reply 3 of 12
    rodukroduk Posts: 706member
    [quote]Originally posted by Badtz:

    <strong>is that why the icons in the dock scales so well?



    does the original designer of the icon/graphic must know this in advance?



    how do you create a vector image? can you do it from an already pre-existing image?</strong><hr></blockquote>



    I'm not an expert, but I guess the dock icons are vector images, albeit complicated ones. They must be constructed from more than simple lines, polygons and circles etc.



    I'd imagine its easy to convert a vector image into a bitmap image. I think the process is called rasterisation. Its actually done by your graphics card anyway to convert a vector image into a bitmap suitable for display on a CRT or LCD.

    Converting a bitmap image into a vector image must be harder, if not impossible, as a lot of the mathematical information required has been lost. I guess thats why vector images tend to be simpler, so they can be described in terms of lines, polygons and circles etc using simple mathematical formulae. If you had a bitmap image of a babies face, how could that be described using a formula?



    I think Illustrator is an example of a vector based package, and Photoshop a bitmap based package.



    [ 08-07-2002: Message edited by: RodUK ]</p>
  • Reply 4 of 12
    pevepeve Posts: 518member
    vector images are made - like RodUK said - out of points and their connections.



    you can make vector images with "vector-based" apps like illustrator, flash etc.



    once you converted a vector image to a pixel image you lost the points and lines and you have converted your picture into pixels and there no simple way back.



    a pixel image is built up line by line and pixel by pixel.

    each pixel has to addressed and given a color.

    therefore pixel images are bigger then vectors and can not be scaled that much.



    there are apps that can try and interprete your pixel image into a vectore image - but the results are more then bad. (but it can look kinda cool)
  • Reply 5 of 12
    pevepeve Posts: 518member
    ... oh yes! and the mac os x icons are pixel images.

    (128x128 pixels in size)
  • Reply 6 of 12
    badtzbadtz Posts: 949member
    .......so the icons are .bmp's ??
  • Reply 7 of 12
    pevepeve Posts: 518member
    ... don't know what kinda file-format - but pixel based.



  • Reply 8 of 12
    rodukroduk Posts: 706member
    Hmmm, I'm interested to know how you enlarged the image above. If you capture a vector image as a bitmap and enlarge it, it would still appear as above.



    [ 08-07-2002: Message edited by: RodUK ]</p>
  • Reply 9 of 12
    pevepeve Posts: 518member
    i know.

    i only made the pic as a documentation.



    macos x icons are 128 x 128 pixels.
  • Reply 10 of 12
    If you want real details on vector or rastor based artwork, you can try just about any search engine.. however, I recommend using an internal search on a site like on the Adobe site. Many companies have expansive lexicons with examples. everything2.com as well, is quite good, for layman?s terms.



    Vector is also known as Draw, while Rastor is also known as Paint. The two most popular programs that I know of, are Adobes, Photoshop (paint, rastor), and Illustrator (draw, vector).

    Images created with a draw program tend to be limited only by power/memory of a system. The image can be gigantic (if the program permits it) detailed, and made for any surface or screen. The file size is often quite large, but easily transferable into other extensions (to be used in a variety of places/programs).

    Images created with draw programs are limited only by complexity, or really, not limited at all. The problem with vectors is that they are simply too perfect. They look too crisp for some applications. Draw file size is small, and they are quite scaleable (though, usually only to a certain size, before the math starts to break down. Though theoretically they could be as large or small as you need). One thing commonly thought, is that vector art is limited in its capacity for detail. This is not true, if one works hard enough, with vector filters and gradients etc... one could create a lifelike picture of almost anything. Especially non-organic items or places.

    The most commonly seen tactic, is to create an image in a Draw program, then take it into a Paint program for final touches, and 'imperfections'.

    In the end, in order to see a vector image on a screen, it needs to be converted to rastor imagery, as with print presses, and screenings. Therefore, rastor tends to the end of all production (though, Post Script is related to both, and is thus a different story altogether).

    Vector based art is no harder to learn, then rastor; if you are interested in learning. One could download a trial program of Flash (Macromedia), or Illustrator from the net to try it out (both include tutorials).



    While I am not sure what the MacOS uses, it stands to reason, that high DPI rastor images would be used, as was stated.
  • Reply 11 of 12
    [quote]Originally posted by nocnitsa:

    <strong>Vector based art is no harder to learn, then rastor; if you are interested in learning. One could download a trial program of Flash (Macromedia), or Illustrator from the net to try it out (both include tutorials).</strong><hr></blockquote>



    If you are interested in doing this, I would recommend downloading either Illustrator or Macromedia Freehand, not Flash. Freehand is a vector drawing program. Flash is an animation program that is based on vector shapes. You'll have a better toolset in Freehand.
  • Reply 12 of 12
    A vector image is a file that instead of containing image information in the form of tiny blocks of colour (pixels), it contains the information in the form of lines, polygons, curves and information about colour.



    Imagine a simple vector file which just had a line with two points, this file would contain point A, how far along it was (the X coordinate) and how far up it was (the Y coordinate) it would also contain point B and its X and Y coordinates. It would also contain the information that point A and point B were joined by a line, how thick this line was, and what colour it was. Using this information the computer would generate a pixel image to be displayed on screen. To make this image larger it would not scale the pixel image but the vector image by multiplying the point coordinates and lines thickness by a number (the scale factor) and then regenerating the pixel image from this new vector image.



    The Icons in the dock are not vector images, they are an icns file which is a pixel image with several different sizes: the huge Mac OS X icon (128x128)

    a smaller one (48x48)

    the classic Mac OS 9 size (32x32)

    and a tiny one (16x16)



    There is also an alpha channel which is a greyscale image which tells how translucent parts of the icon are and a hit map, which is a 2-bit image which tells what parts of the icon are clickable to highlight it.



    I was surprised at how well the Mac OS X icons scale, but notice they are never any bigger in the finder or dock than 128 x 128 pixels, they are only made smaller. This is more complicated than making an image bigger because you are having to take 16384 pieces of data (in a 128x 128 image) and compress that into a smaller space keeping the most important data, destroying the less important, and generating some new to preserve quality. There are lots of methods for doing this, Mac OS X uses a very good method which uses antialiasing, antialiasing is when the image is softened or blurred slightly to eliminated hard lines, so you do not notice individual pixels. Also, when this is animated it is constantly changing so you do not notice the minor imperfections. Run the cursor as slowly as you can along the dock and look at the icons and you will see what I mean.



    Andrew
Sign In or Register to comment.