Масштабирование SVG файла
- Если вам нужно, чтобы svg изображение с размерами
width="1088"
и
height="1088"
занимало весь экран и не выходило за его рамки, то
необходимо указывать ширину и высоту 100%
в шапке svg файла -
width="100%"
height="100%"
и добавить viewBox="0 0 1088 1088"
- Для наглядности я добавил стиль -
style="border:1px solid red;"
- это
будет красная рамка, которая чётко показывает границы SVG
изображения.
Ниже код вашего svg файла с измененной шапкой, как написано выше:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 1088 1088" style="border:1px solid red;">
<defs>
<style type="text/css">
.default_default {
fill: #E4801B;
stroke: #000000;
stroke-width: 1.0px;
}
</style>
</defs>
<g id="root" transform="translate(0,0)">
<g id="Auto" class="default_default" transform=" translate(0,0) rotate(0,32,32)">
<g id="layer0">
<rect y="24" x="0" height="16" width="64" id="c0trumpet" />
</g>
</g>
<g id="Auto" class="default_default" transform=" translate(576,576) rotate(0,32,32)">
<g id="layer0">
<rect y="24" x="0" height="16" width="64" id="c1trumpet"/>
</g>
</g>
<!-- тут еще 14 групп с id="Auto"-->
<g id="Auto" class="default_default" transform=" translate(960,960) rotate(0,32,32)">
<g id="layer0">
<rect y="24" x="0" height="16" width="64" id="c15trumpet"/>
</g>
</g>
</g>
</svg>
Здесь в сниппете не видно, но если вы откроете этот файл локально на своем ПК, то будет заметно, что svg занимает весь экран без полос прокрутки.
Но изображение не прижато к левому углу дисплея. Это происходит, из-за того, что задан квадрат 1088х1088, а окно браузера прямоугольное.
- Чтобы прижать изображение к левому верхнему углу, необходимо добавить
ещё один параметр в шапку svg файла:
preserveAspectRatio="xMinYMin meet"
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%"
viewBox="0 0 1088 1088" preserveAspectRatio="xMinYMin meet"
style="border:1px solid red;" >
<defs>
<style type="text/css">
.default_default {
fill: #E4801B;
stroke: #000000;
stroke-width: 1.0px;
}
</style>
</defs>
<g id="root" transform="translate(0,0)">
<g id="Auto" class="default_default" transform=" translate(0,0) rotate(0,32,32)">
<g id="layer0">
<rect y="24" x="0" height="16" width="64" id="c0trumpet" />
</g>
</g>
<g id="Auto" class="default_default" transform=" translate(576,576) rotate(0,32,32)">
<g id="layer0">
<rect y="24" x="0" height="16" width="64" id="c1trumpet"/>
</g>
</g>
<!-- тут еще 14 групп с id="Auto"-->
<g id="Auto" class="default_default" transform=" translate(960,960) rotate(0,32,32)">
<g id="layer0">
<rect y="24" x="0" height="16" width="64" id="c15trumpet"/>
</g>
</g>
</g>
</svg>
Оптимизация кода SVG
<g id="root" transform="translate(0,0)">
<g id="Auto" class="default_default" transform=" translate(0,0) rotate(0,32,32)">
<g id="layer0">
<rect y="24" x="0" height="16" width="64" id="c0trumpet"/>
</g>
</g>
- Код явно избыточен,- две пары групповых тегов
<g>
c ненужными
идентификаторами Причем такой код будет повторятся много раз.
Команда rotate(0,32,32)
лишняя, какой смысл поворачивать
прямоугольник на нулевой угол?
от команды transform="translate(X Y)"
тоже можно освободиться
Взамен можно объявить прямоугольник rect
один раз в секции <defs>
и затем его многократно клонировать с помощью команды <use>
.
<defs>
<rect id="rec" height="16" width="64" />
</defs>
<use xlink:href="#rec" x="10" y="24" />
<use xlink:href="#rec" x="74" y="84" />
Ниже полный код вашего примера
<svg xmlns="http://www.w3.org/2000/svg" xmlns:ev="http://www.w3.org/2001/xml-events" xmlns:xlink="http://www.w3.org/1999/xlink" baseProfile="full" style="border:1px solid red" version="1.1" width="100%" height="100%" viewBox="0 0 1088 1088" preserveAspectRatio="xMinYMin meet" >
<defs>
<style type="text/css">
#rec {
fill: #E4801B;
stroke: #000000;
stroke-width: 1.0px;
}
</style>
<rect id="rec" height="16" width="64" />
</defs>
<use xlink:href="#rec" x="10" y="24" />
<use xlink:href="#rec" x="74" y="84" />
<use xlink:href="#rec" x="138" y="144" />
<use xlink:href="#rec" x="202" y="204" />
<use xlink:href="#rec" x="266" y="264" />
<use xlink:href="#rec" x="330" y="324" />
<use xlink:href="#rec" x="394" y="384" />
<use xlink:href="#rec" x="458" y="444" />
<use xlink:href="#rec" x="522" y="504" />
<use xlink:href="#rec" x="586" y="564" />
<use xlink:href="#rec" x="650" y="624" />
<use xlink:href="#rec" x="714" y="684" />
<use xlink:href="#rec" x="778" y="744" />
<use xlink:href="#rec" x="842" y="804" />
<use xlink:href="#rec" x="906" y="864" />
<use xlink:href="#rec" x="970" y="924" />
<use xlink:href="#rec" x="1034" y="984" />
</svg>
за позиционирование элементов отвечают координаты X Y команды <use>
Повторюсь: Чтобы убедиться, что svg не выходит за рамки дисплея браузера (нет полос прокрутки) - скачайте файл и смотрите его на локальном ПК, без искажений масштабирования, которые вносит сниппет сайта.
Добавление SVG
в HTML
Пока вы не набрались опыта работы с SVG, лучше использовать инлайн добавление в HTML.
Для этого оборачиваем svg код в <div id="container">
<style>
.container {
width:100%;
height:100%;
}
</style>
<div class="container" >
<svg xmlns="http://www.w3.org/2000/svg" xmlns:ev="http://www.w3.org/2001/xml-events" xmlns:xlink="http://www.w3.org/1999/xlink" baseProfile="full" style="border:1px solid red" version="1.1" width="100%" height="100%" viewBox="0 0 1088 1088" preserveAspectRatio="xMinYMin meet" >
<defs>
<style type="text/css">
#rec {
fill: #E4801B;
stroke: #000000;
stroke-width: 1.0px;
}
</style>
<rect id="rec" height="16" width="64" />
</defs>
<use xlink:href="#rec" x="10" y="24" />
<use xlink:href="#rec" x="74" y="84" />
<use xlink:href="#rec" x="138" y="144" />
<use xlink:href="#rec" x="202" y="204" />
<use xlink:href="#rec" x="266" y="264" />
<use xlink:href="#rec" x="330" y="324" />
<use xlink:href="#rec" x="394" y="384" />
<use xlink:href="#rec" x="458" y="444" />
<use xlink:href="#rec" x="522" y="504" />
<use xlink:href="#rec" x="586" y="564" />
<use xlink:href="#rec" x="650" y="624" />
<use xlink:href="#rec" x="714" y="684" />
<use xlink:href="#rec" x="778" y="744" />
<use xlink:href="#rec" x="842" y="804" />
<use xlink:href="#rec" x="906" y="864" />
<use xlink:href="#rec" x="970" y="924" />
<use xlink:href="#rec" x="1034" y="984" />
</svg>
</div>
Изменяя проценты ширины и высоты контейнера svg, вы можете получить любые размеры.
Приложение будет адаптивно и работает во всех браузерах.