SVG градиентная реализация

Можно ли воссоздать этот размытый градиент в SVG?

svg gradient Джаред Гарсия
источник

Ответы:

И да и нет.

В Inkscape можно создать градиентную сетку и сохранить ее как SVG. Однако стандарты SVG, используемые в браузерах, пока не поддерживают градиентные сетки. Это может измениться в будущем, но в настоящее время нет.

Другой метод, который работает в браузерах, - это добавить несколько твердых объектов, размыть их и поместить в обтравочную маску. Это все еще чисто векторное решение, оно не растеризовано.

Вот SVG для версии, которая работает в браузерах, если вы этого хотите.

Изменить : приведенная выше ссылка на SVG больше не доступна, поэтому я удалил ее.

Билли Керр
источник

Это классно! SVG в ссылке не похож на вставку, указанную в вашем ответе, но выглядит намного легче. Есть причина для этого?

Джаред Гарсия

@JaredGarcia Я понятия не имею, почему - мой снимок экрана точно соответствует SVG на моем компьютере в Inkscape, - но убедитесь, что вы используете самую последнюю версию Inkscape - теперь в версии 0.92

Билли Керр,

Ах, я просматривал его в браузере на своем мобильном телефоне прямо по этой ссылке для скачивания. Я открою его в Inkscape и проверю.

Джаред Гарсия

@JaredGarcia опубликуйте это как новый вопрос, чтобы на него можно было правильно ответить.

Эндрю Т.

Размытие в браузерах действительно дорого. Вы можете получить тот же эффект, наложив фоновые градиенты. Это даже анимация. И вы можете использовать background-blend-mode для дополнительного эффекта в современных браузерах.

PieBie

Это можно сделать в Illustrator и Inkscape в качестве градиентной сетки. При сохранении в формате SVG в унаследованном Illustrator оно преобразуется в растровое изображение. Очевидно, Illustator знал об этом около 6 лет назад, а язык SVG - нет.

При сохранении в Inkscape как обычный SVG, а не как Inkscape SVG, он оставался в виде градиентной сетки, и открытие файла SVG с помощью текстового редактора показало, что есть команда meshgradient. Смотрите фрагмент кода

Поэтому, не зная стандартов, я могу сказать: «По крайней мере, это реализовано в простом SVG Inkscape».

Надеюсь, кто-то, знающий о статусе разработки SVG, скажет что-то точное.

user287001
источник

Вы можете напрямую включить код здесь с правильным форматированием кода. Не нужно размещать скриншот.

Wrzlprmft

К сожалению, градиентные сетки Inkscape пока не поддерживаются ни в Google Chrome, ни в Firefox.

Билли Керр

Можете ли вы опубликовать код SVG

Джаред Гарсия

@JaredGarcia У меня нет этого. Я заполнил только 10 узлов 25 , чтобы увидеть , что она дает правильный взгляд. Вы можете сделать это самостоятельно. Импортируйте изображение в Inkscape, сделайте квадрат одинакового размера, установите его тип заливки = градиентная сетка, добавьте еще 3 строки и столбца с помощью инструмента «Сетка», с помощью инструмента «Узел» выберите один за другим узлы, а с помощью палитры цветов возьмите цвет из импортированного изображения. Сохраните как обычный SVG, откройте в Win Notepad, чтобы увидеть код.

user287001

Если ваша цель - получить легкий масштабируемый градиент сетки, вы можете попробовать этот метод:

https://peterhrynkow.com/performance/2019/01/13/blowing-up-images-to-make-them-small.html

Это не вектор, но она также может быть, так как размер файла сверхмалых и масштаб изображения бесконечно.

peterhry
источник

Добро пожаловать в GDSE - glaf, что ты здесь! Пожалуйста , посмотрите вокруг тура и получить представление о том , как мы хотели бы спросить , как Спросите и ответить Как отвечать на вопросы. Это , вероятно, хорошая идея , чтобы посмотреть на общие коды поведения тоже в то время как вы смотрите круглый справочный центр Ваш ответ хороший ответ с точки зрения применимости , что вы совместно, но здесь GDSE мы предпочитаем использовать ссылки только для справки или связывать ресурсы, поскольку ссылки меняются или исчезают слишком легко: не могли бы вы кратко изложить содержание, к которому вы привязываете, в теле ответа?

GerardFalla