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!

What's SVG:

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:

• Scripts, interactions and external objects are not implemented due to security reasons.
• Animations, videos, sounds and internal images are not implemented.
• Since SVG icons should be small and quickly rendered, we disabled the following SVG elements that may significantly affect a drawing performance:
  • <pattern>
  • <color-profile>
  • <hkern>
  • <hatch>
  • <hatchpath>
  • all effects, blend mode and filters
• Compressed SVG files (SVGz).

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:

• Microsoft Expression Design 4: very simple in use. If you're familiar with Microsoft Office products, you may immediately start creating your own SVG files!
• Inkscape: very powerful tool, but some time is needed for learning it.

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"?>
<svg>
    <svg>
        1-st icon
    </svg>
    <svg>
        2-nd icon
    </svg>
    <svg>
        3-rd icon
    </svg>
        .....
</svg>

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:

1. Prepare SVG image lists and save them in your project RES folder. For example, if your application has one toolbar only, create toolbar.svg file and copy it to <My app>\Res folder.
2. Import SVG file(s) to your resources: newly added files should be imported to "SVG" resource type.
3. Open your .rc file in the text editor and replace your existing BMP or PNG file(s) with SVG:
   • Old .rc:

     IDB_MYTOOLBAR PNG DISCARDABLE "res\Toolbar.png"

   • New .rc:

     IDB_MYTOOLBAR SVG DISCARDABLE "res\Toolbar.svg"

     Toolbar.svg is an SVG "sprite" - the SVG containing list of nested SVGs.
4. Please verify that you've a call to AfxOleInit(); in your application's InitInstance: otherwise, the framework cannot load SVG images.

Back to the Developer Area