Tag Archive | CSS

My SVG Notes

SVG (Scalable Vector Graphics) is pretty awesome, especially so for 2d flat-look icons in your applications, or as clipart in your presentations.

I’ve recently been doing just that, using SVG for flat icons in a mobile app; and compiled some personal notes and links you might find useful.



We are now at the point where you’d be hard pressed to find an Internet Browser that can’t do the SVG dance.

CanIUse.com shows us what’s compatible or not.

Basic Usage

Craig Butler wrote a nice short overview of the different ways you can embed Scalable Vector Graphics into your web page. I’ve provided some more links later in my blog which expand on those methods.


My notes on SVG-CSS backgrounds

If you find that you have to use SVG in a background you may be faced with a bit of a shocker – you can’t easily change the colour or rotation of the SVG element!

Luckily you can specify the background size (CanIUse, W3C).

background-image: url('xxxx.svg');
background-size: 24px 24px;
background-position: center;

However, the colour is taken directly from the SVG file. So if you need a different colour you either use an SVG editor (see later) or edit the SVG as a text file and fill in properties like stroke=”red” fill=”red” as attributes in the required element. See this tutorial for more details.

Rotation can also be a pain when using background SVG images. If the SVG image isn’t already rotated how you want it, you’d have to either

  • edit the SVG with an editor to rotate it and re-save,
  • rotate the HTML element that is used for the background SVG,
  • in the SVG file, add an attribute to the drawing element you require: transform=”rotate(-45 100 100)“, where the parameters are (degrees, x rotation point, y rotation point). See this example.




I’ve tried google’s on-line svg-edit, and for quick jobs it’s really handy, but a little buggy (had to press cancel while loading to get the SVG to load!)

I’ve not tried the following editors, but they looked very promising.





Unless the editor already supports it, you may want to optimize your SVG afterwards.


More Tips and Tricks with SVG


Jenkov.com SVG tutorials

W3CSchools SVG reference


SVG Icon/Image Resources

Here are a selection of Icon packs with commercially permissive licences. Don’t forget to read licences carefully before using, and attribute the original sources in the manner they state.


Open Clipart




Custom MIT style licence, prevents re-hosting or selling the ‘set’ of icons.



Zurb Foundation Icons

Has no explicit licence, but indicates free.




Icon Monster

This has a custom licence which is very permissive, but you can only use 50 icons.





They also do commercial packs http://icomoon.io/#icons-icomoon



A MIT style licence



Open Iconic

MIT licence (svg and PNG)

Be careful, earlier versions of the Iconic packs were Creative Commons Share-a-Like which I believe the licences are ambiguous enough to not be suitable for commercial apps. There’s also a commercial version of this library. I found some scaling issues with these icons, and some required editing before they could be used.



A list of other Icon Packs



Elusive-Icons Web Font

This is under the SIL OpenFont licence. I haven’t checked this licence thoroughly, but the intent is set right. However, I need to spend more time reading the specific EULA to ensure this is compatible with commercial software.







JQueryMobile+PhoneGap hints/hacks for Windows Phone 8.0/iOS/Android

[IE10] JQuery Mobile data-role=”footer” appears 50px too high

When porting a LOB (Line Of Business) JQueryMobile App to Windows Phone 8.0, an instant surprise was the standard data-role=”footer” div was 50px too high. Trying to adjust the padding, position or boundaries simply clipped it incorrectly. I haven’t yet tried to see if iScroll would help with this (a common suggestion).

Even with a device-width and device-height tag in the meta tag or explicitly in css, it didn’t position correctly, and scrollable lists would appear to overflow underneath it. I discovered that by setting the device width explicitly to 320px (The value which made the text look ok on the specific device), suddenly the footer snapped. Anyone know what’s going on, please tell me!

However this still left a 1px gap at the bottom (and 1px gap at the top when the phone was in landscape mode!). This can be further fixed by setting (in my case) the height to 534px. This had the unfortunate consequence that if the keyboard popped up, the view would zoom out to fit – not what an app needs.  Maybe conditionally setting the viewport based on text focus could get round this (hacks on-top of hacks). But there has to be a better way?

So, for now, this is my ‘hack’, until I discover more.

/* for ie 10 adjust the viewport, this appears to make the footer almost perfect in its position*/

@media screen and(orientation: portrait) {

@-ms-viewport {

width: 320px;

height: 534px; /*this fixes the footer 1px issue, however, keyboards will now cause the entire page to zoom out*/

user-zoom: fixed;


} }

[IE10] Portrait mode is zoomed out too far

On my Nokia Lumia 920, the app didn’t look ‘appy’, so to make sure that the portrait mode isn’t zoomed out too much I also added another media query.

@media screen and(orientation: landscape) {

@-ms-viewport {

width: 540px; /* use media queries to be more intelligent */

user-zoom: fixed;


} }

[IE10] Disable link highlighting

To make sure a big grey selection rectangle doesn’t slap its ugly face all over your work, add this to your <head>.

<meta name=”msapplication-tap-highlight” content=”no” />

[WebKit+IE10] Stop default link following/opening popups

Add this css to whereever you need it.

-webkit-touch-callout:none; /*stops link following in external browsers*/

-ms-user-select : none; /* ie 10.0 version */

[WebKit+IE10] Prevent selections except for within inputs.

Add the following CSS



-webkit-user-select: none; /*stops selections – except for inputs*/

-ms-user-select : none; /* ie 10.0 version */


[WP8.0/IE10] Prevent full view bouncing once scrollable lists complete

It’s really, really frustrating. You want touch gestures and scrollable lists, but the default phonegap project structure makes the whole view bounce, and drag down/up when you hit limits. Bounce is acceptable within the non-fixed areas of your app, but the headers and footers need to keep in place.

This was fixed on iOS with DisableOverscroll or UIWebViewBounce settings in config.xml (can’t remember which one worked), but no such fix for WP8.0 as i can see it. If someone suggests -ms-touch-action :none, please please provide an example html and CSS that allows a ul to be scrolled in the way I’ve specified.


[All] Remove highlighting border from tick boxes when they have focus

div.ui-checkbox label.ui-focus {

box-shadow: none;


Debugging CSS in Mobile Phone Applications – live

This post is focused on helping you debug CSS styles and DOM for HTML Apps while they are executing on the device or simulator.

The instructions originate from a Windows 8, Visual Studio 2012 and Windows Phone 8 perspective, but the mechanisms apply to Android and iOS development too.

We are going to use an open source tool called Weinre to connect the device and your favourite Webkit web browser together. You’ll be able to highlight DOM elements, and change styles live in Chrome if you follow these instructions.

1. First you need the node.js command line.

Visit nodejs.org/download

Download and install the windows package.

2. Install Weinre

Go to your Windows 8 start screen, or the Start Menu and run the Node.js command prompt.

Node.js command prompt

You should see this window:


In the command prompt type

npm -g install weinre

You should see it getting a number of packages.

3. Prepare to launch Weinre (pronounced Winery by many)

Before we launch weinre, we need some information. A port number and IP/hostname.

For LAN debugging, use an ip address or a machine name, for outside of the LAN, you’re going to have to use a fixed IP or accessible DNS name. On a command line use “ipconfig” to determine your IPv4 address.

You can pick a port number (in my examples below I used 1234), and Windows will prompt you to unblock the port (but if you run into trouble, configure it manually).

4. Launch Weinre

In your node command prompt, type

weinre --httpPort xxxx --boundHost y.y.y.y

Where xxxx is the port number of your choice (8080 if you don’t specify it) and y.y.y.y is your IP address (or accessible DNS name).

You should see some output like this, and probably a firewall rule request will popup (ok it).


5. Prepare your HTML app

In your HTML App, put the following line of code whereever you like (preferably early).


6. Run your app in the windows phone emulator (or ADT/iOS Simulator)

7. To view your mobile app’s browser styles/DOM and change them via Chrome

Open Chrome and type in


You should be able to now use page inspection, Elements, console but not debug javascript. 😦