Как мне масштабировать устойчивый SVG, встроенный с тегом <object>?

115

У меня есть некоторые SVG файлы , которые определяют widthи heightтак же , как viewboxнапример:

<svg width="576pt" height="432pt" viewBox="0 0 576 432" > ...

но как отобразить их в браузере с размером, который я выбираю? Я хочу их поменьше и пробовал:

<object width="400" data="image.svg"></object>

но тогда я получаю видимые полосы прокрутки.

Это работает , если я меняю файлы SVG в набор widthи heightк 100%вместо этого, но я хочу , чтобы решить размер в HTML независимо от того, каких размеров используются в файле SVG. Это возможно ?

html svg Zitrax
источник
Я запутался, последнее предложение читается как решение, которое вы ищете? Установите ширину / высоту SVG на 100% / 100%, оставив это на усмотрение HTML, чтобы определить область для его рисования?
отметка
3
Проблема в том, что я не нашел способа изменить это в библиотеке, которую я использую для создания файлов svg. И для меня было бы разумно, если бы я мог переопределить это из html. Так что в основном мне интересно, есть ли другое решение, кроме как изменить файлы svg.
Zitrax,

Ответы:

162

Вы можете добавить атрибуты preserveAspectRatio и viewBox к <svg> тегу .

Откройте файл .svg в редакторе и найдите <svg>тег. в этом теге добавьте следующие атрибуты:

preserveAspectRatio="xMinYMin meet"
viewBox="0 0 {width} {height}"

Замените {width} и ​​{height} некоторыми значениями по умолчанию для viewBox. Я использовал значения из атрибутов «ширина» и «высота» тега SVG, и, похоже, это сработало.

Сохраните SVG, и теперь он должен масштабироваться должным образом.

Я нашел эту информацию здесь:

https://blueprints.launchpad.net/inkscape/+spec/allow-browser-resizing

Джим Келлер
источник
2
#protip все, что вам нужно, чтобы добавить это preserveAspectRatio = "xMinYMin meet"
samccone
4
@samccone: Мне кажется, этого preserveAspectRatio="xMinYMin meet"было мало. Мне также нужно было предоставить, viewBoxкак указано в ответе. Жалость!
Frerich Raabe
1
Вы также можете сделать это, preserveAspectRatio="none"если хотите растянуть svg произвольным образом.
Мэтт Кринкло-Фогт,
5
Не попадайтесь на ту же проблему, что и я: "viewbox"! = "ViewBox" :)
доктор Ю.
Кроме того, мне пришлось установить фактические атрибуты ширины и высоты, 100%как указано в этом ответе .
ComFreek
35

Ни один из приведенных здесь ответов не помог мне, когда я спросил об этом в 2009 году. Поскольку теперь у меня снова возникла та же проблема, я заметил, что использование <img>тега и ширины вместе с svg отлично работает.

<img width="400" src="image.svg">
Zitrax
источник
6
Это намного проще, чем другие варианты! Если кому-то интересно, вот таблица, в которой браузеры могут обрабатывать SVG в тегах <img> .
dimo414
5
Это может быть лучший путь, если в SVG нет гиперссылок, в противном случае img недостаточно, и все равно нужно использовать альтернативу, такую ​​как embed.
sdupton
12
Когда вы используете, <img>вы теряете всякую интерактивность со ссылками, javascript и т. Д.
gilly3
5
Minor: Элемент IMG должен быть сам замкнут, то есть <img width="400" src="image.svg"/>.
Ян Агард
4
@JanAagaard: закрывать тег img не требуется, за исключением XHTML.
Peter V. Mørch
9

Вы можете войти во встроенный SVG с помощью JavaScript:

var svg = document.getElementsByTagName('object')[0].\
  contentDocument.getElementsByTagName('svg')[0];
svg.removeAttribute('width');
svg.removeAttribute('height');

Поскольку в вашем svg уже есть viewBox, Firefox должен масштабировать ширину 576 пикселей в viewBox до ширины 400 пикселей в вашем документе. Другие SVG могут выиграть от нового viewBox, полученного на основе объявленных ширины и высоты (часто это одни и те же числа). Другие браузеры могут извлечь выгоду из других настроек svg.

joeforker
источник
1
Это дало мне:Security error: attempted to read protected variable
Zitrax
1
Размещается ли svg в том же домене, что и ваша веб-страница?
joeforker
1
Это не было (от локального до внешнего), так что, вероятно, это так, однако в итоге я использовал свой ответ ниже, поскольку он был проще.
Zitrax
9 
<body>

<div>
<object type="image/svg+xml" data="img/logo.svg">
   <img src="img/logo.svg" alt="Browser fail" />
</object>
</div>

img / logo.svg ...

<svg
   width="100%" 
   height="100%"
   viewBox="0 0 640 80"
   xmlns="http://www.w3.org/2000/svg"
   version="1.1" />

Эта установка сработала для меня.

H Титан
источник
Это действительно хорошо работает! Действительно важно определить viewBox="0 0 640 80". Очевидно, если это не определено, вы не можете масштабировать его или позволить CSS масштабировать его для вас, например, width: 100%и т. Д.
Игорь
8

Я столкнулся с проблемой, когда iOS на iPad некорректно изменял размер изображений SVG в <object> теге.

Стиль CSS увеличит или уменьшит размер <object>контейнера, но изображение внутри него не будет изменено (на iPad, iOS 7).

Изображения SVG были экспортированы из Adobe Illustrator, и решение оказалось заменой ширины и высоты в этом:

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="481.89px" height="294.843px" viewBox="0 0 481.89 294.843" 
enable-background="new 0 0 481.89 294.843"
xml:space="preserve">

с участием:

width="100%" height="100%"

Мне нужно было использовать <object>тег, потому что <img>тег в настоящее время не поддерживает встраивание растровых изображений в SVG.

Эндрю Свифт
источник
Это правильный ответ, особенно если у вас есть встроенный SVG и вы не используете тег <img! Отлично!
Грег Эллис,
5

  1. Задайте отсутствующее окно просмотра и заполните значения высоты и ширины установленных атрибутов высоты и высоты в теге svg

  2. Затем масштабировать изображение , просто установив ширину и высоту до нужных процентов значений. Удачи.

  3. Вы можете установить фиксированное соотношение сторон с помощью preserveAspectRatio = "x200Y200 meet, но это не обязательно

например

 <svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:xlink="http://www.w3.org/1999/xlink"
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
   width="10%" 
   height="10%"
   preserveAspectRatio="x200Y200 meet"
   viewBox="0 0 350 350"
   id="svg2"
   version="1.1"
   inkscape:version="0.48.0 r9654"
   sodipodi:docname="namesvg.svg">
Лоренц Ло Зауэр
источник
3

Просто используйте CSS, чтобы браузер изменил размер SVG! Примерно так: <object style="width:30%"> Подробнее см. Http://www.vlado-do.de/svg_test/ . Я просто также пробовал это локально с SVG, ширина и высота которого указаны в "pt". Хорошо работает в Firefox.

Владо
источник
1

Давай посмотрим. Пришлось освежить память о SVG, последние годы я мало им пользовался.

Из того, что я обнаружил сегодня, кажется, что если вы укажете размер объектов без единиц измерения, они будут иметь фиксированный размер (я думаю, в пикселях). Очевидно, тогда нет возможности изменить их размер при изменении размера SVG (он меняет только размер области просмотра / холста).

Если, как указано, вы не укажете размер SVG в процентах ИЛИ не укажете viewBox (например, viewBox = "0 0 600 500").

Теперь, если у вас нет возможности изменить экспортированный SVG, я боюсь, что вам не повезло. Какую библиотеку вы используете?

PhiLho
источник
Бэкэнд svg в matplotlib. Я пробовал такие функции, как set_figwidth (val), но, похоже, они не работают, но я не очень знаком с этой библиотекой, поэтому, возможно, смотрю не те функции.
Zitrax,
1

Вот решение PHP с использованием QueryPath на основе ответа Джима Келлера.

После загрузки QueryPath просто передайте свой svg-скрипт функции.

function scaleableSVG($svg){
    $qp = qp($svg, 'svg');
    $width = $qp->attr('width');
    $height = $qp->attr('height');
    $qp->removeAttr('width')->removeAttr('height');                       
    $qp->attr('preserveAspectRatio', "xMinYMin meet");
    $qp->attr('viewBox', "0 0 $width $height");
    return $qp->html();
}
Дитер Грибниц
источник