Вставить SVG в HTML

Question

Мне нужно встроить файл SVG в файл HTML, размеры SVG немного больше. Итак, мне нужно изменить размер SVG до разрешения экрана. Есть ли способ сделать это? Спасибо.

Answer 1

Если вы хотите, чтобы файл SVG помещался в контейнере, первым делом необходимо установить атрибут viewBox и удалить атрибуты width и height из корневого элемента <svg>:

<svg viewBox="0 0 100 200" ... >

Значения viewBox: x y width height. Подробнее читайте в спецификации SVG .

Answer 2

Я не знаю, насколько сложен этот SVG, но по крайней мере вы можете поместить все описание в одну группу, а затем использовать transform = "scale (SF)", тогда как "SF" означает коэффициент масштабирования. По умолчанию 1 (100%), поэтому используйте маленький скрипт:

 TransFrm = "scale(" + SF + ")";
 yourElement.setAttributeNS(null, "transform", TransFrm);

Или если вы имеете в виду изменение размера с помощью viewBox, то <rect x="0" y="0" width="100%" height="100%"/>.

Или, если вы имеете в виду что-то еще, взгляните на: http://janistoolbox.typepad.com/blog/2009/12/svgauto-resize-svg-on-an-html-page.html

Удачи.