Как уменьшить svg картинку
Изменить размер нескольких SVG одновременно
Кликните здесь для выбора изображений
или перетащите их сюда
До 50 файлов
Как изменить размер SVG:
Обратите внимание, что выходные файлы будут автоматически удалены с нашего сервера в течение одного часа. Загрузите их на свой компьютер или сохраните на Google Диске или Dropbox. Вы также можете отсканировать QR-код изображения, чтобы мгновенно сохранить преобразованные файлы на ваше мобильное устройство.
Храните ваши файлы в безопасности
Мы гарантируем, что ваши изображения, загруженные на наш сайт, являются надежными и безопасными. После преобразования уникальный URL-адрес становится недействительным через час, а файлы удаляются с нашего сервера в течение часа.
Для начинающих и профессионалов
Вы можете указать полный размер или только высоту или ширину. Сохранить соотношение сторон или нет.
Нет необходимости загружать любое программное обеспечение
Существует огромное количество приложений для отслеживания, мы делаем это без проблем, просто выбираем файл, загружаем его и скачиваем результат!
of tracing applications, we do it without any problems, just select the file, upload it and download the result!
Совершенно бесплатно
Мы предоставляем эту услугу как есть. Это абсолютно бесплатно, но вы можете сделать небольшое пожертвование, если мы сэкономим ваше время.
Скажи нет регистрации
Нам не нужны ваш адрес электронной почты, имя, местонахождение или какие-либо другие личные данные. Мы собираем только данные о безличных посетителях.
Легко использовать
Просто выберите изображения на вашем компьютере или перетащите его, чтобы начать изменять размер. Да, это так просто.
Вопросы и ответы
В: Что я могу сделать с этим сервисом?
Вы можете изменить размер изображения SVG.
Q: Что такое SVG?
SVG (Scalable Vector Graphics) — это масштабируемый язык векторной графики, созданный Консорциумом World Wide Web (W3C) и основанный на формате XML, предназначенный для описания двухмерной векторной и смешанной векторной / растровой графики. Поддерживает как фиксированную, так и анимированную интерактивную графику — или, другими словами, декларативную и скриптовую графику. Это открытый стандарт, который является рекомендацией консорциума W3C. Он разрабатывался с 1999 года. В 2001 году была выпущена версия 1.0, в 2011 году — версия 1.1, которая в настоящее время действует.
В: Зачем мне вообще нужен SVG?
Поскольку формат SVG открыт и рекомендуется для использования, этот формат будет лучшим вариантом при работе с вектором. Вот некоторые из его преимуществ:
В: Что если я получу огромный размер файла SVG, что мне делать дальше?
Обычно огромный размер получается только на фотографических изображениях. Но если размер вам не подходит, прежде всего попробуйте выполнить оптимизацию. Для этого у нас есть отличный сервис: SVG оптимизатор.
Как сжать файлы SVG с помощью лучших онлайн компрессоров SVG
Размещено от Джейн Уинстон Январь 21, 2020 16: 17
«У меня много SVG-файлов довольно большого размера, и мне нужно сделать их меньше, как я могу сжать файлы SVG онлайн? »Если вы создаете веб-сайты, возможно, вы знакомы с файлами SVG. Это не очень распространенный формат изображений, но поддерживается большинством современных веб-браузеров, таких как Google Chrome, Microsoft Internet Explorer и Mozilla Firefox. В этой статье рассказывается, как сжимать большие векторные изображения SVG с помощью онлайн-приложений.
Часть 1: Что такое SVG?
SVG, расшифровывается как Scalable Vector Graphics, представляет собой векторный формат графических изображений на основе XML. Это открытый стандарт, разработанный W3C. Он может хранить интерактивность и анимационный контент, поскольку изображения и поведение определены в тексте XML. Другое преимущество заключается в том, что файлы SVG можно искать, индексировать, создавать сценарии и сжимать с помощью командной строки.
Часть 2: Сжатие файла SVG онлайн
Вы можете создать файл SVG через ваш любимый редактор векторной графики, например, Adobe Illustrator. Однако он не может удалить избыточные коды и сжать файлы SVG. К счастью, вы можете использовать некоторые веб-приложения для этого.
Метод 1: Лучший способ сжать SVG Online
Трудно сжимать изображения SVG, отчасти потому, что он использует код XML для создания визуального контента. Компрессор SVG должен понимать язык программы и удалять бесполезные коды. Apeaksoft бесплатный онлайн-компрессор изображений способен упростить процедуру.
Как сжать SVG изображения онлайн
Шаг 1Загрузить изображения SVG
Если у вас есть несколько больших изображений SVG, которые вы хотите сжать, откройте веб-браузер, скопируйте и вставьте https://www.apeaksoft.com/free-online-image-compressor/ в адресную строку и нажмите Enter ключ, чтобы открыть онлайн компрессор SVG.
Нажмите Добавить изображения кнопка, чтобы вызвать диалог открытия файла. Затем найдите большие файлы SVG с жесткого диска и нажмите кнопку Откройте кнопку, чтобы загрузить их.
Шаг 2Скачать сжатые файлы SVG
После загрузки изображений SVG веб-приложение немедленно начнет их сжатие. Согласно нашим исследованиям, обработка десятков изображений SVG занимает всего несколько секунд. Когда сжатие SVG выполнено, нажмите Скачать все Кнопка, чтобы получить все сжатые изображения SVG на ваш компьютер. Кроме того, вы можете скачать отдельное изображение SVG, нажав Скачать кнопка на каждом файле.
Способ 2: Как сжать SVG с помощью ShrinkMe
Как видно из названия, ShrinkMe может сжимать изображение SVG онлайн бесплатно. Краткий интерфейс позволяет начинающим освоить онлайн-компрессор SVG. К сожалению, он не предоставляет никаких пользовательских опций.
Шаг 1Откройте окно проводника и найдите файл изображения SVG для сжатия в Интернете. Тогда посетите Приложение компрессора SVG в веб-браузере.
Шаг 2Перетащите изображение SVG в пунктирную рамку, чтобы начать загрузку и сжатие в Интернете.
Шаг 3По окончании нажмите Сохраните Кнопка для загрузки сжатого изображения SVG.
Способ 3: Как сжать SVG онлайн с помощью SVGMinify
Шаг 1Перейти на онлайн SVG компрессор в вашем браузере, чтобы открыть его напрямую.
Шаг 2Нажмите кнопку «Выбрать файл», чтобы загрузить файл SVG с жесткого диска. Или скопируйте и вставьте коды файлов SVG в большую коробку.
Шаг 3Сжатие кода SVG онлайн может занять некоторое время. Когда вы увидите страницу результатов, нажмите Скачать получившийся SVG чтобы получить его.
Метод 4: Как сжать изображения SVG через Vecta.io
Если ваш SVG-файл содержит много текста, что делает его очень большим, Vecta может помочь вам сжать SVG-изображение онлайн, удалив ненужные сценарии, события и многое другое.
Шаг 1Откройте веб SVG компрессор приложение в браузере, например Chrome,
Шаг 2Затем перетащите файлы SVG на страницу. Он может обрабатывать до 10 файлов одновременно.
Шаг 3После загрузки веб-приложение начнет сжимать ваши файлы SVG. Затем вы можете сохранить меньшие изображения SVG на свой компьютер.
Часть 3. Часто задаваемые вопросы о сжатии SVG
Вопрос 1: что такое SVGO?
Вопрос 2: лучше ли использовать SVG или PNG?
Вопрос 3: Как мне конвертировать PNG в SVG?
Ответ. Чтобы преобразовать PNG в SVG, вы можете использовать программное обеспечение для настольного компьютера, например Adobe Illustrator, или приложение для онлайн-конвертации, например Convertio.
Теперь вы должны освоить как минимум четыре способа сжатия изображений SVG онлайн без потери качества. Все они имеют уникальные преимущества. Например, SVGMinify может сжимать код файла SVG напрямую. Apeaksoft Free Online Image Compressor, с другой стороны, не только прост в использовании, но и способен одновременно обрабатывать десятки SVG-изображений. Еще предложения или вопросы? Пожалуйста, оставьте сообщение ниже.
Размеры в SVG
Управление размерами — тема важная, и чтобы максимально использовать возможности SVG, нужно хорошо понимать как всё работает.
Вьюпорт
Содержимое SVG-элемента отрисовывается на бесконечном холсте и может быть сколь угодно большого размера, но видимая часть холста соответствует размерам SVG-элемента. Эта область отрисовки называется viewport (вьюпорт).
SVG позволяет управлять как размерами вьюпорта, так и поведением содержимого относительно него: оно может обрезаться или показываться полностью, может растягиваться с потерей пропорций или стараться уместиться целиком, даже если при этом появляются пустые поля. Этим поведением можно управлять с помощью атрибутов.
Если просто вставить SVG на страницу и не задавать ему никакие размеры, он отобразится размером 300px на 150px, что не поместилось — обрежется:
Ширина и высота
Шириной и высотой элемента можно управлять стандартными свойствами width и height :
Их можно задавать как атрибутами, так и в CSS:
Для размеров в пикселях, задаваемых в атрибутах, единицы измерения можно не указывать.
Потаскайте ползунки, и вы увидите, что изменение ширины и высоты влияет только на вьюпорт и не влияет на содержимое, потому что оно отрисовывается на бесконечном холсте, и неизвестно область какого размера нужно ресайзить.
viewBox
Первые два значения — координаты X и Y верхнего левого угла отображаемой области, последние два — ширина и высота. viewBox задаётся только атрибутом.
Попробуйте теперь изменить размеры, и вы увидите, что содержимое отресайзится, чтобы поместиться целиком.
viewBox можно использовать, например, для кадрирования изображения, чтобы показывать не всю картинку, а только какую-то её часть:
Это поведение может стать проблемой: если размеры у иконок задаются в стилях, а они не загрузились — страница может превратиться в парад гигантских SVG-иконок. Чтобы этого не произошло, всегда явно задавайте в атрибутах SVG ширину и высоту, их потом легко переопределить в CSS.
preserveAspectRatio
Например, с помощью значения none можно указать, что сохранять пропорции не нужно:
SVG с viewBox и preserveAspectRatio=’none’ ведёт себя очень похоже на img : при изменении размеров содержимое масштабируется под размеры вьюпорта не сохраняя пропорции.
none будет полезно для резиновых фонов:
Остальные значения preserveAspectRatio состоят из двух частей: первая задаёт выравнивание, вторая — поведение элемента относительно вьюпорта.
Эти значения можно комбинировать в любых сочетаниях, но порядок должен сохраняться: первым всегда идет значение для X, вторым для Y. Значение для Y всегда пишется с большой буквы.
meet — содержимое стремится уместиться целиком (как фон с background-size: contain ) slice — содержимое заполняет собой всю область видимости (как background-size: cover : что не поместилось, обрежется)
Также нужно понимать, что preserveAspectRatio срабатывает, если вьюпорт и вьюбокс имеют разные соотношения сторон. Если соотношения сторон совпадают, и содержимое умещается без полей, preserveAspectRatio работать не будет (в этом случае в нём просто нет необходимости).
Для использования SVG в качестве иконок достаточно viewBox и размеров, но если предполагается делать что-то более сложное, имеет смысл разобраться с единицами измерения и системой координат.
Единицы измерения
Системы координат
В SVG-документе есть две системы координат:
Отсчет системы координат вьюпорта начинается от левого верхнего угла вьюпорта, системы координат содержимого — от левого верхнего края вьюбокса.
По умолчанию система координат содержимого соответствует системе координат вьюпорта, а единицы измерения содержимого — единицам измерения вьюпорта, но при использовании трансформаций или viewBox масштабируется вся система координат с единицами измерения, то есть пиксели из user space больше не равны пикселям из viewport space.
Поизменяйте размеры элемента и посмотрите что происходит с системой координат содержимого (она показана бирюзовым):
Система координат содержимого начинается из точки 0,0, и если вьюпорт и вьюбокс не совпадают, точка отсчета, как и вся система координат содержимого, будет ездить и масштабироватся вместе с вьюбоксом.
Масштабирование единиц измерения хорошо видно на примере обводки: изначально её толщина равна единице, но при изменении размеров видимая толщина обводки будет изменяться вместе с фигурой:
vector-effect можно задавать как атрибутом, так и в CSS.
Также новая система координат создается при добавлении трансформаций:
Внутри трансформируемого элемента будет своя своя система координат, отличная от систем координат вьюпорта и вьюбокса.
Тема может выглядеть сложной, но на самом деле, достаточно немного поиграться с кодом, и всё станет понятно. Для лучшего понимания систем координат, размеров и трансформаций в SVG рекомендую демо Сары Суайдан, а также её статьи:
Масштабирование объекта SVG в HTML
Подскажите, как правильно объявить svg объект, чтобы он занял все свободного пространство экрана и при этом не «вылезал» вниз. Например у меня есть svg:
Auto.html выглядит следующим образом:
Таким образом я получаю страницу, которая представлена на рисунке 1. 
Как видно, не вся svg поместилась на страницу. А хотелось бы получить результат как на второй картинке, т.е. уместить всю svg в область под Untitled так, чтобы вниз страница не прокручивалась. 
2 ответа 2
Масштабирование SVG файла
Ниже код вашего svg файла с измененной шапкой, как написано выше:
Здесь в сниппете не видно, но если вы откроете этот файл локально на своем ПК, то будет заметно, что svg занимает весь экран без полос прокрутки.
Но изображение не прижато к левому углу дисплея. Это происходит, из-за того, что задан квадрат 1088х1088, а окно браузера прямоугольное.
Оптимизация кода SVG
Команда rotate(0,32,32) лишняя, какой смысл поворачивать прямоугольник на нулевой угол?
от команды transform=»translate(X Y)» тоже можно освободиться
Ниже полный код вашего примера
за позиционирование элементов отвечают координаты X Y команды
Добавление SVG в HTML
Пока вы не набрались опыта работы с SVG, лучше использовать инлайн добавление в HTML.
Для этого оборачиваем svg код в
Изменяя проценты ширины и высоты контейнера svg, вы можете получить любые размеры. Приложение будет адаптивно и работает во всех браузерах.
Оптимизация SVG для Веб
Дата публикации: 2020-02-28
От автора: оптимизация SVG (масштабируемой векторной графики) для веб-проектов имеет два преимущества: уменьшение размера файла и упрощение работы с ним. Но много раз я открывала веб-проект и обнаруживала, что ресурсы SVG можно сделать значительно меньше с помощью простых оптимизаций. В этой статье я расскажу о своем процессе оптимизации ресурсов SVG. Это может помочь вам, если вы дизайнер или разработчик, не знакомый с работой с SVG в Веб.
Многие библиотеки иконок предоставляют ресурсы SVG, которые уже хорошо оптимизированы. Но если вы создаете собственную графику или она предоставлена другим дизайнером, вы можете сделать это с помощью нескольких шагов. В основном я использую для создания и редактирования SVG Adobe Illustrator. Вот довольно простая иконка, созданная в Illustrator:
Мы можем сохранить ее, перейдя «Файл»> «Сохранить как» и выбрав опцию «SVG». Однако, если мы посмотрим на код сохраненного SVG, то увидим, что он довольно раздутый. Код содержит много ненужных данных — группы, которые можно свернуть, пути, которые можно объединить, метаданные, созданные самой программой, и многое другое:
JavaScript. Быстрый старт
Изучите основы JavaScript на практическом примере по созданию веб-приложения
У каждой графической программы свой собственный способ сохранения SVG, но независимо от того, которую из них вы используете, код все равно может содержать много дополнительных данных, если их не оптимизировать. Давайте рассмотрим некоторые способы решения этой проблемы.
Запуск пакета
SVGO — это пакет NPM, который запускает процесс оптимизации SVG-ресурсов во время сборки, и это хорошая идея использовать что-то подобное в рабочем процессе. Но визуальный инструмент часто лучше удаляет лишние пути и группы и позволяет нам настраивать (и просматривать) параметры оптимизации в зависимости от того, какой результат мы хотим получить.
Быстрое решение с помощью SVGOMG
Один из способов быстро удалить большую часть этих ненужных данных — инструмент Джейка Арчибальда SVGOMG. Вы можете либо загрузить файл SVG, либо напрямую вставить код, и, в зависимости от выбранных параметров, SVG будет значительно уменьшен. Возможно, вам придется поэкспериментировать с различными опциями, чтобы получить желаемый результат, особенно если ваш SVG довольно сложный, но я обычно нахожу, что для простых иконок я могу включить большинство опций, и это не окажет негативного влияния на результат.
Пропустив код через SVGOMG, мы получим следующее:
Редактирование SVG
Если вы знаете, как писать SVG-код, то это поможет получить самый чистый и минимизированный результат. Посмотрите документацию MDN с руководством по рисованию контуров SVG и это видео от Хейдона Пикеринга, если вы хотите получить дополнительную информацию.
Но для подавляющего большинства из нас редактирование SVG возможно только с помощью визуального инструмента. Для этого примера я использую Adobe Illustrator, но другие инструменты, такие как Sketch, имеют схожие функции редактирования.
Сколько кода вы можете удалить, отредактировав SVG, зависит от его сложности и варианта использования. Следующие советы обычно относятся к иконкам и простой графике. Сложные иллюстрации часто не могут быть отредактированы до такой степени без влияния на конечный результат — и, в некоторых случаях, возможно, лучше использовать PNG или JPG.
Разверните группы
Первое, что я делаю при оптимизации SVG, это удаляю все скрытые слои и разворачиваю группы, где это возможно. Это удаляет все группы контуров в тегах кода SVG. Возможно, вы захотите сохранить некоторые группы, если планируете стилизовать или анимировать их. Вы можете развернуть группу в Illustrator с помощью сочетания клавиш Shift+CMD+G.
Преобразование в контуры
Затем я конвертирую все штрихи в контуры, где это возможно (Рис 04). В Illustrator мы можем сделать это, используя Объект> Расширить. Могут быть некоторые исключения: если вы стилизуете или анимируете stroke-dasharray или stroke-dashoffset, вам нужно оставить их нетронутыми, а также, если вы хотите сохранить ширину обводки при масштабировании SVG.
Вы также можете использовать параметр «Развернуть» в Illustrator для преобразования областей изображения, например простых рисунков, в индивидуально выбираемые контуры. Для сложных или детализированных узоров, возможно, лучше этого не делать.
Преобразование текста в контуры
Иногда полезно преобразовать текст в контуры, если текст носит чисто декоративный характер, или содержимое будет передаваться другим способом, например с заголовком, текстом кнопки или aria-label. Несмотря на то, что использовать элемент SVG
полезно, это не всегда имеет смысл, особенно если вам нужно загрузить другой веб-шрифт для отображения текста SVG. Мы можем преобразовать текст в контуры в Illustrator, выбрав его и нажав «Текст»> «Преобразовать в контуры».
Объединение контуров
Теперь, когда все в нашем SVG — это контуры, мы можем объединить их, чтобы уменьшить их количество. Возьмем для примера иконку «поиск»: два пересекающихся контура могут быть объединены в один, что даст единый контур.
JavaScript. Быстрый старт
Изучите основы JavaScript на практическом примере по созданию веб-приложения
Чтобы объединить контуры в Illustrator, мы выбираем их и используем параметр объединения в меню «Навигатор».
Исключением является сценарий, когда мы хотим стилизовать или анимировать контуры по отдельности — в этом случае их объединять не следует.
Удалите дополнительные контуры или группы
Когда контуры объединены, я выполняю последнюю проверку слоев и удаляю все пустые слои или дубликаты контуров, которые могли быть созданы в процессе.
Подгонка артборда
Когда я использую в HTML SVG-иконки, я не хочу, чтобы вокруг них оставалось дополнительное пространство, от которого я не могу избавиться. Это может произойти в случае, если SVG viewBox больше, чем содержимое. В Illustrator я выбираю «Объект»> «Артборды»> «Подогнать к границам графического объекта», чтобы размеры viewBox соответствовали графическому объекту.
Экспорт
Теперь мы готовы сохранить SVG. В Illustrator мы можем выбрать «Файл»> «Сохранить как» и выбрать в качестве формата SVG. В появившемся окне нам будет предложено несколько параметров SVG. Я обычно выбираю «Атрибуты представления», чтобы настроить параметры стиля.
Использование SVG
SVG можно использовать в Интернете различными способами, в том числе:
В свойстве CSS background-image
Спрайты
В частности, встроенные SVG-иконки обеспечивают наибольшую производительность и гибкость, и лучший способ их использования — создание спрайта. Если вы не хотите делать это вручную, доступны пакеты NPM, которые автоматически генерируют SVG-спрайты. Icomoon — это приложение, которое предлагает аналогичный сервис.
Затем, когда дело доходит до их использования, вместо вставки всего SVG, мы можем ссылаться на них с помощью элемента :