SVGCSS перетворення, Kortic

Порада: бачачи, як проходять деякі досить великі файли, настійно рекомендуємо перед перетворенням джерел перевірити, що ваш файл не містить коду типу даних: img/png; base64. У цьому випадку ваше зображення не є векторним ... Про спільний доступ: для «спільного використання» надіслані файли зберігаються анонімно та доступні кожному. Якщо ви не хочете, щоб ваш файл був доступним, ви можете подати запит на його видалення тут.

kortic

Ми говоримо про це на UX Planet

Перетворення SVG

Як це працює ?

Інтеграція піктограм та інших логотипів на веб-сайті здійснюється різними способами: svg inline, img тощо ... Для інтеграції за допомогою CSS ми можемо також зробити це за допомогою base64, що кодує вміст SVG на шкоду зайвій вазі близько 30 %.

А для великих обсягів SVG і трохи більшої продуктивності в Інтернеті, ще один варіант (піти) на крок далі

Приклад

Цей код відображатиме оранжеву піктограму "+". Після кодування XML надасть рядок символів, що використовується, у фоновому зображенні CSS, що дасть:

Масові приклади

Експортуйте "чисті" SVG

Нижче наведено код SVG, який був переданий конвертеру.

Цей код є відносно чистим, але його можна легко оптимізувати. Таким чином, SVG має вагу 1673 байт. Але при детальному розгляді є ознаки, без яких ми можемо обійтися, не завдаючи шкоди графічному результату.

Ви можете видалити атрибути розміру width = "35" height = "35" та форматування fill = "none" .
Щоб зробити його ще цікавішим, ми додаємо viewBox = "0 0 35 35". І хоп, дуже чуйний SVG! Але це ще не все ... Шлях SVG визначає заливку = "# 000" .
По суті, це не проблема, але марно. Шлях без поняття вказаного кольору є чорним, незважаючи ні на що. Хоп-хоп, ми теж знімаємо, ця дівчина .
Гаразд, але що тоді? Добре, ми відкриваємо наш Illustrator і експортуємо цей файл, але трохи налаштувавши параметри.

Виберіть меню “Файл› Експорт ... ›Експорт для екранів” (використання комбінації клавіш мені здається корисним).

У цьому діалоговому вікні виберіть циферблат параметрів у "Форматі".
У вікні конфігурації пропонуються різні параметри для кожного можливого формату експорту. У частині SVG вкажіть параметри, як показано нижче.
Ця конфігурація дозволяє експортувати оптимізовані SVG в кращому випадку.

Після експортування файлу є останній крок: перегляньте код у вибраній вами IDE.
Для обробленого тут файлу ми отримуємо код, який тепер виглядає так.

Як би там не було, ми все ще маємо той самий візуальний, але в чуйній і набагато легшій версії (922 байти).
Залишається лише видалити (чи ні) зразок-очистити і вуаля.

Там я чую сварливі люди в задній частині класу, які кажуть: "- Гей, твоя річ чорна!" Я хочу це в кольорі! ". Але, звичайно, ми зробимо це у кольорі, прочитавши невеликий підручник з SVG ... І це все !

  • Lazy Load Intersection Observer Lazy Load з IntersectionObserver API для зображень, зображень, iframe тощо. Ледаче завантаження вмісту, ліниве завантаження вмісту веб-сторінки, сценарій лінивого завантаження
  • Перевірте номер банківської картки Перевірка банківської картки, сценарій перевірки банківської картки. Контроль формату номера кредитної картки, алгоритм Луна Visa, Mastercard, Maestro, CB, Carte Bancaire, Discover Card, American Express, JCB Cards
  • Адаптивний спливаючий інтерфейс Будівництво адаптивного, прокручуваного “модального” спливаючого вікна, адаптованого до різних браузерів, зокрема Safari iOS. Вміст забезпечується статичною розміткою або запитом ajax.
  • Карусель сови декілька Керуйте кількома каруселями/повзунками на одній сторінці за допомогою каруселі Сова 2. Керуйте кількома каруселями/повзунками на одній сторінці за допомогою Сова каруселі 2
  • Перетворення SVG/CSS Кодування SVG для сумісного з CSS Sass, кодер SVG, SV64 base64 для CSS. SVG в base64, перетворення SVG в URI даних для css
  • Оптимізація SVG Інтеграція SVG за допомогою xlink/use/symbol, факторизація символів SVG, оптимізація веб-продуктивності SVG
  • SVG Адаптивне використання внутрішніх запитів мультимедійних SVG
  • Дизайн, потік та доступність jQuery Адаптивний макет логічного модуля DOM
  • Адаптивні лайтбокси та доступні лайтбокси зображення jQuery Адаптивний доступний a11y. Автоматизація багатосторінкового лайтбокса. Лайтбокс з одним або декількома зображеннями. Чуйний та доступний лайтбокс a11y wcag
  • Підказка a11y Підказка a11y та сумісна з SEO, навігація за допомогою клавіатури, доступна за допомогою зчитувача з екрана. Доступна підказка, доступна підказка
  • Скрипт перевірки поштового індексу Міжнародний скрипт перевірки поштового індексу. Поштовий індекс, валідатор поштового індексу. Під час введення перевіряйте поштовий індекс, контроль поштового індексу JavaScript
  • Віджет календаря PHP Побудова віджета "календар" у PHP та асинхронний
  • Адаптивний плагін jQuery для адаптивного фонового зображення, плагін для фонових зображень, що реагує на jQuery
  • Прапори ISO 3366 SVG Національні векторні прапори ISO alpha 2, alpha 3 та нумерація Організація Об'єднаних Націй (ООН). Прапори SVG для інтернаціоналізації багатомовних сайтів.
  • Смішний макет Ще один підхід до визначення адаптивного макета сторінки.
  • Сервер зображень заповнювачів Сервер зображень заповнювачів для інтерфейсної розробки
  • Генератор імен API для генерації випадкових пар імен/прізвищ.
  • API генератора зображень TTF для генерації тексту в зображення.

Чи справді важливо надрукувати веб-сторінку?
Будь ласка, збережіть дерево та збережіть забруднюючу фарбу.
Дякую ...