Можно ли воссоздать этот размытый градиент в SVG?
SVG градиентная реализация
Ответы:
И да и нет.
В 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, скажет что-то точное.
Вы можете напрямую включить код здесь с правильным форматированием кода. Не нужно размещать скриншот.
—
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
Это не вектор, но она также может быть, так как размер файла сверхмалых и масштаб изображения бесконечно.
Добро пожаловать в GDSE - glaf, что ты здесь! Пожалуйста , посмотрите вокруг тура и получить представление о том , как мы хотели бы спросить , как Спросите и ответить Как отвечать на вопросы. Это , вероятно, хорошая идея , чтобы посмотреть на общие коды поведения тоже в то время как вы смотрите круглый справочный центр Ваш ответ хороший ответ с точки зрения применимости , что вы совместно, но здесь GDSE мы предпочитаем использовать ссылки только для справки или связывать ресурсы, поскольку ссылки меняются или исчезают слишком легко: не могли бы вы кратко изложить содержание, к которому вы привязываете, в теле ответа?
—
GerardFalla