Как вывести на печать страницу с помощью SVG иконки
Как повествует developer-mozilla.org, SVG — масштабируемая векторная графика (Scalable Vector Graphics — SVG) является языком разметки расширенным из XML для описания двухмерной векторной графики. SVG по существу является графикой, так же, как XHTML — текстом.
А, если это так, то можно свободно использовать в своих проектах этот элемент графики…
SVG по своим возможностям приближается к запатентованной технологии Adobe Flash, но отличается от неё тем, что SVG является рекомендацией W3C (то есть, стандартом), и тем, что это формат, основанный на XML, в противовес закрытому двоичному формату Flash. Он явно спроектирован для работы с другими стандартами W3C, такими, как CSS, DOM и SMIL.
И сегодня, на примере иконки «Печатать» это и сделаем. Тем более, что «изобретать» что-либо из ряда вон выходящего не придется. Просто берем готовый вариант кода иконки в формате SVG и вставляем в нужное место на странице, которую нужно вывести на печать.
Код строки вывода:
|
1 |
<svg height="16" width="16" onclick="print()"><path d="M4,2h8v2h1V1H3v3h1M0,5v6h3v1l3,3h7v-4h3V5m-3,2v1H12v6H6V12H4V8H3V7m2,1h6v1H5m0,1h6v1H5"></path></svg> |
Кликните по иконке справа — увидите результат:
Так же, можно использовать GIF или PNG файл в качестве цветной иконки с таким кодом:
|
1 |
<a href='javascript:window.print(); void 0;'> <img src="адрес_изображения" / ></a> |
Вот, в принципе, и все.
Да, кстати, если хотите поэкспериментировать с SVG, то можете воспользоваться on-line конвертером SVG в PNG… и не только!
Удачи! И… до новых встреч!
| ◄ Как за 5 минут сделать мультиязычный сайт без плагинов | WP Hack # 42. Удаляем атрибуты width и height в WordPress без плагина ► |
 (Голосовало: 1 ) Загрузка...Метки: Scripts ○ SVG ○ WEB мастеру ○ Как сделать? ○ Секрты со всего света ○ Обновление статьи: 31.03.2016 Просмотров: 1271 Короткая ссылка: http://tinyurl.com/hjchchv |
Подишись на сообщения блога по E-mail и получай свежие новости в числе первых! |
Наберитесь терпения - новые публикации в процессе осмысления... |
На сегодня в блоге...
|
|
|
 |
- Бегущая строка для сайта на «чистом» CSS (Обновление от 06.04.2018)
- Как установить на сайт скрипт Test Speed (Обновление от 05.04.2018)
- Создаем генератор QR кода для своего сайта (Обновление от 05.04.2018)
- Делаем рейтинг для блога, как на YouTube (Обновление от 04.04.2018)
Добавить комментарий
Пожалуйста зарегистрируйтесь или войдите, используя свой логнн.
Рубрики
Календарь публикаций
| Пн | Вт | Ср | Чт | Пт | Сб | Вс |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | ||||
| 4 | 5 | 6 | 7 | 8 | 9 | 10 |
| 11 | 12 | 13 | 14 | 15 | 16 | 17 |
| 18 | 19 | 20 | 21 | 22 | 23 | 24 |
| 25 | 26 | 27 | 28 | 29 | 30 | |
MasterPRO в Twitter’e
Девчонки, девчонки — короткие юбчонки… | WEB Design ✪ Graphics by MasterPRO master-sv.com/blog/t…
Рейтинг статей
- Редкие HTML символы (5,00 из 5)
- Пишем текст поверх картинки средствами CSS (5,00 из 5)
- Удаляем «Google-шпионов» с Android устройств (5,00 из 5)
- Делаем красивую кнопку подписки на канал YouTube (5,00 из 5)
- Временный E-mail адрес. Бережем свой ящик! (5,00 из 5)
Информер праздников
 |  |
