What is SVG?
SVG stands for scalable vector graphics. In layman’s terms, SVG a type of graphic that will look smooth, crisp, and clean no matter how big or small it is. It is also a graphic type that can be scripted with XML-like coding, so it can be animated and/or interactive.
Even if you’ve never heard of SVGs, you’ve probably seen some of its cousins in the vector graphics field, specifically EPSs (Encapsulated PostScript), PDFs (Portable Document Format), WMFs (Windows Metafile), and SWFs (Shockwave Flash).
SVG is different from most of its cousins in that, because it is XML-based in its coding, it is possible to create and edit an SVG file with just a simple text editing program. There are plenty of graphics programs out there, though, that can be used to generate SVG files, including one provided specifically for use with BlackBerry devices.
If you’ve created themes for BlackBerry® devices for any reasonable length of time, you’ve probably noticed that there are specific areas in the BlackBerry Theme Builder where you can input SVG files. Everyone says you can make a theme do all sorts of wild and wonderful things with SVG. However, if you’ve never worked with or even seen them before, the first question you have is “What is SVG?”.
What SVG can do for themes
When working in the BlackBerry Theme Builder 5.0, there are two sections where SVGs can be used. These are the Home screen and the Lock screen. Using SVG can make your themes more dynamic in a few ways:
- Animation: Only with SVGs can you add any sort of animation to your Home and Lock screens.
- More customized Home screen buttons: In BlackBerry Theme Builder, you are restricted by various image sizes regarding buttons and icons. Using SVG to create buttons removes those limitations. With SVG, icons can be resized, and buttons can be given custom animations when highlighted and/or selected.
- Make screens more interactive: With SVG files, it’s possible to make the screens more dynamic. Drawers can be created to hide Home screen buttons. Animations can be made to start or stop on unique triggers, such as the arrival of a new text message, or the rotation of a BlackBerry® Storm™ smartphone from portrait view to landscape view.
How to make SVG files
There are two main ways to go about making an SVG file for BlackBerry device themes. The first way is to use a program called the BlackBerry Composer. This free program is provided by RIM, and it’s usually installed on your machine when you install the BlackBerry Theme Builder. The second way is by writing the SVG code yourself with the use of a text editor program. There are pros and cons to each of these techniques, and different resources available for each:
- WYSIWYG program geared towards those already comfortable with various graphic design programs
- No need to learn SVG code beforehand
- Free to download
- Works relatively well for simple, straightforward animation and interactivity
- May export bloated code for SVG files with complex animations and/or interactivity
- SVG components often renamed to random, irregular number strings that make it difficult for those with coding experience to decipher
- Official BlackBerry Composer 5.0 User Guide
- Tutorial: How to Create a Hidden Dock Theme Using Composer
- Tutorial: Understanding Icons in the BlackBerry Composer
- Tutorial: How to Add a Focus Icon in the BlackBerry Composer
- Artist has greater control over organization of SVG code, including the naming of elements
- No need for any special program to write code. Just a text editor, such as Notepad, is fine.
- Can create special effects that cannot be re-created with the BlackBerry Composer
- Hand-coded SVG files can have a smaller file size than BlackBerry Composer exported SVG files that do the same animation/special effects
- Has a steep learning curve for those with no coding experience
- Testing for appearance and fuctionality involves repeatedly importing and updating the SVG file in the appropriate BlackBerry Smartphone Simulator or on a BlackBerry device
- Not easy to find specific tutorials for hand-coding BlackBerry device SVG files
- Official SVG for BlackBerry Smartphones User Guide
- W3.org Reference on SVG 1.1
- W3.org Reference on SVG Tiny™ and SVG Basic (versions of SVG used for mobile devices)
- Sam’s Teach Yourself SVG in 24 hours book (better than most tutorials I’ve found online in teaching basic SVG coding, and easier to understand than the W3.org references. It’s what I used to teach myself)
- SVG Essentials (an O’Reilly book that is a good reference for SVG once you have a basic understanding of of the coding)