Как масштабировать размеры иконок svg
При размерах 256 пикселей размер svg иконки не 256 пикселей , а где-то ~140
При указании 128 , тоже не 128 и т.д. Почему так происходит?
Я уже перечитал все эти мануалы, в примерах их иконки все нормально отображаются с размерами, а почему эта не работает как надо?!
Отслеживать
109k 23 23 золотых знака 112 112 серебряных знаков 374 374 бронзовых знака
задан 12 мар 2018 в 9:44
397 2 2 серебряных знака 18 18 бронзовых знаков
1 ответ 1
Сортировка: Сброс на вариант по умолчанию
Масштаб определяется соотношением viewport / viewBox , где viewport это width=»X» height=»Y»
В вашем примере масштабирование применяется последовательно несколько раз.
Очень легко запутаться. Поэтому я максимально упрощу ваш пример и поэтапно буду усложнять до практического применения
- Ниже пример, где применяется масштабирование только один раз в шапке svg файла
viewport / viewBox = 100/100=1. Масштаб будет — 1:1 То есть как нарисовано в векторном редакторе, так и будет отражаться на дисплее
На скрине векторного редактора видно, что физически иконка имеет габариты — 56.6 х 56.6px
- Теперь запускаем этот же файл в браузере. И для наглядности я добавил красный прямоугольник, через стили в шапке файла, который показывает границы SVG файла. style=»border:1px solid red;»
Границы svg определяет viewport это — width=»100″ height=»100″
Из примеров видно, что иконка 56 х 56px не полностью занимает viewport — 100 х 100px
Это очень плохо, так как эти свободные пространства добавляют отступы от других элементов верстки HTML
Убираем лишние отступы
- Для этого уменьшаем viewport до размеров иконки
width=»56″ height=»56″ viewBox=»0 0 58 58″
Смотрим результаты в векторном редакторе и в браузере:
Пример в браузере
Масштабирование иконок до требуемых размеров
Размер 256 x 256px
Для этого увеличиваем размер viewport до требуемых размеров
- Проверяем в векторном редакторе
- Проверяем в браузере
Размер 128 x 128px
- проверяем в векторном редакторе
Делаем рабочую версию приложения
Основное правило последовательных масштабирований в одном файле SVG
В шапке файла SVG задается самый большой viewport — это прямоугольная область, которую видит пользователь на экране. Если задали width=»256″ height=»256″ , то последующие масштабирования, которые идут в коде ниже могут только уменьшать размер этой области.
Пример с 3 иконками 256×256; 128×128; 64×64
.alignlef < display: inline; float: left; margin-right: 1.625em; >path
Как изменять цвет svg иконки?
Есть svg иконки, требуется изменить цвет при наведении, как это делается? Натыкался на и другие связанные с ним теги, но понятной статьи по ним не нашел.
- Вопрос задан более трёх лет назад
- 55064 просмотра
Комментировать
Решения вопроса 1
Ответ написан более трёх лет назад
Нравится 5 8 комментариев
Neyury @Neyury Автор вопроса
Можете разъяснить пример? Я так понимаю из svg файла я вытаскиваю и ? нужен ли где то сам файл при этом как то подключать или где то хранить?
Neyury @Neyury Автор вопроса
И где можно почитать побольше о этих тегах и их атрибутах?
SVG можно размещать как inline-кодом (т.е. SVG-код прямо в дерево HTML), так и как обычное изображение. Первый случай в примере, который я нагуглил. При этом вам доступна возможность управлять стилями SVG-элементов через CSS (Да, там другие свойства, а некоторые просто иначе называются). Кроме того, можно работать и javascript-ом с элементами SVG.
А во втором случае вы получаете просто изображение. И тут для hover вам уже надо делать по-старинке — спрайтами в бэкграунде, например.
Neyury: Если используете первый вариант, то файл как таковой перестаёт существовать. Его SVG-код встраивается в HTML.
Разумеется, когда мы рассматриваем второй случай (вставка в качестве img src или background какого-то html-элемента), то можно использовать еще и data-url:
jsfiddle.net/6WAtQ
Но всё это не дает доступа к SVG.
Есть более сложный (возможно, слабо кроссбраузерный) способ. Использовать для внедрения теги object и т.п. Тогда файл svg будет отдельно и доступ к нему будет некоторым способом.
См.: stackoverflow.com/questions/8102528/how-do-you-acc.
Но, думаю, того не стоит.
Neyury @Neyury Автор вопроса
Павел Китьян: Я попробовал разные способы подключения svg, пока самый подходящий вариант, это писать inline-кодом. Но это слишком загромождает html код, как вариант можно вставлять этот код при загрузке страницы с помощью js.
Но я хочу попробовать другой вариант, можно вставить svg через object и прописать в самом файле (внутри тега ), это работает но не очень удобно, так же пишут что можно не писать style, а подключить файл.css (тоже в файле svg), но у меня это не получается. Вы случаем не знаете как это сделать? Заранее спасибо.
Neyury: Разумеется, можно подключить стили CSS-файлом. А вот насчёт включения их в сам SVG — есть сомнения, но категорически «нет» не скажу, надо смотреть стандарт.
Если не нравится загромождение кода, то можно пользоваться инклюдами. Либо серверными, либо клиентскими. Зависит от того, какие фреймворки и шаблонизаторы используете.
Например в случае использования ангуляра, наверное можно использовать ng-include и убить сразу двух зайцев. У вас будут отдельные мальенькие HTML-файлы (не полноценные, только с кучком DOM, содержащим SVG-вставку). А при сборке странице, ангуляр сам распихает эти вставки в дерево и к ним применятся стили из CSS-файла, который прописан для главной HTML-страницы.
Возможно, опытные ангулярщики возразят. Не претендую, поскольку недавно за него взялся.
Neyury @Neyury Автор вопроса
Павел Китьян: Нашел как подключить файл стилей в файл svg. Нужно написать в файле перед открывающим тегом это , затем задаем тегу path класс или id, и можно прописывать какие нужно стили. Правда таким образом у меня получилось воздействовать только на саму иконку, т.е class:hover #svg-icon < стили >не вышло.
Alex Ivanov @Alex_vs_Predator
Neyury, вот кодировка со style внутри.
я правда еще не пробовал всё менять.
но как пример надеюсь поможет
Изменение размера SVG изображений
Измените размер SVG изображений с помощью современного браузера, такого как Chrome, Opera и Firefox.
При поддержке aspose.com и aspose.cloud
Выбрать язык
* Загружая файлы или используя наш сервис, вы соглашаетесь с нашими Условиями предоставления услуг и Политикой конфиденциальности
Ваши файлы были успешно обработаны ЗАГРУЗИТЬ
Сохранить в облачное хранилище:
или продолжить редактирование в другом приложении:
Распознавание
(максимум 1 файл)
Кадрирование
(максимум 10 файлов)
Поворот и отражение
(максимум 10 файлов)
Выравнивание
(максимум 10 файлов)
Удаление фона
(максимум 10 файлов)
Создание анимации
(максимум 100 файлов)
Другие приложения.
Отправьте ссылку для скачивания на
Нажмите Ctrl + D чтобы сохранить его в закладках, чтобы не искать его снова
Сохранять пропорции
Поделиться в Facebook
Поделиться в Twitter
Поделиться в LinkedIn
Другие приложения
Оставить отзыв
Добавить в закладки
Добавить в закладки
Нажмите Ctrl + D, чтобы добавить эту страницу в избранное, или Esc чтобы отменить действие
Отправьте нам свой отзыв
Aspose.Imaging Изменение размера
Интегрируйте функцию изменения размера SVG в свои собственные проекты
- Высокопроизводительное изменение размера изображения с помощью собственных API-интерфейсов
- Интегрируйте функцию изменения размера изображения в свой проект/решение
- 100% приватные локальные API-интерфейсы. Ваши файлы обрабатываются на ваших собственных серверах
- Кроссплатформенное развертывание
Для Java-разработчиков мы предлагаем собственный Aspose.Imaging for Java API для использования в ваших Java-приложениях. Пожалуйста, посетите страницу https://products.aspose.com/imaging/ru/java/resize/svg/ чтобы попробовать.
Как изменить размер SVG изображения с помощью Aspose.Imaging Изменение размера
- Кликните внутри области перетаскивания файла, чтобы загрузить SVG файл, или перетащите туда SVG файл.
- Вы можете загрузить максимум 10 файлов для операции
- Введите желаемый размер для вашего изображения SVG
- При необходимости измените тип масштабирования и формат получаемого изображения.
- Ссылка для скачивания обработанных изображений будет доступна сразу после завершения операции.
- Вы также можете отправить ссылку на готовый файл на свой адрес электронной почты
- Обратите внимание, что файл будет удален с наших серверов через 24 часа, а ссылки для скачивания перестанут работать по истечении этого периода времени.
Часто задаваемые вопросы
❓ Как изменить размер SVG файла?
Во-первых, вам нужно добавить файл для изменения размера SVG: перетащите файл или кликните внутри панели, чтобы выбрать файл. Затем нажмите кнопку «Изменить размер». После завершения процесса обработки можно загрузить готовый файл.
️ Безопасно ли изменять размер изображений с помощью бесплатного приложения Aspose.Imaging «Изменение размера»?
Да, ссылка для загрузки файлов результатов будет доступна мгновенно после завершения операции. Мы удаляем загруженные файлы через 24 часа, и ссылки на скачивание перестанут работать по истечении этого периода времени. Никто не имеет доступа к вашим файлам. Изменение размера изображения абсолютно безопасно.
Когда пользователь загружает свои файлы из сторонних сервисов, они обрабатываются таким же образом.
Единственное исключение из вышеуказанных политик возможно, когда пользователь решает поделиться своими файлами через форум, запросив бесплатную поддержку, в этом случае только наши разработчики имеют доступ к ним для анализа и решения проблемы.
Можно ли изменить размер изображений на Linux, Mac OS или Android?
Да, вы можете использовать бесплатное приложение Aspose.Imaging «Изменить размер» на любой операционной системе с веб-браузером. Наш сервис работает онлайн и не требует установки программного обеспечения.
Какой браузер следует использовать для изменения размера?
Для изменения размера вы можете использовать любой современный браузер, например, Google Chrome, Firefox, Opera, Safari.
❓ Могу ли я использовать полученное изображение в коммерческих целях?
Несмотря на то, что наши приложения бесплатны, вы не ограничены в коммерческом использовании полученных изображений, избегая при этом нарушения прав третьих лиц на исходные изображения. Например, вы можете создать NFT (не взаимозаменяемый токен) из своего изображения и попытаться продать его на торговых площадках NFT.
Другие поддерживаемые форматы
- Изменение размера JPG Изменение размера JPG с высоким качеством вывода онлайн
- Изменение размера JPEG Изменение размера JPEG с высоким качеством вывода онлайн
- Изменение размера JP2 Изменение размера JP2 с высоким качеством вывода онлайн
- Изменение размера J2K Изменение размера J2K с высоким качеством вывода онлайн
- Изменение размера JPEG2000 Изменение размера JPEG2000 с высоким качеством вывода онлайн
- Изменение размера BMP Изменение размера BMP с высоким качеством вывода онлайн
- Изменение размера DIB Изменение размера DIB с высоким качеством вывода онлайн
- Изменение размера TIFF Изменение размера TIFF с высоким качеством вывода онлайн
- Изменение размера TIF Изменение размера TIF с высоким качеством вывода онлайн
- Изменение размера GIF Изменение размера GIF с высоким качеством вывода онлайн
- Изменение размера PNG Изменение размера PNG с высоким качеством вывода онлайн
- Изменение размера APNG Изменение размера APNG с высоким качеством вывода онлайн
- Изменение размера TGA Изменение размера TGA с высоким качеством вывода онлайн
- Изменение размера EMF Изменение размера EMF с высоким качеством вывода онлайн
- Изменение размера EMZ Изменение размера EMZ с высоким качеством вывода онлайн
- Изменение размера WMF Изменение размера WMF с высоким качеством вывода онлайн
- Изменение размера WMZ Изменение размера WMZ с высоким качеством вывода онлайн
- Изменение размера WEBP Изменение размера WEBP с высоким качеством вывода онлайн
- Изменение размера SVG Изменение размера SVG с высоким качеством вывода онлайн
- Изменение размера SVGZ Изменение размера SVGZ с высоким качеством вывода онлайн
- Изменение размера DICOM Изменение размера DICOM с высоким качеством вывода онлайн
- Изменение размера DCM Изменение размера DCM с высоким качеством вывода онлайн
- Изменение размера DJVU Изменение размера DJVU с высоким качеством вывода онлайн
- Изменение размера DNG Изменение размера DNG с высоким качеством вывода онлайн
- Изменение размера ODG Изменение размера ODG с высоким качеством вывода онлайн
- Изменение размера OTG Изменение размера OTG с высоким качеством вывода онлайн
- Изменение размера EPS Изменение размера EPS с высоким качеством вывода онлайн
- Изменение размера CDR Изменение размера CDR с высоким качеством вывода онлайн
- Изменение размера CMX Изменение размера CMX с высоким качеством вывода онлайн
Как уменьшить размер иконки в svg через css?
Сам долго бился с SVG и нашёл самый действенный и безотказный метод:
transform: scale();
в ту сторону, какую вам нужно, всё работает.
Отслеживать
51.6k 200 200 золотых знаков 61 61 серебряный знак 242 242 бронзовых знака
ответ дан 22 авг 2019 в 8:38
21 3 3 бронзовых знака
svg в content ведет себя очень странно, я с ним так и не смог совладать. Перенесите его в background
.dropdown-item:nth-of-type(3)::after < content: ""; background: url(../img/icon-bootstrap4.svg) no-repeat center; background-size: contain; width: 30px; height: 30px; margin-left: 10px; >
Отслеживать
ответ дан 1 ноя 2018 в 18:28
Nikita Umnov Nikita Umnov
1,763 8 8 серебряных знаков 18 18 бронзовых знаков
- html
- css
- css3
- html5
-
Важное на Мете
Похожие
Подписаться на ленту
Лента вопроса
Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.
Дизайн сайта / логотип © 2023 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2023.11.15.1019
Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.