Design tip of the day: Vector art - GoFuckYourself.com

mind · 01-26-2005, 04:44 PM

Vector Graphics is a highly usable and aesthetically superior image format that is expected to replace raster graphics on the Web. Unlike pixelbased graphics, vector art is based on mathematical instructions which gives several advantages.

One great advantage that vector graphics have over bitmaps is that they are resolution-independent or scalable, giving rise to the term Scalable Vector Graphics or SVG's. This means they can be enlarged according to their output device such as a printer without consuming any more disk space. In terms of the Web, this means that the download time of an image will be the same regardless of the size of the image. They will also remain as sharp when scaled to a large size as when they are presented small, unlike bitmaps, which appear "blocky" when scaled upwards. This elegance in scaling that vector graphics can accomplish is one of the main advantages they have over bitmap formats and will be irresistible to website designers seeking to create more professional-looking websites in the future.

Vector compared to Pixel graphics

Unfortunately bitmap formats are the standard graphic file formats on the Web at the moment, which means that vector graphics have to be rasterised in order to be displayed in current browsers or put in flash format which not all computers, browsers has installed.

SVG is plain text XML. The code can be written within HTML code, eliminating the need for additional files, unlike Flash, which uses additional binary files. Predefined shapes will be created from the markup, which is at present being finalized by the W3C.

Positioning of vector graphics will be determined using cascading style sheets (CSS). By harnessing the power of CSS, SVG will be able to accomplish the whole range of CSS capabilities such as layering and grouping.

SVGs will have the ability to incorporate text. They will be able to be named which means they can be used in scripting, they can be defined and used elsewhere much like the class attribute in CSS - a very powerful capability. JavaScript could be used to manipulate SVG's meaning that techniques such as rollover effects and animation could be applied.

The W3C are incorporating backwards compatibility into the SVG specification so that older browsers will be able to handle the format. The ability the use the equivalent of HTML's ALT tag will be available so that a GIF or JPG image could be displayed instead of the SVG.

Both Netscape and Microsoft are co-authoring the new standard, ensuring compatibility across platforms, something that was lacking in the construction of HTML.

So designers its time to take vector creativity to a new level - and webmasters its time you learned about the powers of vector driven graphics.

flashfire · 01-26-2005, 04:44 PM

vector art looks much better for sure

mind · 01-26-2005, 04:46 PM

Quote:

Originally Posted by flashfire

vector art looks much better for sure

it looks better, loads faster and will give endless new design options!

Semi-Retired-Dave · 01-26-2005, 04:50 PM

Nice, thanks for sharing all that info.

mind · 01-26-2005, 04:55 PM

Quote:

Originally Posted by CyberAge-Dave

Nice, thanks for sharing all that info.

yeah its a lot of info - but its worth the read imho

galleryseek · 01-26-2005, 04:56 PM

Great post...

I'd like to also add that both webmasters and designers need to completely quit using bitmaps for their logos, especially in logo contests.

Logos should be built with 100% vector, nearly 100% of the time. Only exception is if the webmaster absolutely 100% knows that the logo will only be web-based and not used for print work, which in my opinion is a bad assumption because you never know down the road.

EyesWideShut · 01-26-2005, 04:57 PM

nice post

vector looks SOOOOOOOOOOO much better for sure

mind · 01-26-2005, 05:04 PM

Quote:

Originally Posted by galleryseek

Great post...

I'd like to also add that both webmasters and designers need to completely quit using bitmaps for their logos, especially in logo contests.

Logos should be built with 100% vector, nearly 100% of the time. Only exception is if the webmaster absolutely 100% knows that the logo will only be web-based and not used for print work, which in my opinion is a bad assumption because you never know down the road.

Logo's are one of the best examples of the power of Vector art - and also an area which many webmaster overlook. i agree

bhutocracy · 01-26-2005, 05:19 PM

Uhh.. Vectors Look better for SOME things... and SVG is another overhyped/underused technology... I remember in '01 when it was going to kill flash LOL. In fact this article is probably several years old.

I don't understand why there isn't the caveat that bitmaps are better at some things... like most photo images for example. Vector for logos and simple design elements.. bitmap for most everything else.
*shrugs*

mind · 01-26-2005, 05:27 PM

Quote:

Originally Posted by bhutocracy

Uhh.. Vectors Look better for SOME things... and SVG is another overhyped/underused technology... I remember in '01 when it was going to kill flash LOL. In fact this article is probably several years old.

I don't understand why there isn't the caveat that bitmaps are better at some things... like most photo images for example. Vector for logos and simple design elements.. bitmap for most everything else.
*shrugs*

Why is flash great? due to vector driven images - vector isn't overhyped, but underused yes. Bitmap are better for photos yes, but i'm talking about website design and logos - and bitmap takes the shorter straw on that one.

bhutocracy · 01-26-2005, 06:02 PM

Quote:

Originally Posted by mind

Why is flash great? due to vector driven images - vector isn't overhyped, but underused yes. Bitmap are better for photos yes, but i'm talking about website design and logos - and bitmap takes the shorter straw on that one.

well, flash is great for many reasons...because it uses objects to animate rather than sequences of changing pixels. Because of interactivity, and yes because it uses vectors.
Bitmap takes the shorter straw on website design??? since when? logos yes because they are supposed to be simple. Not websites however. The heyday of full vector sites was sometime around '99 when flash 2 and 3 were around. every flash studio had a crazy cool full vector flash site that was lovely to watch but useless to use.
Bitmaps will always be a core feature of the web. As more and more bandwidth becomes available we will go further towards video than vector.
Not trashing vector, I like it for many reasons but pretending it's anything other than another tool in your belt is myopic. "bitmaps are better for photos yes" Do you ever think there will be a time when "website design" is less than 90% text and photographic? No. Toyota will always want pictures of their cars. Nike will always want pictures of their shoes. People will always want porn, people will always want to show pics of their kids or cars or whatever.
Vectors aren't great for texture. Web site elements will always beconstructed with photographic elements.

Vectors are also more CPU intensive when they get complicated, the math that makes them small in size when they're simple start to make them heavy and slow when they become complicated.

Anyways not wanting to put a dent in your thread, but a ra ra SVG article at this point in time is humourous. It's been around 4 years since it was released and we are yet to even see it used on anything other than theoretical or exhibition sites. Flash just had the authoring base tied up. Not saying SVG isn't a good technology.. just like others such as web 3d, the real world practicalities ensure they don't live up to their promise for whatever reasons.

Rob · 01-26-2005, 06:06 PM

We're turning into a vector world! I'm just hating it because I was raised in a Raster home.

Tala · 01-26-2005, 06:10 PM

Thanks! How does one create vector images? I know photoshop "can" do it, but it takes a great deal of b.s. to get there. What programs are best?

bhutocracy · 01-26-2005, 06:13 PM

Quote:

Originally Posted by Tala

Thanks! How does one create vector images? I know photoshop "can" do it, but it takes a great deal of b.s. to get there. What programs are best?

Adobe Illustrator, Macromedia Freehand, Macromedia Flash are all pretty standard.. you can of course use SVG but most people would rather use flash to draw a circle than mess around with XML.

Rob · 01-26-2005, 06:30 PM

Quote:

Originally Posted by Tala

Thanks! How does one create vector images? I know photoshop "can" do it, but it takes a great deal of b.s. to get there. What programs are best?

Tala, you'd be amazed at how great the pen tool is in Photoshop for designing dynamic vector images!

Though, Illustrator is the best for pure vector in my opinion.

AdultRMX · 01-27-2005, 10:13 PM

vector rules!

tenderobject · 01-28-2005, 07:05 AM

i love vector art!

01-26-2005, 04:44 PM	#1
mind Confirmed User Join Date: Apr 2004 Location: Aarhus, Denmark Posts: 1,199	Design tip of the day: Vector art Vector Graphics is a highly usable and aesthetically superior image format that is expected to replace raster graphics on the Web. Unlike pixelbased graphics, vector art is based on mathematical instructions which gives several advantages. One great advantage that vector graphics have over bitmaps is that they are resolution-independent or scalable, giving rise to the term Scalable Vector Graphics or SVG's. This means they can be enlarged according to their output device such as a printer without consuming any more disk space. In terms of the Web, this means that the download time of an image will be the same regardless of the size of the image. They will also remain as sharp when scaled to a large size as when they are presented small, unlike bitmaps, which appear "blocky" when scaled upwards. This elegance in scaling that vector graphics can accomplish is one of the main advantages they have over bitmap formats and will be irresistible to website designers seeking to create more professional-looking websites in the future. Vector compared to Pixel graphics Unfortunately bitmap formats are the standard graphic file formats on the Web at the moment, which means that vector graphics have to be rasterised in order to be displayed in current browsers or put in flash format which not all computers, browsers has installed. SVG is plain text XML. The code can be written within HTML code, eliminating the need for additional files, unlike Flash, which uses additional binary files. Predefined shapes will be created from the markup, which is at present being finalized by the W3C. Positioning of vector graphics will be determined using cascading style sheets (CSS). By harnessing the power of CSS, SVG will be able to accomplish the whole range of CSS capabilities such as layering and grouping. SVGs will have the ability to incorporate text. They will be able to be named which means they can be used in scripting, they can be defined and used elsewhere much like the class attribute in CSS - a very powerful capability. JavaScript could be used to manipulate SVG's meaning that techniques such as rollover effects and animation could be applied. The W3C are incorporating backwards compatibility into the SVG specification so that older browsers will be able to handle the format. The ability the use the equivalent of HTML's ALT tag will be available so that a GIF or JPG image could be displayed instead of the SVG. Both Netscape and Microsoft are co-authoring the new standard, ensuring compatibility across platforms, something that was lacking in the construction of HTML. So designers its time to take vector creativity to a new level - and webmasters its time you learned about the powers of vector driven graphics. __________________ MiND \| ProDesignLab.com

01-26-2005, 04:50 PM	#4
Semi-Retired-Dave Too lazy to set a custom title Join Date: Apr 2004 Location: LA Posts: 11,190	Nice, thanks for sharing all that info. __________________ Support a Good Cause

01-26-2005, 04:57 PM	#7
EyesWideShut Confirmed User Join Date: Jun 2004 Location: New York City Posts: 354	nice post vector looks SOOOOOOOOOOO much better for sure __________________ $$$$$$ $$$$$$ $$$$$$

01-26-2005, 06:06 PM	#12
Rob I'm a great bowler. Industry Role: Join Date: Nov 2003 Location: Right Outside of Normal. Posts: 13,310	We're turning into a vector world! I'm just hating it because I was raised in a Raster home. __________________

01-26-2005, 06:10 PM	#13
Tala Fucked if I know Join Date: Dec 2002 Location: Do you have a flag? Posts: 23,368	Thanks! How does one create vector images? I know photoshop "can" do it, but it takes a great deal of b.s. to get there. What programs are best? __________________ ICQ: 11120676 \| Google: mindcrime \| Skype: suitemindcrime\|E-Mail: mindcrime AT gmail.com\|PR girl with great writing skills for hire!!!! Contact me to work for YOU!\|TECHIEMEDIA? 24/7 support from some of the best techs in the biz. Tell Jim that I sent you.

01-26-2005, 04:44 PM	#2
flashfire ICQ 1 6 7 8 5 3 4 9 2 Join Date: Feb 2003 Posts: 13,098	vector art looks much better for sure

01-26-2005, 04:56 PM	#6
galleryseek Confirmed User Industry Role: Join Date: Mar 2002 Posts: 8,234	Great post... I'd like to also add that both webmasters and designers need to completely quit using bitmaps for their logos, especially in logo contests. Logos should be built with 100% vector, nearly 100% of the time. Only exception is if the webmaster absolutely 100% knows that the logo will only be web-based and not used for print work, which in my opinion is a bad assumption because you never know down the road.

01-26-2005, 05:19 PM	#9
bhutocracy Not making A Comeback Industry Role: Join Date: Dec 2001 Posts: 10,218	Uhh.. Vectors Look better for SOME things... and SVG is another overhyped/underused technology... I remember in '01 when it was going to kill flash LOL. In fact this article is probably several years old. I don't understand why there isn't the caveat that bitmaps are better at some things... like most photo images for example. Vector for logos and simple design elements.. bitmap for most everything else. shrugs

01-27-2005, 10:13 PM	#16
AdultRMX So Fucking Banned Industry Role: Join Date: Jan 2005 Location: Manila, Philippines Posts: 1,021	vector rules!

01-28-2005, 07:05 AM	#17
tenderobject Need Designs? 312352846 Industry Role: Join Date: Dec 2004 Location: Somewhere Posts: 11,688	i love vector art! __________________ NEED DESIGNS?!?