Как создать изображение кодом?

[Artimarius]

Здравствуйте! Нужна помощь понимающих.

Вопрос: Я хочу сделать иконку не путем добавления ссылки на изображение в код, а кодом, указав размер иконки в 20px, 20px и каждому пикселу присвоить свой цвет, чтобы в итоге они образовали простую иконку.

Цель: Получить иконку без надобности заливать изображение на хостинг или использовать с иного ресурса.

Подскажите пожалуйста пример кода, как присваивать цвет пикселам.

Желательно html, думал сделать через canvas и js, но здесь подвох, если js отключены, иконки отображаться не будут, поэтому остается html.

Но если это анриал, тогда уже js, хотя мне кажется это просто сделать, только мне не хватает соображения, что бы понять как это выразить словами вёрстки.

Заранее благодарен за помощь!

[boo]

можно использовать http://www.base64-image.de/

заливешь своё img а на выходе получаешь css код, который можно смело вставлять в свои стили и делать с ним что хочешь.

Только если будут большие имг, то будет большой код.

[wwt]

http://ru.wikipedia.org/wiki/Data:_URL

[Artimarius]

Спасибо за ответы, но это не совсем то, что я хотел.

Хотя порылся немного по просторам и наткнулся на довольно интересную вещь, называемую SVG.

Вот решение моей задачи при помощи SVG!

Выкладываю исходный пример стрелки, вдруг кому еще нужно будет.(на реализацию иконки затрачено 20 минут)

http://jsfiddle.net/Artimarius/7HGyE/

Но блин, такая иконка, получается в 5, а то и в 10 раз тяжелее чем она же в PNG.

Base64 мне понравилось, за это спасибо.

Но беда в том что изображения так же можно отключить в браузере, как и js. А при отключении изображений, отключается ли Base64?

Я хочу что бы иконки отображались в любом случае.

Поэтому вопрос остается актуальным, как именно средствами html (не canvas) сделать иконку, которая будет нормального веса и её невозможно будет отключить?

Жду ваших ответов, спасибо!

Edited February 13, 2013 by Artimarius

[mrnobody]

Можно воспользоваться иконочными шрифтами, например Font Awesome