cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv headernumbered-list123split-screen
CodePen probably won't work great in this browser. We generally only support the major desktop browsers like Chrome, Firefox, Safari, and Edge. Use this one at your own risk! If you're looking to test things, try looking at Pens/Projects in Debug View.
user profile image

A blue box background created as a data uri svg. I've complicated it up a little bit by using the viewbox attribute to change the origin of the canvas instead of changing the origin of the rectangle.

I'm noticing some anti-aliasing effects here with Chrome, but not as bad as for the examples that used canvas.

See comments for more tips on SVG data URIs.

For more ways to draw blue boxes:

http://css-tricks.com/blue-box/ http://codepen.io/collection/qxdiD/1

This Pen is a fork of Amelia Bellamy-Royds's Pen Blue Box Data URI (base-64 encoded .png).


  1. P.S. This is a simple example, but for more complex SVG files like this one, this is your checklist for getting them to work in a data URI in NON-Internet Explorer browsers without resorting to unreadable and uneditable base-64 encoding:

    • Start the uri with data:image/svg+xml;charset=UTF-8, and note the punctuation. You can skip the charset declaration if you're only using ASCII characters; in that case, skip the semi-colon as well, but leave in the final comma.
    • After the comma, enter your code starting with the SVG start tag. You don't need a doctype, but you do need the xmlns='http://www.w3.org/2000/svg' attribute in the svg tag.
    • Replace all linebreaks in your svg code with plain spaces. For good measure, replace tabs too, though it should still work with them (but really, without linebreaks they do nothing to enhance readability). This can be skipped if the data URI is going to be referenced within your HTML file (e.g., as an <img> source), but is required for putting the data URI in a CSS file url() function.
    • Use only one type of quotation marks in your svg code (single or double). Wrap the entire URI (including the data: part) in the other type of quotes.
    • Replace any # characters in the code with %23 and any % (or at least those that are followed by a hex digit) with %25; if you're doing an automated find and replace, remember to encode the real percentage signs before you start adding in extra percent characters by encoding other characters.
    • If there are any close tags within the string which could be mis-interpreted as a close tag from an element outside the string (e.g. a closing style tag for a data URI within embedded CSS, such as is used in CodePen), then URL-encode at least one character of that tag: replacing the / with %2F works.
    • If the URI is in a context where you only want to refer to a specific SVG fragment, such as in this filter example, add the #id after the closing svg tag, but within your outermost quotation marks.

    It's possible there are other characters or situations where you might need some url-encoding, but that should get over the most common "why is this not working?" frustrations.

    However, again, this only works in non-IE browsers. You'll need to completely URL-encode (or base64 encode) the text for IE. Which unfortunately means that you can't use this method for public/final websites, but it's great for development and exploration.

  2. Thank you for this list! The %23 encoding was a huge help.

  3. +1 for %23 encoding. Thanks!

Leave a Comment Markdown supported. Click @usernames to add to comment.

You must be logged in to comment.