Illustrator SVG для Интернета с использованием CSS для предоставления цвета для различных сценариев.

Не GD или веб-разработчик. Я в маркетинге с ограниченными навыками в обеих областях. Мы работаем с веб-разработчиками (а не с оригинальными дизайнерами сайтов). С трудом в этом разбираюсь.

Мы добавляем дополнительную иконку на наш сайт, и мне интересно, есть ли определенные настройки при сохранении SVG.

Значок должен наследовать свой цвет от CSS, поэтому есть ли особый способ сохранить SVG, чтобы CSS мог легко изменять цвет в разных сценариях?

Кроме того, я хотел бы, чтобы значок хорошо вписывался в контейнер размером 61 пиксель, 61 пиксель (он отзывчив и сжимается на меньших размерах экрана), и я читал, что вы можете изменить ширину и высоту до 100%, но возможно ли это сделать что при сохранении SVG? Когда мы отправили связанный файл ниже, он по какой-то причине оказался очень маленьким, например, 1 на 1 пиксель.

И имеет ли значение размер холста при сохранении SVG, когда он будет изменен, чтобы соответствовать контейнеру?

SVG-файл

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

Привет Майк, добро пожаловать в GDSE и спасибо за ваш вопрос. Если вы хотите узнать больше о сайте, посетите справочный центр или свяжитесь с одним из нас в чате графического дизайна , как только ваша репутация станет достаточной (20). Продолжайте вносить свой вклад и наслаждайтесь сайтом!

Ответы (1)

Изменение цвета заливки svg с помощью CSS возможно, в зависимости от вашего формата .svg.

svg path { fill: #ffffff; }

В прошлом мне удалось изменить цвет заливки .svg. Я добавил, !importantчтобы убедиться, что все работает.

Файлы .svg имеют раздражающее качество отображения в размере 1x1 px, если вы не укажете размер с помощью CSS. Установка a min-widthздесь является хорошей идеей.

Чтобы подготовить .svg, вы должны сделать его максимально простым. Я предлагаю использовать оптимизатор .svg, вы можете найти несколько здесь .

Спасибо за ответ Винсент. Если вы посмотрите на связанный SVG, который я предоставил, должен ли я сделать пути для вопросительного знака (как верхнюю, так и нижнюю часть) прозрачными, чтобы он правильно наследовал уже существующий CSS?
Кроме того, как указать размер в Illustrator? Размер холста 61px на 61px.
Я не думаю, что это необходимо. Я использовал .svg с существующим цветом и использовал css, чтобы переопределить его. Ах, я имел в виду указание размера с помощью css. Я отредактирую это.
Таким образом, проблема заключается в том, что белый цвет внутри черной обводки вопросительного знака заполняется CSS, а не черная обводка. Другие значки, штрих - это то, что меняется и не имеет проблем.
А, я вижу проблему. Разве вы не можете схитрить, если форма черной обводки не будет формой с отверстием, а будет формой, которая перекрывает сама себя? Извините, на мобильном банкомате и не могу объяснить лучше.