Как делать SVG резиновым?

#css3 #svg

Как делать SVG структуру резиновой ?К примеру на такое конструкции 



* {
  margin: 0;
}
svg {
  display: table;
  margin: auto;
}





Примерно что бы эта фигура тянулась..

Вырезать из фотошопа или сохранять как изображение не вариант 
    

Ответы

Ответ 1

Для этого достаточно обозначить координаты и размер холста за счет атрибута viewBox
- и можно делать svg резиновым, за счет уже знакомого width: 100%.



* {
  margin: 0;
}

.svg-responsive {
  width: 100%;
}



Ответ 2

Например задать:

svg {
  max-width: 100%;
  width: 100%;
}




* {
  margin: 0;
}
svg {
  display: table;
  margin: auto;
  max-width: 100%;
  width: 100%;
}