6

I am an open-source developer and going for pure HTML5 and CSS3 with my webframework (http://m-m-m.sf.net). I want to draw a validation error icon via input:invalid rule in CSS aligned to the right. But it is only working in FF but not in webkit based browsers such as Chrome or Safari. I created a minimal standanlone html (without validation and :invalid) for testing:

<!DOCTYPE HTML>
<html>
  <head>
  <style type="text/css">
  <!--
input {
  border-color: #ff2222;
  background-color: #ff8888;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em'><g><circle cx ='8' cy ='8' r ='8' style='fill:%23ff0000;stroke:none'/><text x='6' y='13' style='font-size:14px;fill:%23ffffff;stroke:none;font-family:Monospaced;font-weight:bold'>!</text></g></svg>");
  background-repeat: no-repeat;
  /* background-size: auto; */
  background-position: 98% 50%;
}
  -->
  </style>
  </head>
  <body>
    <input type="text" placeholder="type here" />
  </body>
</html>

Any ideas?

Jörg
  • 822
  • 1
  • 10
  • 13
  • my SVG doesn't show on CHROME when I only do `background:url('loader.svg')`. Can't figure out why it doesn't show when I can see the asset has been loaded successfully – vsync Jun 20 '13 at 12:49

1 Answers1

9

You may try base64 encoded data uris for svg background images.

This is how it would look in CSS:

input {
  border-color: #ff2222;
  background-color: #ff8888;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iMTZweCIgaGVpZ2h0PSIxNnB4Ij48Zz48Y2lyY2xlIGN4PSI4IiBjeT0iOCIgcj0iOCIgZmlsbD0iI2ZmMDAwMCIgc3Ryb2tlPSJub25lIiAvPjx0ZXh0IHg9IjYiIHk9IjEzIiBzdHlsZT0iZm9udC1zaXplOiAxNHB4OyBmb250LWZhbWlseTogU2Fucy1zZXJpZjsgZm9udC13ZWlnaHQ6IGJvbGQ7IHN0cm9rZTogbm9uZTsgZmlsbDogI2ZmZmZmZjsiPiE8L3RleHQ+PC9nPjwvc3ZnPg==");
  background-repeat: no-repeat;
  /* background-size: auto; */
  background-position: 98% 50%;
}

I changed the font-family to Sans-serif as the other (Monospaced) font got rendered 2px more to the right by Chrome on Windows, you could play with this a little. I used this online encoder.

Here is the same svg with the Monospaced font:

  background-image: url("data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iMTZweCIgaGVpZ2h0PSIxNnB4Ij48Zz48Y2lyY2xlIGN4PSI4IiBjeT0iOCIgcj0iOCIgZmlsbD0iI2ZmMDAwMCIgc3Ryb2tlPSJub25lIiAvPjx0ZXh0IHg9IjYiIHk9IjEzIiBzdHlsZT0iZm9udC1zaXplOiAxNHB4OyBmb250LWZhbWlseTogTW9ub3NwYWNlZDsgZm9udC13ZWlnaHQ6IGJvbGQ7IHN0cm9rZTogbm9uZTsgZmlsbDogI2ZmZmZmZjsiPiE8L3RleHQ+PC9nPjwvc3ZnPg==");

and a jsfiddle

Martin Turjak
  • 20,896
  • 5
  • 56
  • 76
  • Awesome. Works fine. Thanks a lot. BTW: I am using less and via plain svg I was able to use variables for colors but the most important thing is that it works in relevant browsers (IE6 and IE7 do not have relevance for me)... – Jörg May 09 '13 at 13:01
  • Cool. Glad I could help. Recently I answered a question about base64 image data-uris and colors in LESS: http://stackoverflow.com/questions/16076713/less-data-uri-painter-mixin/16093998#16093998 a part of that might be useful for you. BTW: This seems to be your first question on SO. If an answer finds a solution for your question you can accept it (tick at the side =)). – Martin Turjak May 09 '13 at 18:12
  • Hi, I'm using SVG in Chrome with the base64 encode, but sometimes I'm facing the issue ERROR 414 - URI too long. Do you know where it comes from and how to fix it? – Fab Oct 08 '13 at 13:44
  • 1
    You don't need to encode data URI in base64, you can also use URI encoding (see JS `encodeURI()`) plus encode the char `#` → `%23` (for IE) and gain ~10% compared to base64 You can [test it](http://jsfiddle.net/F5ufr/), if you see a green square, SVG background works using URI encoding – mems Oct 22 '13 at 14:17