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

Question

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

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

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

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

Answer 1

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

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

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

Answer 2

Попробуйте:

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

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

3. Установите фиксированное соотношение сторон с помощью 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">

Answer 3

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

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

Answer 4

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

.SvgImage img{ width:80%; }

---

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

Answer 5

Вот пример получения границ с использованием 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);

Answer 6

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

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

Answer 7

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

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

Answer 8

У меня есть файл 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">