Как вставить SVG картинку в HTML или даже в CSS

Информация о материале: Родительская категория: Прочие; Категория: Работа с изображениями

Честный VDS/VPS, на котором «Лунная База» живет уже 20+ лет

Задумываетесь о том, чтобы поднять свой pet-проект, сайт клиента или настроить окружение для разработки? Уже пора подумать, где арендовать железо.

Лунная База хостится на FirstVDS более 20 лет. Мыслей о том, чтобы перебраться на другой хостинг, не было ни разу (хотя опыт работы с другими вариантами, конечно, есть).

Бывали разные ситуации, но они бывают на любом железе. Главное, что нужно понять: здесь нет маркетинговой шелухи и сказок про «мы всё сделаем за вас». Если вы берете VDS — вам дают полный root, возможность накатить любую ОС и не лезут в ваши конфиги.

Если в саппорт написать с вопросом по вашему коду и получить ответ: «Читайте документацию и разбирайтесь сами» или «Обратитесь к профильному специалисту» — это не повод обижаться. Это повод углубить свои знания в DevOps и сайтостроении! Бегите от тех, кто пообещает: «Мы всё чиним и настраиваем абсолютно бесплатно!». Никто никогда не работает «по доброте душевной» в ущерб себе, а бесплатный сыр в администрировании обычно заканчивается сломанной базой данных.

Что по факту: Гибкое масштабирование ядер и RAM, экономия по сравнению с физическими серверами и адекватная панель ispmanager, если она вам нужна.

Посмотреть тарифы VDS/VPS

Очарование форматом картинок в режиме SVG векторной графики.

По поводу формата картинок в режиме SVG векторной графики лично у меня сплошное очарование. Это не JPG и даже не PNG, которые имеют либо большие размеры файла (как по весу, так и по его физическим параметрам). И, если они не достаточно большие, то при их увеличении, картинка начинает «плыть». Так как они растровые. Это значит, что каждая точка (пиксель) в картинке имеет свои координаты и цвет. В то время, как картинки в формате SVG можно увеличивать до бесконечности (реально). При этом они будут пропорционально увеличиваться, сохраняя чёткие границы цвета при любых размерах. В общем – шик!

Именно по этому векторную картинку можно растянуть до размеров стены небоскрёба и она будет выглядеть также хорошо, как на экране монитора. Конечно, при ближайшем рассмотрении мы уткнёмся носом в большое поле, залитое одним цветом (или с лёгкой градационным переходом), но на небоскрёбы обычно картинки и не накладывают (если что).

Элементы в SVG-документе и SVG-анимация.

Кроме этого, все элементы в SVG-документе могут быть доступны и можно даже создавать SVG-анимацию, перемещая одни элементы относительно других, плавно деформируя их и накладывая свойства одних элементов на свойства других (как цвета, так и границы самих областей). И всё это описывается достаточно простыми функциями в виде кривых, которые соединяют точки. В этих точках (узлах) описаны свойства того, как себя должна вести функция (кривая) до и после прохождения этого узла. В общем, те, кто работал в CorelDROW или в Adobe Illustrator, знают на собственном опыте, на сколько это тонкий и одновременно простой в использовании инструмент.

Некоторые помнят мультики про Масяню, которые были сделаны как раз в этой технологии (в кривых), которые тогда ещё применялись во FLASH-анимации. FLASH ушёл. На смену ему пришёл SVG формат и он постепенно захватывает виртуальное пространство на сайтах.

Как же вставить SVG-картинку напрямую в HTML-документ? Обычно это делается как с обычной картинкой тэгом <img>. Но, так как SVG-файл представляет из себя XML-документ, то он может быть интегрирован прямо в HTML или даже в CSS разметку. Для этого лучше его предварительно перекодировать (для лучшей совместимости с разными браузерами).

Удобный SVG-encoder для работы с SVG-документом.

И огромное спасибо девушке Yoksel из Москвы, которая написала удобный SVG-encoder, который позволяет быстро и он-лайн проделать все нужные для этого манипуляции с SVG-документом. Респект ей и уважуха!

Ну и конечно ссылка на её URL-encoder для SVG, расположенный на GitHub → откроется в новой вкладке.

Самый честный хостинг за 20+ лет существования Лунной Базы

Задумываешься о том, чтобы поднять свой сайт в Интернете? Уже пора подумать о том, какой хостинг выбрать?

Лунная База хостится 20+ лет на firstDVS. При этом, мыслей о том, чтобы перебраться на другой хостинг не было. (Но, при этом есть опыт работы с другими вариантами.)

Бывали с firstDVS разные ситуации, но, они бывают на всех хостингах. Единственное, что тут важно понять, - это то, что никто ничего тебе не будет впаривать... Но, и работать за тебя тоже никто не станет. Если в саппорт ответили: «Читайте по ссылке и разбирайтесь сами...» или вообще «Обратитесь за помощью к специалисту», - это повод углубить свои знания в области сайтостроения, а не бежать к тем, что пообещают: «Мы всё чиним и всё делаем за своих клиентов абсолютно бесплатно!» Никто никогда ничего ни за кого "по доброте душевной" не делал, не делает и не будет делать!

Выбрать