The use of vector images in websites has had a bit of a stunted growth due to weak browser support. It was not until version 9 (released 2011) that Internet Explorer included native SVG support. For IE 8 and below, it is necessary to make use of a fallback to ensure consistency across browsers. That's an added step that dissuaded the use of vector images; there was little payoff for that extra work.
The landscape has changed a bit in the past few years. There's now incentive to use vector graphics in web design. Higher density displays are increasing in popularity due to Apple's retina displays and Windows' improved support for UI scaling. Responsive design can also make great use of vector images. You might see vector graphics used all around the web, you're just not aware of it. This very website uses vector images (with fallbacks) for its logo and many of the icons.
Choosing when to use vector images over raster can depend on a few factors. There are many cases where using vector just doesn't make sense. Photographs are the obvious example. Another is for small (less than 32px) icons; vector scales up very well but doesn't necessarily scale down very well.
Whether or not you need a fallback is another choice that won't always be straightforward. You should take into account your target demographic when deciding whether or not you need to implement one. Currently, IE 8 sits at ~11% usage globally, but that statistic might be different for your audience.
My personal philosophy is: if it can be vector, it should be vector. It sounds to me like your example, a simple schema, would take great advantage of what vector has to offer.
