У нашому попередня стаття Ми побачили, як використовувати безкоштовне програмне забезпечення для включення зображень у формат WebP. Тепер ми побачимо, навіщо створювати зображення SVG для веб-сайтів.
Однією з великих проблем, з якою стикаються веб-дизайнери, є кількість пристроїв, за допомогою яких люди підключаються до мережі. У тих випадках, коли зображення є лише ілюстративним, втрата якості не впливає. Але якщо це важливо для такого вмісту, як інфографіка, каркас або знімок екрана, вам потрібно переконатися, що вміст виглядає однаково в будь-якому розмірі.
Створення зображень SVG для веб-сайтів
Що таке графіка у форматі SVG
Щоб зрозуміти різницю між цим типом графіки та тією, яка зазвичай використовується на веб-сайтах, нам потрібно пояснити два поняття; як растрової графіки, так і векторної графіки.
- Растрова графіка: Цей тип графіки складається з пікселів, розташованих у сітці. Кожному пікселю присвоюється певний колір. Якість залежить від роздільної здатності, яка визначається кількістю пікселів на дюйм. Зі збільшенням розміру щільність пікселів зменшується, що впливає на якість зображення. Це означає, що для представлення складних зображень із багатьма деталями, таких як фотографія, потрібні дуже великі файли певного розміру.
- Векторна графіка: Вони побудовані з геометричних об'єктів, виражених математичними формулами. Ці об’єкти можуть бути лініями, фігурами та кривими. Оскільки вони виражені математичними формулами, їхній розмір можна змінювати без втрати якості та чіткості, точно відображаючи деталі.
Растрова графіка найкраще підходить для дуже складних зображень, таких як фотографії або які містять м’яке затінення кольорів і градієнти. Для їх редагування потрібне спеціальне програмне забезпечення для редагування фотографій, наприклад Gimp.
Зі свого боку, Векторна графіка найкраще підходить для ілюстрацій, значків і логотипів. Хоча існують такі програми для редагування, як Inkscape, їх також можна створювати та редагувати шляхом написання тексту.
Графіка у форматі SVG (масштабована векторна графіка) В основному вони використовуються на веб-сайтах і вони мають такі характеристики:
- На них резолюція не впливає: Графіка у форматі SVG виглядає однаково чітко на екрані будь-якого розміру, включаючи ті, які використовують технологію дуже високої роздільної здатності.
- Це векторна графіка: Як ми вже пояснювали, цей тип графіки базується на представленні геометричних об’єктів, побудованих на основі математичних формул. Зміна розміру просто застосовує формулу до нових значень.
- менший розмір: Формат SVG не потребує збереження інформації для кожного пікселя. Математичні формули для їх побудови зберігаються в текстовому файлі у стисненому форматі XML.
- Видання: Як і будь-яка векторна графіка, формат SVG можна змінювати за допомогою спеціального програмного забезпечення або текстового редактора.
- Інтерактивність: такі типи графіки можна анімувати або створювати у відповідь на інструкції користувача за допомогою коду CSS або Javascript.
- сумісність: більшість пристроїв мають браузери, які підтримують цей графічний формат.
Ми сказали, що графіку SVG можна створити за допомогою текстового редактора. Відкрийте текстовий редактор дистрибутива та вставте такий код:
<svg width="200" height="200">
<rect width="100%" height="100%" fill="white" />
<circle cx="50%" cy="50%" r="50" fill="green" />
<text x="50%" y="50%" text-anchor="middle" fill="white">Ubunlog</text>
</svg>
Тепер збережіть його під назвою circle.svg. Якщо ви заглянете у свій файловий менеджер, ви побачите мініатюру зеленого кола, а якщо ви відкриєте його за допомогою програми перегляду зображень, ви побачите його в повному розмірі.
Де:
<svg width="200" height="200">
Встановіть ширину та висоту на 200 пікселів.
<rect width="100%" height="100%" fill="white" />
Встановлює, що фоном буде білий квадрат, який займатиме всю ширину та висоту зображення.
<circle cx="50%" cy="50%" r="50" fill="green" />
Помістіть коло в середину зображення, призначте йому радіус 50 пікселів і вкажіть, що колір буде зеленим.
<text x="50%" y="50%" text-anchor="middle" fill="white">Ubunlog</text>
Помістіть слово Ubunlog точно в центрі кола.
У наступній статті ми побачимо графічні редактори для цього формату.