Softonic

Изменить размер SVG

Шаг 1 / 2
Далее

SVG является векторным форматом, поэтому он не зависит от разрешения и остаётся идеально чётким при любом размере. «Изменить размер» SVG не растрирует его и не меняет рисунок: этот инструмент лишь задаёт новые width и height в пикселях у корневого элемента <svg>, то есть его объявленный размер отображения. viewBox, контуры и каждая координата остаются ровно такими, как есть, поэтому рисунок сохраняет пропорции и не теряет качества. Вставьте разметку, задайте ширину и высоту, посмотрите результат в предпросмотре и скопируйте или скачайте его.

Как изменить размер SVG

  1. 1

    Вставьте SVG

    Вставьте полную разметку `<svg>...</svg>` в текстовое поле.

  2. 2

    Задайте ширину и высоту

    Введите новые ширину и высоту в пикселях.

  3. 3

    Живой предпросмотр

    Инструмент переписывает `width` и `height` у корневого `<svg>` (или добавляет их, если они отсутствуют) и сразу показывает результат.

  4. 4

    Скопируйте или скачайте

    Скопируйте обновлённую разметку в буфер обмена или сохраните её как файл `.svg`.

Размер отображения и viewBox

У SVG есть размер отображения (width/height) и собственная система координат (viewBox).

<svg width="200" height="200" viewBox="0 0 100 100">
    <circle cx="50" cy="50" r="40" />
</svg>

На экране этот SVG имеет размер 200 x 200 пикселей, тогда как его внутренние координаты идут от 0 до 100. Круг с r="40" заполняет около 80% viewBox, поэтому отображается шириной примерно 160 px. Этот инструмент меняет только width и height, то есть объявленный размер отображения. Он не трогает viewBox и координаты, и именно поэтому рисунок сохраняет пропорции и остаётся чётким: вы просите браузер нарисовать ту же картинку другого размера, а не перерисовать её.

Почему SVG может выглядеть так же после изменения размера

Если SVG вставлен чем-то вроде <img src="icon.svg" width="500"> или его размер задаётся через CSS, то размером отображения управляет окружающая страница, и она переопределяет width/height в файле. В таком случае меняйте размер там, где используется SVG (в <img>, в CSS или в контейнере), а не только внутри разметки.

Линии и текст остаются чёткими

Поскольку ничего не растрируется, текст остаётся настоящим векторным текстом, а линии остаются гладкими при любом размере. Толщина линий задаётся в системе координат, поэтому она масштабируется вместе с рисунком. Чтобы линия сохраняла одинаковую видимую толщину независимо от размера, добавьте vector-effect="non-scaling-stroke" к этому элементу в исходнике перед изменением размера.

Держите разметку чистой

SVG, экспортированные из Figma, Illustrator или Sketch, часто несут лишний вес: пространства имён редактора (sodipodi:, inkscape:), скрытые метаданные и неиспользуемые <defs>. Этот инструмент оставляет вашу разметку как есть, кроме размера. Чтобы убрать лишнее, пропустите файл через оптимизатор вроде SVGO до или после изменения размера.

Часто задаваемые вопросы

Нет. Задаются только width и height у корневого <svg>. viewBox, контуры и каждая координата остаются нетронутыми, поэтому изображение сохраняет точные пропорции.

Обычно размером управляет страница: ширина у <img>, правило CSS или контейнер переопределяют собственные размеры файла. Меняйте размер там, где используется SVG, а не только в разметке.

Да. SVG является векторным форматом, поэтому ничего не растрируется, и текст и линии остаются чёткими при любом размере. Если исходный файл уже перевёл текст в контуры, он масштабируется как любая другая фигура, и всё равно остаётся чётким.

Да. Меняются только width и height; <animate>, <script>, обработчики событий и CSS внутри SVG остаются нетронутыми.

Разметка отправляется на наш сервер, чтобы отрисовать предпросмотр изменённого размера, и не сохраняется после запроса. Она не хранится и не передаётся.

Сопутствующие инструменты

Палитра цветов Material Design

Просмотрите палитру цветов Material Design. Копируйте любой оттенок (от 50 до A700) в форматах HEX, RGB или HSL одним нажатием.

Сжать GIF

Уменьшайте анимированные GIF прямо в браузере: снижайте размеры, оставляйте меньше кадров и настраивайте качество кодирования. Проверьте петлю перед скачиванием.

Конструктор тир-листов

Создайте приватный тир-лист из текста и локальных изображений. Настройте уровни, распределите элементы мышью или клавиатурой и экспортируйте в JSON, PNG или SVG.

Конвертер JPG в Word

Конвертируйте JPG-фото или скриншот текста в редактируемый документ Word. Инструмент считывает слова с помощью OCR и раскладывает их, чтобы вы могли переписать, отформатировать и переиспользовать их.

Конструктор флагов

Создайте в браузере простой собственный флаг 3:2 с шестью компоновками, цветами, текстом и символом. Скачайте SVG или PNG либо откройте диалог печати браузера.

Генератор линованной бумаги

Создавайте линованную бумагу для печати бесплатно. Выберите узкую, широкую или стандартную линовку, задайте расстояние между строками в мм, размер листа и линию поля, затем распечатайте или скачайте SVG.

Инструмент доступен на других языках