Как я могу проанализировать это изображение SVG, загруженное из Интернета?

Пока я просматривал некоторые дизайны некоторых веб-сайтов, я наткнулся на красивый фон SVG:

https://www.algolia.com/lp/img/hero/hero-magento.svg

Я хотел проверить его, поэтому я скачал его. Ни в коем случае не хочу использовать его в своих работах. Я хотел бы только посмотреть, как это делается технически, поэтому, возможно, я смогу использовать ту же технику.

Однако, как только я открыл его в Inkscape, я не вижу оригинальное изображение, а просто синий фон:

введите описание изображения здесь

Почему появляется синий фон, когда я открываю его в Inkscape? Как я могу просмотреть его так, как я вижу его в браузере? Есть ли какая-то защита, о которой я не знаю? Если да, то как это работает? (может быть, я смогу использовать его и для своих собственных файлов SVG...)

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

Убедитесь, что у вас установлена ​​последняя версия InkScape.
Я сейчас проверю, правильно ли вы видите это на своем Inkscape?

Ответы (2)

Я мог бы сделать шаблон видимым следующим образом:

  • Я загрузил svg в Inkscape 0.92.4 и увидел только темно-синий фон.
  • Я установил вид Outline. Это сделало формы видимыми.
  • Inkscape сказал, что рисунок представляет собой группу из двух объектов, поэтому я выделил все и разгруппировал.
  • Inkscape сказал, что неправильные формы представляют собой группу из 5 объектов, замаскированных в корне.
  • Я снял маску и разгруппировал.
  • Правильная форма была явно впереди неправильных, поэтому я отправил ее на задний план.

И теперь все было хорошо.

Спасибо за ваше объяснение. Это сработало!

Анализ файлов SVG

Файлы SVG, наконец, представляют собой обычный текст. Человек с программным мышлением и знаниями может прочесть, например. с текстовым редактором. Я пропускаю это.

Анализ кода SVG и знание того, как различные прикладные программы интерпретируют код, — единственный способ понять его правильно. Проверка дерева структуры слоев и объектов в графической программе не является первичной информацией, она уже один раз интерпретируется.

Inkscape, Affinity Designer и Illustrator по-разному представляли ваш файл на своих панелях слоев и объектов. Они также представили это по-разному. Inkscape сделал только темный искаженный прямоугольник, как на вашем скриншоте, другие также показывают некоторые синие фигуры, но по-другому.

Проверьте это на панели объектов Inkcape. Имеет неясную группировку. Удалите его с помощью «Расширение»> «Упорядочить глубокую разгруппировку». Желаемая окраска становится видимой, но обтравочная маска исчезает.

После разгруппировки ваше изображение содержит частично прозрачные пути с градиентной заливкой и путь со сплошной заливкой.

Структура кажется простой, но градиентная заливка каким-то образом привязана к исходному размещению группы, она не перемещается при перемещении форм с градиентной заливкой. Переопределение градиента в Inkscape исправляет это. Разгруппировка не исправила изображение должным образом.

Бьюсь об заклад, вы нашли что-то, что неоднозначно определено в спецификациях SVG. Это всего лишь догадка непрограммиста.

Как я могу проанализировать это изображение SVG, загруженное из Интернета?
СпросиСетьПолитика конфиденциальности1y, 0v