SVG data uri works with IE9 and above, it's a great way to put custom hamburger / close / arrows etc. directly to CSS.
To get data uri to work with IE9 (other browsers works with incorrect urlencoding) and above only thing required is urlencoding at least the < and > signs:
E.g. my little hamburger:
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 110 110'%3E%3Cpath d='M 0,50 H 110 V 60 H 0 Z'/%3E%3Cpath d='M 0,20 H 110 V 30 H 0 Z'/%3E%3Cpath d='M 0,80 H 110 V 90 H 0 Z'/%3E%3C/svg%3E");
Note that data:image/svg+xml;charset=utf8, should not be escaped.
Problem is to get small data-uris, your tool creates them already. Only thing required is a way to get data uri easily out of the tool.
Also, I would like to have custom viewBox size e.g. 110x110, and custom grid settings (so that grid aligns with certain drawings better).
Thanks.
SVG data uri works with IE9 and above, it's a great way to put custom hamburger / close / arrows etc. directly to CSS.
To get data uri to work with IE9 (other browsers works with incorrect urlencoding) and above only thing required is urlencoding at least the
<and>signs:E.g. my little hamburger:
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 110 110'%3E%3Cpath d='M 0,50 H 110 V 60 H 0 Z'/%3E%3Cpath d='M 0,20 H 110 V 30 H 0 Z'/%3E%3Cpath d='M 0,80 H 110 V 90 H 0 Z'/%3E%3C/svg%3E");Note that
data:image/svg+xml;charset=utf8,should not be escaped.Problem is to get small data-uris, your tool creates them already. Only thing required is a way to get data uri easily out of the tool.
Also, I would like to have custom viewBox size e.g. 110x110, and custom grid settings (so that grid aligns with certain drawings better).
Thanks.