Using Vector Graphics
BCGControlBar library provides a very simple and efficient way to use Scalable Vector Graphics (SVG) in toolbar/menu/ribbon and other controls. Why do you need to use a vector graphics instead of raster? High-DPI support is one of very important application features today: since more and more customers are using the high-resolution displays, the program should be DPI-aware. Many years ago we already implemented a "smooth image resizing": each toolbar/ribbon icon is automatically resized according to current DPI, but the icons render blurry on the high-DPI displays. The blurring is not critical if DPI value is 125% or 150%, but in case of DPI 175% or greater (e.g., MS Surface), the result is not so good - you can see the "blurred" icon edges:
The solution is preparing separate image sets for each DPI, but if your application has a lot of toolbars or ribbon controls, amount of the resources is huge and it will be very hard to maintain them (even if you need to add a single icon, you've to prepare at least 4 separate images: 16x16, 24x24, 32x32 and 40x40!). Therefore, only if you're using a scalable vector graphics, you can be sure that your application looks good under all expected DPIs. The following screenshot shows the application with vector icons launched in 200% DPI environment - no blurry icons anymore!
SVG ("Scalable Vector Graphics", recommended by W3C ) is an XML file describing two-dimensional graphics format. BCGSoft libraries have SVG support with the following limitations:
We strongly recommend to use a simplified ("optimized") SVG only: all elements such as texts or shapes should be converted to paths and all paths should be combined. The simplified SVG is small and fast-drawing. In addition, in this case, it will be very hard to make a "reverse engineering" for your media. How to create SVG icons: For your convenience, our designers prepared a set of SVG icons that you may freely use in your applications! Please find them in Graphics folder - there are 40 16x16 and 20 32x32 basic icons. The following free tools allow you to create new SVG images:
Or, you may use any commercial applications such as CorelDraw or Adobe Illustrator. In addition, there are a lot of 3-rd party freeware/commercial SVG icon collections. How to prepare SVG image lists: When the framework is loading image list resource, first it's looking for SVG resource and trying to parse an SVG. We assume that SVG image list has the following format:
<?xml version="1.0"
encoding="utf-8"?>
The icons are sorted by "x" and "y" attributes of each "2-nd level" SVG. Please use our Toolbar Editor and Ribbon Designer to generate the lists: if the application has SVG-based toolbars/ribbons, our tools allow to add SVG icons to existing image lists or create a new list. How to replace your existing BMP/PNG image lists with new SVG lists:
|