Як відкрити SVG-файл: на комп’ютері, телефоні та в браузері

1. Чотири способи відкрити SVG на комп’ютері

• Браузер (найпростіше): перетягніть SVG-файл у вікно Chrome, Edge, Firefox або Safari — і він покажеться; можна також клацнути правою кнопкою по файлу, обрати «Open with» і вибрати браузер;
• Налаштування програми за замовчуванням: якщо ви часто працюєте з SVG, зв’яжіть файли .svg із браузером або графічною програмою, щоб подвійний клік відкривав їх одразу;
• Графічні програми: Illustrator, Figma та безкоштовний Inkscape відкривають і редагують SVG, що підходить для глибшої роботи;
• Редактор коду: SVG — це по суті текст XML, тож у VS Code ви побачите й зможете змінити вихідний код, а це значно полегшує налагодження.

Налаштування програми за замовчуванням: у Windows клацніть правою кнопкою по SVG-файлу, оберіть «Open with → Choose another app» і позначте «Always use this app»; у macOS клацніть правою кнопкою та оберіть «Get Info», у полі «Open with» виберіть браузер і натисніть «Change All», щоб надалі подвійний клік показував перегляд файлу.

2. Як відкрити SVG на телефоні

Android: деякі файлові менеджери не показують SVG напряму — довго натисніть на файл, оберіть «Open with» і виберіть браузер. iPhone: збережіть SVG у застосунку Файли, де новіші системи показують його просто; якщо не видно, поділіться файлом і відкрийте його в Safari. SVG, отримані в WeChat чи QQ, приходять звичайними файлами, і варіант «Open with» із браузером показує їх правильно.

Загалом мобільний браузер — найнадійніший переглядач SVG: не потрібно встановлювати додаткових застосунків. Планшети працюють так само: відкрийте файл у вбудованому браузері, окремий переглядач не потрібен.

3. Що робити, якщо подвійний клік показує код або порожнє вікно?

На екрані стіна коду: файл прив’язаний до Блокнота або іншого текстового редактора. SVG — це текст, тож це нормально: відкрийте його браузером і побачите зображення. Порожнє вікно: спершу перевірте, чи файл цілий. Відкрийте його в редакторі коду: коректний SVG починається з тегу <svg> або з декларації <?xml. Якщо ви бачите <html>, найімовірніше, ви зберегли сторінку помилки як .svg під час завантаження, тож завантажте файл ще раз. Також, якщо файл посилається на зовнішні зображення чи шрифти, відсутні ресурси залишать зображення неповним.

Ще одне зауваження: SVG — текстовий формат, здатний нести скрипти, тож не відкривайте файли з невідомих джерел одразу в браузері. Спершу перегляньте їх у редакторі коду, переконайтеся, що файл починається з тегу svg і не містить підозрілих скриптів, і лише потім переглядайте.

4. Хочете щось змінити після відкриття? Скористайтеся онлайн-редактором

Щоб перефарбувати логотип, прибрати тло чи видалити кілька елементів, не потрібен важкий застосунок. Відкрийте онлайн-редактор SVG від PolySVG (пряме посилання: /editor), завантажте файл — і зможете клацати шляхи, щоб їх видаляти, прибирати тло одним кліком, перефарбовувати, малювати мазком, стирати гумкою, скасовувати й повторювати будь-коли, а потім експортувати в SVG або PNG. Безкоштовно, без встановлення, без реєстрації.

5. Просто подивитися? Найпростіше конвертувати в PNG

Якщо пристрій іншої людини не відкриває SVG, найпростіше рішення — конвертувати в PNG: експортуйте PNG з редактора або зробіть знімок екрана в браузері. Щоб зрозуміти сам формат SVG, прочитайте Що таке SVG; якщо у вас є растр, який хочеться перетворити на SVG, інструмент «Зображення в SVG» зробить це за кілька кроків.

Якщо ви розробник, SVG можна вбудувати прямо в HTML або підключити тегом img, і браузер покаже його миттєво — це найпоширеніший спосіб переглядати SVG у вебі.