Чи можна відтворити подібний розмитий градієнт у SVG?
Реалізація градієнта SVG
Відповіді:
Так і ні.
Можна створити градієнтну сітку в Inkscape і зберегти її як SVG. Однак стандарти SVG, які використовуються в браузерах, ще не підтримують градієнтні сітки. Це може змінитися в майбутньому, але поки що немає.
Інший метод, який працює в браузерах, полягає в тому, щоб додати кілька твердих об'єктів, розмити їх і помістити їх у відсічну маску. Це все ще чисте векторне рішення, воно не растеризоване.
Ось SVG для версії, яка працює в браузерах, якщо ви цього хочете.
Редагувати : вищезазначене посилання на SVG більше не доступне, тому я його видалив.
Круто! SVG у посиланні не схоже на вставку, надану у вашій відповіді, однак ... виглядає набагато легше. Якась причина цього?
—
Джаред Гарсія
@JaredGarcia Я не маю поняття, чому - моє захоплення екрана відповідає SVG саме на моєму комп’ютері в Inkscape - але переконайтеся, що ви використовуєте найновішу версію Inkscape - зараз у версії 0.92
—
Біллі Керр
Ах, я переглядав його в браузері на своєму мобільному прямо з цього посилання на завантаження. Я відкрию його в Inkscape і перевіряю.
—
Джаред Гарсія
@JaredGarcia опублікував це натомість як нове запитання, щоб на нього можна було правильно відповісти.
—
Ендрю Т.
Розмивання в браузерах дійсно дорого. Такий же ефект можна отримати, відкладаючи градієнти тла. Вони навіть анімаційні. І ви можете використовувати режим фонового змішування для отримання додаткового ефекту в сучасних браузерах.
—
PieBie
Його можна зробити в Illustrator та Inkscape у вигляді градієнтної сітки. Після збереження у форматі SVG у застарілому Illustrator він перетворюється на растрове зображення. Очевидно, Illustator знав це близько 6 років тому, але мова SVG цього не зробила.
Коли зберігається в Inkscape як звичайний SVG, а не як Inkscape SVG, він залишається градієнтною сіткою та відкриваючи файл SVG за допомогою текстового редактора виявив, що існує команда meshgradient. Дивіться фрагмент коду
Отже, не знаючи стандартів, я можу сказати, що "принаймні реалізовано на простому SVG Inkscape".
Сподіваємось, хтось програміст, який обізнаний про розвиток SVG, підкаже щось точно.
Ви можете безпосередньо включити сюди код за допомогою правильного форматування коду. Не потрібно публікувати скріншот.
—
Wrzlprmft
На жаль, градієнтні сітки Inkscape ще не підтримуються в Google Chrome або Firefox.
—
Біллі Керр
Чи можете ви розмістити код svg
—
Джаред Гарсія
@JaredGarcia У мене цього немає. Я заповнив лише 10 вузлів по 25, щоб побачити, що це дає правильний вигляд. Ви можете зробити це самостійно. Імпортуйте зображення в Inkscape, зробіть квадрат однакового розміру, встановіть його тип заповнення = градієнтна сітка, додайте ще 3 ряди та стовпчики за допомогою інструменту mesh, за допомогою інструмента вузла виберіть один за одним вузли та за допомогою вибору кольору візьміть колір із імпортованого зображення. Збережіть як звичайний SVG, відкрийте у програмі Win Notepad, щоб побачити код.
—
user287001
Якщо ваша мета - мати легкий, масштабований сітчастий градієнт, тоді ви можете спробувати цей метод:
https://peterhrynkow.com/performance/2019/01/13/blowing-up-images-to-make-them-small.html
Це не векторно, але може бути, оскільки розмір файлу дуже малий, а зображення масштабується нескінченно.
Ласкаво просимо на GDSE - glaf, щоб вас тут! Ознайомтесь із екскурсією та зрозумійте, як нам подобається запитувати. Як задавати питання та як відповідати на питання. Це, мабуть, гарна ідея також переглянути загальні коди поведінки, хоча ви шукаєте круглий довідковий центр. Ваша відповідь - це хороша відповідь з точки зору застосунків, якими ви поділилися, але тут, на GDSE, ми вважаємо за краще використовувати посилання лише для ознайомлення. або пов’язати ресурси, оскільки посилання змінюються або зникають занадто легко: чи могли б ви узагальнити вміст, до якого ви пов'язуєте, в тілі свого відповіді, будь ласка?
—
GerardFalla