What is vector?

Questions · Post by **Questions** » Sun Sep 24, 2006 12:26 am

EDIT AGAIN:

Mods can close this thread if they do that here. Thanks.

sjj1805 · Post by **sjj1805** » Sun Sep 24, 2006 12:59 am

A graphic can be like a photograph
alternatively it can be a vector which simply means drawn.

The advantage of a vector is when you resize something - it retains perfect shape - especialy things like circles.

Shrink or enlarge a picture of a circle and you eventually end up with jagged edges. Draw the circle and it remains a perfect circle at all times.

For a more detailed reply see this link:
Wikipedia

Questions · Post by **Questions** » Sun Sep 24, 2006 1:28 am

I've updated my question that will help me understand what vector is and isn't. Wiki doesn't help as it uses terms that I'm not familiar with. So by me editing my questions in my first post, it will help me if answered as I hope it will be.

Thanks.

sjj1805 · Post by **sjj1805** » Sun Sep 24, 2006 1:41 am

Think of a vector is a set of drawing instructions like this.

Get your pen and place it in the centre of your canvas. Draw a line directly north until you are two thirds of the way up the page.
Now turn 90 degrees to the right and continue to draw for the exact same length as the previous line.
Now draw a straight line back to the centre of the canvas - you have now completed your triangle.

You will note that you have NOT included ANY fixed measurements such as pixels, inches, metres or anything else. So if you get a larger canvas and follow these same instructions you get a larger triangle.

Compare that now to what would happen if you printed off that triangle and scanned it - the scan is now a picture. To make that triangle larger or smaller you have to resize the picture. By resizing it you (eventually) end up with jagged edges.

Here is an example of a vector graphic
http://www.youtube.com/watch?v=2ceiKZyGEHE

Questions · Post by **Questions** » Sun Sep 24, 2006 1:47 am

Are the images I put on the site in my first post above vector or not? Yes or no?

sjj1805 · Post by **sjj1805** » Sun Sep 24, 2006 1:51 am

Questions wrote:Are the images I put on the site in my first post above vector or not? Yes or no?

Sorry but I couldnt open them. I tried PhotoShop and PhotoImpact.

Questions · Post by **Questions** » Sun Sep 24, 2006 1:55 am

The svg should open a html type document view as it did on my computer using the browser (I use IE7). Not sure why it's not loading for you on your end.

If it works for anyone please, please post whether you can tell me if it's vector or not.

I would REALLY appreciate it big time.

sjj1805 · Post by **sjj1805** » Sun Sep 24, 2006 2:00 am

This is what I get if I open it with Internet Explorer:

<?xml version="1.0" encoding="iso-8859-1" standalone="no" ?>
<!DOCTYPE svg (View Source for full doctype...)>
- 
- <svg width="320px" height="240px">
<rect id="BGCOLOR" style="fill:#ffffff" width="320" height="240" />
- <text x="35" y="172.5" id="TEXT1" style="font-family:'Accord Light SF';font-size:32px;kerning:0;fill:#c7a8a1" xml:space="preserve">
FOR
<tspan style="stroke:none;fill:#772b1a">EXAMPLE</tspan>
</text>
<path d="m 105 40c 15.08 -1.89 79 -20.56 79 3 0 1.68 3.16 21.42 2 22 -21.74 10.87 -62.94 -33.57 -57 8 6.62 46.37 29.47 -10.34 44 10 12.77 17.87 -1.49 31.54 -18 28 -28.71 -6.15 16.08 36.22 -15 30 -29.9 -5.98 -45.08 6.94 -42 -30 0.53 -6.32 1.47 -12.64 2 -19 1.43 -17.14 4 -33.72 4 -51 0 -0.47 0.53 -0.94 1 -1 z" id="PATH2" style="fill:#772b1a;fill-rule:evenodd" />
<path d="m 191.45 117.96c -11.11 1.39 -58.2 15.14 -58.2 -2.21 0 -1.24 -2.32 -15.78 -1.47 -16.21 16.02 -8.01 46.37 24.73 41.99 -5.89 -4.88 -34.16 -21.71 7.62 -32.41 -7.37 -9.41 -13.17 1.1 -23.23 13.26 -20.63 21.15 4.53 -11.85 -26.68 11.05 -22.1 22.03 4.41 33.21 -5.11 30.94 22.1 -0.39 4.65 -1.08 9.31 -1.47 14 -1.05 12.63 -2.95 24.84 -2.95 37.57 0 0.35 -0.39 0.69 -0.74 0.74 z" id="PATH3" style="fill:#772b1a;fill-opacity:0.41;fill-rule:evenodd" />
<path d="m 145.5 111.74l 4.89 15.19 15.82 0 -12.8 9.39 4.89 15.19 -12.8 -9.39 -12.8 9.39 4.89 -15.19 -12.8 -9.39 15.82 0 4.89 -15.19 z" id="PATH4" style="fill:#ffffff;fill-rule:evenodd" />
</svg>

I haven't set eyes on your graphic but the above does kind of appear to be a set of instructions.

Post by **Ron P.** » Sun Sep 24, 2006 2:10 am

Questions wrote:Are the images I put on the site in my first post above vector or not? Yes or no?

I was able to open both of them in Paintshop Pro 9...

The .svg appears to be a Raster Image, ie like a photograph. The .psd appears to be vector, however it starts pixelating at just 300% zoom. True vector graphics will not. So I would say that it also is a Raster image.

Let me take a stab at explaining...

Raster images (photos) have all the pixel information filled in. So when you enlarge it, the pixels need to be added to, with information that the program, web browser, or whatever thinks should be there. It borrows from neighboring pixels to recreate the image. This leads to a degradation in the quality.

Vector images (drawings) are sets of instructions based on coordinates. The triangle that Steve referred to is a set of coordinates. Now with this type of image, the computer simply fills in the graphic shape created by those coordinates with the colors you specify. No matter how large or small, the amount of color fill will be the correct amount for that size. So if you use PI and draw a square, then fill it with blue. Now resize that square to 500 %. It will not distort, because the fill is based on the coordinates needed to make the square.

Square vector drawing would have something like, Point 1 (x=10;y=20) Point 2 (x=40;y=20) Point 3 (x=40; y=60) Point 4 (x=10; y=20). Now the space inside those coordinates are filled with a color. No matter how large you make that, the space inside is filled.

Clear as mud yet?

Questions · Post by **Questions** » Sun Sep 24, 2006 2:11 am

Guess it's just the new IE7beta that allows one to view the svg file versus the properties of it, which is what your browser is showing you. So what version of IE are you using?

I've installed the tril version of ps to see if the image loads and it loads for me after downloading it from the site I posted it on. And it opens fine in PI10 for me. What error did you get when attempting to open the psd file in PI & PS?

I have PI 10 and download the latest trial for PS.

Anyway, my initial understanding of vector is if after resizing the image it becomes pixellated then it's not a vector graphic. Basically if quality is lost. This is my understanding of it. However working in PI without flattening it remains in the quality originally drawn no matter what size I resize it to. But when saving it in psd file without merging and opening it PS and then using the tool to resize each element as I am able to, it causes it to become pixellated (jagged around the edges). Now I'm installing the trial of illustrator and see what happens. I really just wanted a second opinion since I wasn't sure my understanding of a vector was on point, hence the reason for my joining and posting.

The svg file however, no matter how much I zoom in on it it via my browser keeps its quality as originally drawn (at least on MY end). The browser I use is IE7. I however have no clue what software programs open svg file types so I can't test it as I'd like to. Know of any?

EDIT: Vid, not quite clear yet. I think now I'm confused a bit on the svg thing.

Post by **Ron P.** » Sun Sep 24, 2006 2:17 am

Most browsers, will only display Raster images, not vector. You could create the triangle as a vector, then you would have to save/render it to either a gif, jpg, png, etc... so it can be recoginzed and viewed in web browsers. Once that is done, it no longer is a vector, but a raster image.

Questions · Post by **Questions** » Sun Sep 24, 2006 2:19 am

I used the export feature in PI10 to save it as a svg file. If it were raster wouldn't it become jagged around the edges eventually after zooming in so much, right? Is svg vector?

EDIT: NEVER MIND. I opened the svg file in illustrator and resized each element and its quality stays the same no matter how big or small as when initially designed in PI10.

So PI10 export to svg open in Illustrator works to retain quality as original.

As for the PSD, it loses quality.

Thanks Steve and Vid for replying and confirming.

Post by **Ron P.** » Sun Sep 24, 2006 2:29 am

Yes, SVG= Scalable Vector Graphics, which is an XML language. XML= eXtensible Markup Language. So SVG is vector, which as I stated above are instructions, telling how to make shapes...

Read more here Wikipedia Scalable Vector Graphics

Questions · Post by **Questions** » Sun Sep 24, 2006 2:34 am

IE7 browser will actually show the svg file (i think it's an addon from adobe, though, or something) and if you right click on the image in the browser (I'm referring to IE7 since that's what I use) it will open a menu with the following options:

zoom in
zoom out
original view

higher quality
pause
mute

find
find again

copy svg
view svg
view source
save svg as

help
about adobe svg viewer

If I click on view source it will show me the instructions posted by Steve.

Anyway I got what I needed. Thanks.

keenart · Post by **keenart** » Sun Sep 24, 2006 5:06 am

According to Microsoft IE7 is now supposed to be able to open and display SVG's.