Как вывести на печать страницу с помощью 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 Просмотров: 1511 Короткая ссылка: http://tinyurl.com/hjchchv |
Подишись на сообщения блога по E-mail и получай свежие новости в числе первых! |
Наберитесь терпения - новые публикации в процессе осмысления... |
На сегодня в блоге...
|
|
|
 |
- Any Send: Самый простой и быстрый способ пересылки файлов с компьютера на смартфон и обратно (Обновление от 05.12.2018)
- Бегущая строка для сайта на «чистом» CSS (Обновление от 06.04.2018)
- Как установить на сайт скрипт Test Speed (Обновление от 05.04.2018)
- Создаем генератор QR кода для своего сайта (Обновление от 05.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 |
| 31 | ||||||
MasterPRO в Twitter’e
Any Send: Самый простой и быстрый способ пересылки файлов с компьютера на смартфон и… goo.gl/fb/hbNFy3
Рейтинг статей
- Редкие HTML символы (5,00 из 5)
- Удаляем «Google-шпионов» с Android устройств (5,00 из 5)
- Пишем текст поверх картинки средствами CSS (5,00 из 5)
- Как «включить» gzip компрессию на сайте WordPress? (5,00 из 5)
- SmartAPKTool — v.2.2 Работаем с .apk файлами для Android (5,00 из 5)
Информер праздников
 |  |
