BCGSoft > Developer Area > Vector Graphics

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:

High DPI: raster toolBar icons

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!

High DPI: vector toolBar icons

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