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

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

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

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

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

Ответ 1

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

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

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

Ответ 2

Попробуйте следующее:

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

например.

 <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

вы можете изменить его размер, показывая svg в теге изображения и теге изображения размера i.e.

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

Ответ 4

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

.SvgImage img{ width:80%; }

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

Ответ 5

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

В конце вы получите номера, которые вы можете подключить к svg, чтобы правильно установить окно просмотра. Затем используйте любой 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);

Ответ 6

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

Ответ 7

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

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

Ответ 8

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

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