21

Необходимо сделать адаптивный SVG.

Как сделать так, чтобы при изменении размеров изображения (или viewport-а), дочерние элементы SVG перемещались и перестраивались (как в адаптивной вёрстке HTML).

Как сделать такой SVG?

Пример-схема

9
  • Это да, но вопрос не в реализации самого принципа, а в том, как это сделать с помощью одного файла svg и/или xml в нем.
    – Nixi1024
    27 авг 2018 в 10:34
  • Планировалось реализовать возможность загружать баннер (на сайт) единым изображением (легко загружаемым), а уже в изображении настраивать некую адаптивность...
    – Nixi1024
    27 авг 2018 в 11:31
  • 1
    Сложно назвать задачу невозможной ¯_(ツ)_/¯
    – Arthur
    27 авг 2018 в 11:57
  • Была надежда на svg и его внутреннюю разметку, но увы, похоже =)
    – Nixi1024
    27 авг 2018 в 12:04
  • 3
    Боюсь, в svg такое вряд ли найдётся, ибо не для того он делался
    – andreymal
    30 авг 2018 в 8:09

5 ответов 5

20
+50

Можно создать "адаптивное" svg-изображение. Для этого нужно прописать внутри него css-медиазапросы и двигать элементы через transform. Пример изображения:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" width="200px" height="200px" preserveAspectRatio="none">
  <style>
    circle,
    rect{
      stroke-width:2px;
      fill:none;
      stroke:orange;
    }
    @media (max-width: 120px){
      circle{
        transform:translateX(50px);
      }
      rect{
        transform:translate(-60px,80px);
      }
    }
  </style>
  <circle cx="40" cy="40" r="34" />
  <rect x="100" y="10" width="80" height="60" />
</svg>

Далее вставляем его на страницу(использовал data:url т.к. SO не хочет принимать svg картинки и ссылки без https, но это тот же самый svg):

$('input').on('input',function(){
  $('img').width(this.value);
})
*{
  box-sizing:border-box;
  vertical-align:top;
}
img{
  max-width:100%;
  border:1px solid;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2aWV3Qm94PSIwIDAgMjAwIDIwMCIgd2lkdGg9IjIwMHB4IiBoZWlnaHQ9IjIwMHB4IiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIj4NCiAgPHN0eWxlPg0KICAgIGNpcmNsZSwNCiAgICByZWN0ew0KICAgICAgc3Ryb2tlLXdpZHRoOjJweDsNCiAgICAgIGZpbGw6bm9uZTsNCiAgICAgIHN0cm9rZTpvcmFuZ2U7DQogICAgfQ0KICAgIEBtZWRpYSAobWF4LXdpZHRoOiAxMjBweCl7DQogICAgICBjaXJjbGV7DQoJCXRyYW5zZm9ybTp0cmFuc2xhdGVYKDUwcHgpOw0KCSAgfQ0KCSAgcmVjdHsNCgkJdHJhbnNmb3JtOnRyYW5zbGF0ZSgtNjBweCw4MHB4KTsNCgkgIH0NCiAgICB9DQogIDwvc3R5bGU+DQogIDxjaXJjbGUgY3g9IjQwIiBjeT0iNDAiIHI9IjM0IiAvPg0KICA8cmVjdCB4PSIxMDAiIHk9IjEwIiB3aWR0aD0iODAiIGhlaWdodD0iNjAiIC8+DQo8L3N2Zz4=" />

<label for="controller">Тут задавать ширину для картинки</label>
<input id="controller" type="number" min="70" max="500" step="5" />

7
  • Наверняка единственный способ, тоже так делал. Но хотелось бы узнать, есть ли вообще какой-то плагин для этого.
    – Arthur
    30 авг 2018 в 9:40
  • 1
    @Arthur , не знаю. Надо подождать, может кто и предложит. Было бы интересно, если и контуры менять можно было.
    – zhurof
    30 авг 2018 в 9:43
  • 50 баллов заслуживает этот ответ, так как самый первый , да и 2 подобных ответа по сути ничем не отличаются.
    – Arthur
    5 сен 2018 в 19:27
  • @Arthur отличаются - так как водном из ответов нету jquery .....без которого не будет работать адаптивность, я вообще смотрю многие любят на js решения ...
    – user33274
    7 сен 2018 в 12:16
  • @Arthur ты не понял меня ...ты написал что другие ответы похожие ..я проверил тот ответ что ты выбрал и так же другие ответы .. и не увидел сходства ...это не сарказм ...а просто сходства нету ...хотя мне лампочки
    – user33274
    7 сен 2018 в 12:25
11

Набросал пример кода на чистом svg и разумеется здесь мы не увидим как меняется расположение svg объектов то привожу пример в: https://codepen.io/topicstarter/pen/oPBzvw?editors=1000 в котором изменение положения объектов произойдёт при разрешении меньше 600px.

что бы увидеть здесь адаптивность svg надо открыть пример кода на всю страницу а сжать сам браузер до менее 600px

img preview :

введите сюда описание изображения

<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">

<svg viewbox="0 250 200" id="svg">
  <defs>
    <style>
      #svg{
        width:210px;
        height:100px;
      }
      #rect{
        width:50px;
        height:40px;
        fill:red;
        x:20px;
        y:30px;
      }
      #circle{
        cx:150px;
        cy:50px;
        fill:blue;
        r:40px;
      }
      
      @media (max-width:600px){
        #svg{
          width:200px;
          height:140px;
        }
        #rect{
        width:50px;
        height:40px;
        fill:red;
        x:70px;
        y:5px;
          fill:blue;
      }
      #circle{
        cx:95px;
        cy:90px;
        fill:blue;
        r:40px;
        fill:red;
      }    
      }
    </style>
  </defs>
  <rect id="rect"></rect>
  <circle id="circle"></circle>
</svg>

0
8

Вариант на JS (подобно flex-wrap в CSS):

const $d = document;

let rects = $d.getElementsByTagName('rect');

const arrangement = e => {
  let windowWidth = $d.documentElement.clientWidth;
  let offset_x = 20;
  let offset_y = 20;
  let next_offset_y = offset_y;
  let offset = 20;

  let maxH = 0;
  let maxW = 0;

  for (let i = 0, len = e.length; i < len; i++) {
    let w = parseInt(getComputedStyle(e[i]).width);
    let h = parseInt(getComputedStyle(e[i]).height);

    if (h > maxH) {
      maxH = h;
    }

    if (w > maxW) {
      maxW = w;
    }

    if (maxW + w + offset_x + offset + offset + offset > windowWidth) {
      set(e, i, offset_x, offset_y);
      offset_y += offset + next_offset_y;
      offset_x = 20;
      maxH = h;
    } else {
      set(e, i, offset_x, offset_y);
      offset_x += w + offset;
      next_offset_y = maxH;
    }
  }
};

const set = (e, i, offset_x, offset_y) => {
  e[i].setAttribute('x', offset_x);
  e[i].setAttribute('y', offset_y);
}

arrangement(rects);
window.onresize = function(e) {
  arrangement(rects);
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  overflow: hidden;
}

html {
  font-size: 62.5%;
}

html,
body {
  height: 100%;
}

.wrapper {
  width: 100%;
  height: 100%;
}

.wrapper svg {
  width: inherit;
  height: inherit;
  background-color: hsl(10, 0%, 70%);
}

.wrapper svg .main-area rect {
  width: 25px;
  height: 25px;
  stroke: #000;
  stroke-width: 0.125rem;
}

.wrapper svg .main-area rect.rect1 {
  width: 70px;
  height: 25px;
}

.wrapper svg .main-area rect.rect2 {
  width: 25px;
  height: 70px;
}

.wrapper svg .main-area rect.rect3 {
  width: 70px;
  height: 50px;
}
<div class="wrapper">
  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/2000/svg" version="1.1">
    <g class="main-area" fill="hsl(50,100%,70%)">
      <rect/>
      <rect/>
      <rect/>
      <rect/>
      <rect class='rect3'/>
      <rect class='rect3'/>
      <rect/>
      <rect/>
      <rect/>
      <rect/>
      <rect/>
      <rect/>
      <rect/>
      <rect/>
      <rect/>
      <rect/>
      <rect/>
      <rect/>
      <rect class='rect1'/>
      <rect/>
      <rect class='rect2'/>
      <rect/>
      <rect/>
      <rect/>
      <rect/>
      <rect class='rect2'/>
      <rect/>
      <rect/>
      <rect/>
      <rect/>
      <rect/>
      <rect/>
    </g>
  </svg>
</div>

10
  • как обычно не работает в Edge и в Firefox
    – user33274
    5 сен 2018 в 13:58
  • @МаксимЛенский, сейчас исправлю, нужно вынести, в атрибуты width & height
    – Arthur
    5 сен 2018 в 15:22
  • кстати тот пример про рыбий глаз - посмотри я там ссылку скинул
    – user33274
    5 сен 2018 в 15:24
  • Артур а теперь вообще не работает ...т.е блоки появились но они стоят в ряд … хотя Edge поддерживает flex и так же flex-wrap ….наверное это особенность Edge
    – user33274
    5 сен 2018 в 15:30
  • @МаксимЛенский, нужно добавлять отдельно для элементов высоту и ширину, почему-то свойства css не поддерживаются в svg))
    – Arthur
    5 сен 2018 в 15:30
5

Это можно сделать, используя любую js библиотеку для работы с SVG.

К примеру я взял SVG.js:

Сразу предоставлю рабочий пример, а ниже код примера:

var draw = SVG('banner');

var bg = draw
          .rect('100%', '100%')
          .attr({ fill: '#ffeb3b' });

var elem1 = draw
            .ellipse(100, 100)
            .attr({ fill: '#f06' });
            
var elem2 = draw
            .rect(150, 100)
            .attr({ fill: '#f06' });

bunnerUpdate();
window.onresize = bunnerUpdate;

function bunnerUpdate() {
  if (window.innerWidth > 400) {
    draw.size(400, 200);
    elem1.move(50, 50);
    elem2.move(200, 50);
  }
  else {
    draw.size('100%', 350);
    elem1.move(window.innerWidth / 2 - 50, 50);
    elem2.move(window.innerWidth / 2 - 75, 200);
  }
}
body {
  margin: 0;
  padding: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/svg.js/2.6.5/svg.min.js"></script>
<div id="banner"></div>

4
  • > Uncaught ReferenceError: SVG is not defined
    – ThisMan
    30 авг 2018 в 10:25
  • На то и ссылка на рабочий пример, а Вы сразу минусуете. Исправил код, чтоб можно было его выполнить
    – zzzoryn
    30 авг 2018 в 10:33
  • не я минус поставил, да и если бы не указал вам на это, вы бы не поменяли, люди бы так и запускали ваш пример с ошибкой
    – ThisMan
    30 авг 2018 в 10:34
  • 3
    кстати, по правилам, ссылка не является ответом
    – ThisMan
    30 авг 2018 в 10:34
5
+500

Удивительно, что все ответы, написанные до меня, не соответствуют условию поставленной задачи. Обратите внимание на то, что нужно отслеживать именно размеры изображения:

Как сделать так, чтобы при изменении размеров изображения (или viewport-а)

А все 4 ответа, написанные до меня, это вообще не принимают во внимание и отслеживают как один изменение размеров окна. Непонятно также почему спустя 4 месяца на это никто не обратил внимания?! Напомнило мне смешную старую шутку про разработчиков.

Но если кому-то всё же нужно откликаться на изменение окна, то изучайте первые 4 ответа и статью по ссылке (она про CSS медиа-запросы такие как @media (max-width:600px)).

Правильное решение

Если переводить слово «адаптивный» на русский язык, то мы получим два слова «приспосабливающийся» и «приспосабливаемый». Окончание «-ийся» всегда подразумевает, что предмет действия сам себя(сокращение -ся в конце) приспособит. А вот «приспосабливаемый» означает что предмет действия будет кем-то(чем-то) приспособлен. К примеру, его приспособит вышестоящее окно - то есть кто-то(что-то), но не он сам.

Случай, когда это «приспосабливающийся»

В данном случае этот приспосабливающийся будет наш SVG объект, который будет отслеживать изменения в себе и приспосабливать себя. Для этого мы в самом SVG объекте (хотя можно и снаружи) через JavaScript при помощи функции window.setTimeout каждые 50 милисекунд отслеживаем изменения размеров изображения посредством сравнения значения свойства ширины svg.getAttribute('width'). И если это значение меняется, то мы меняем расположение прямоугольника, изменяя значения его свойств (или т.н. атрибутов) x и y при помощи функции rect.setAttribute();. Мы также вместо этого можем изменить CSS свойство transform:translate(...px, ...px);, обращение к которому в JavaScript выглядит так:

rect.style.transform = 'translate(...px, ...px)';

Но приводить пример с transform нет смысла, т.к. это уже сделали в двух первых примерах.

Также важно заметить, что изменяя размер изображения посредством svg.setAttribute('width', ...); мы также должны изменить и размер его viewBox-а, ибо иначе будет несоответствие и изображение исказится.

Итак, первый пример / случай:

var svg = document.querySelector('#svg');

function changeWidth(obj)
{
    var width = +obj.options[obj.selectedIndex].text;

    svg.setAttribute('width', width);
    svg.setAttribute('viewBox', '0,0,' + width + ',320');
}
body{background:#000}
<font color="white">Ширина <s>окна</s> SVG изображения:
<select onchange="changeWidth(this)">
    <option>320</option>
    <option>210</option>
</select> px.</font><br><br>

<svg id="svg" viewBox="0 0 320 320" width="320" height="320" style="background:#fff">
<g fill="none" stroke="#f93" stroke-width="3">
    <polygon points="60,10,110,60,60,110,10,60"/>
    <rect id="rect" x="130" y="10" width="180" height="100"/>
</g>
<script type="text/javascript">
var svg = document.querySelector('#svg'),
    rect = svg.getElementsByTagName('rect')[0];

(function checkWidth()
{
    var w = +svg.getAttribute('width'); //+ значит перевод из string в integer
    if(w < 211)
    {
        rect.setAttribute('x', 10);
        rect.setAttribute('y', 120)
    }
    else
    {
        rect.setAttribute('x', 130);
        rect.setAttribute('y', 10)
    }
    window.setTimeout(checkWidth, 50)
})()
</script>
</svg>

Случай, когда это «приспосабливаемый»

Этот случай более сложный для данной задачи, т.к. SVG – это векторное изображение и в нём для каждой точки уже должны быть определённые координаты. И хотя решение, когда свойства прямоугольника изменяются извне, можно было бы с натяжкой назвать «приспосабливаемый», но это всё же неправильно, т.к. мы изменяем его свойства местоположения.

Итак, смотрите что я имею ввиду под «приспосабливаемый» SVG (пример, который также решает поставленную задачу):

var svg = document.querySelector('#svg');

function changeWidth(obj)
{
    var size = obj.options[obj.selectedIndex].text.split(' x ');

    svg.setAttribute('width', size[0]);
    svg.setAttribute('height', size[1]);
    svg.setAttribute('viewBox', '0,0,' + size[0] + ','+size[1]);
}
body{background:#000}
<font color="white">Размер SVG изображения:
<select onchange="changeWidth(this)">
    <option value="">320 x 120</option>
    <option value="">200 x 240</option>
</select> px.</font><br><br>

<svg id="svg" viewBox="0 0 320 120" width="320" height="120" style="background:#fff">
    <svg preserveAspectRatio="xMinYMin meet" width="120" height="120" viewBox="0 0 120 120">
        <polygon points="60,10,110,60,60,110,10,60" fill="none" stroke="#f93" stroke-width="3"/>
    </svg>
    <svg preserveAspectRatio="xMaxYMax meet" width="100%" height="100%" viewBox="0 0 200 120">
        <rect x="10" y="10" width="180" height="100" fill="none" stroke="#f93" stroke-width="3"/>
    </svg>
</svg>

Обратите внимание на то, как во внутренних SVG изображениях выставлены свойства preserveAspectRatio, которые и способствуют тому, чтобы расположить наши изображения таким образом. Также здесь важны свойства ширины и высоты, которые во втором внутреннем SVG установлены в 100%. И используемые вместе они действуют таким образом, что наш второй внутренний SVG выстраивается либо крайне справа, либо крайне снизу.

Вот что я называю здесь «приспосабливаемый» SVG, т.к. нигде в коде ничего не меняется (не указывается) в зависимости от размера изображения как в случае с «приспосабливающийся» SVG. Всё, что мы делаем – это изменяем только размеры изображения и ничего более.

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.