Изменение размера SVG в HTML?

157

Итак, у меня есть файл SVG в HTML, и одна из вещей, о которых я слышал о формате, заключается в том, что он не получает все пиксели при его увеличении.

Я знаю с jpeg или что-то еще, что я могу сохранить в виде значка 50 на 50, а затем отобразить его как (скорее пиксельный) миниатюру 100 на 100 (или 10 на 10), вручную установив высоту и ширину в image_src тег.

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

Есть ли способ указать, что вы хотите, чтобы изображение SVG отображалось меньше или больше, чем оно фактически хранится в файловой системе?

html svg Дженни
источник

178

Откройте .svgфайл с помощью текстового редактора (это просто XML) и найдите что-то вроде этого вверху:

<svg ... width="50px" height="50px"...

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

Amadan
источник

75

Да, это верно, но вам также необходимо добавить атрибут 'viewBox' (например, viewBox = "0 0 50 50" в вашем примере размером 50x50px), в противном случае содержимое может не масштабироваться надлежащим образом (будет зависеть от размеров контейнера). Scour сделает это автоматически, codedread.com/scour .

Эрик Дальстрем

Ура! Это помогло! У меня уже есть вещи на 100% в файле, оказывается, но окно просмотра было ключом! Спасибо вам обоим!

Дженни

26

В случае, если это не очевидно ни для кого, 'viewBox' чувствителен к регистру. Кроме того, первые две координаты - это верхний левый угол, если вы обрезаете изображение, а вторые две координаты - это ширина и высота перед масштабированием.

Big McLargeHuge

1

Обратите внимание, что <div style = "width: 50px; height: 50px"> <svg viewBox = "0 0 1000 1000"> ... </ svg> </ div> и <svg viewBox = "0 0 1000 1000" style = "width: 50px; height: 50px"> ... </ svg> будет работать.

widged

48

Попробуйте эти:

Установите отсутствующее окно просмотра и заполните значения высоты и ширины заданных атрибутов высоты и высоты в теге svg
Затем масштабируйте изображение, просто установив высоту и ширину в желаемые процентные значения. Удачи.
Установите фиксированное соотношение сторон с помощью preserveAspectRatio="X200Y200 meet(например, 200 пикселей), но это не обязательно

например

 <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">

Лоренц Ло Зауэр
источник

24

Вы можете изменить его размер, отображая svg в теге изображения и теге размера изображения, т.е.

<img width="200px" src="lion.svg"></img>

Tanveer
источник

1

Проблема, которую я думаю с использованием <img>, заключается в том, что вы теряете возможности отработки отказа тега <object> (что может быть актуально для пользователей IE в версии 8 и ниже).

Натан Крауз

10

Изменение ширины контейнера также исправляет это, а не изменяет ширину и высоту исходного файла.

.SvgImage img{ width:80%; }

Это исправляет мою проблему изменения размера SVG. Вы можете дать любой% в зависимости от ваших требований.

neuro_tarun
источник

8

Я нашел, что лучше всего добавить viewBoxи preserveAspectRatioатрибуты к моим SVG. Окно просмотра должно описывать полную ширину и высоту SVG в форме 0 0 w h:

<svg preserveAspectRatio="xMidYMid meet" viewBox="0 0 700 550"></svg>

duhaime
источник

2

Это лучший вариант, если честно. Работает как шарм.

Джастин

6

Используйте следующий код:

<g transform="scale(0.1)">
...
</g>

Крис П
источник

4

Вот пример получения границ с использованием svg.getBox(): https://gist.github.com/john-doherty/2ad94360771902b16f459f590b833d44

В конце вы получите числа, которые вы можете подключить к SVG, чтобы правильно настроить viewbox. Затем используйте любую CSS на родительском div, и все готово.

 // get all SVG objects in the DOM
 var svgs = document.getElementsByTagName("svg");
 var svg = svgs[0],
    box = svg.getBBox(), // <- get the visual boundary required to view all children
    viewBox = [box.x, box.y, box.width, box.height].join(" ");

    // set viewable area based on value above
    svg.setAttribute("viewBox", viewBox);

Лоуренс Уайтсайд
источник

1

У меня есть файл SVG в HTML [....] Есть ли способ указать, что вы хотите, чтобы изображение SVG отображалось меньше или больше, чем оно фактически хранится в файловой системе?

Графика SVG, как и другие творческие работы, защищена законом об авторских правах в большинстве стран. В зависимости от юрисдикции, лицензии на произведение или от того, являетесь ли вы владельцем авторских прав, вы не сможете изменять SVG без нарушения закона об авторском праве , хотите верьте, хотите нет.

Но законы - сложные темы, и иногда вы просто хотите закончить с дерьмом. Поэтому вы можете настроить масштаб изображения без изменения самой работы, используя imgтег с widthатрибутом в вашем HTML.

Использование внешнего HTTP-запроса для указания размера:

<img width="96" src="/path/to/image.svg">

Указание размера в разметке с использованием URI данных :

<img width="96" src="data:image/svg+xml,...">

SVG могут быть оптимизированы для URI данных для создания изображений SVG Favicon, подходящих для любого размера:

<link rel="icon" sizes="any" href="data:image/svg+xml,%3Csvg%20viewBox='0%200%2046%2045'%20xmlns='http://www.w3.org/2000/svg'%3E%3Ctitle%3EAfter%20Dark%3C/title%3E%3Cpath%20d='M.708%2045L23%20.416%2045.292%2045H.708zM35%2038L23%2019%2011%2038h24z'%20fill='%23000'/%3E%3C/svg%3E">

Джош Хабдас
источник

Изменение размера SVG в HTML?

Ответы: