Различные макеты SVG в каждом устройстве

Question

У меня есть веб-макет, построенный из нескольких элементов SVG (многоугольники и прямоугольники). Я хотел бы иметь отдельный набор SVG-кода для размера экрана max. 768 px ширина и макс. Ширина 420 px. Кто-нибудь здесь пытался иметь отдельные наборы графики SVG для разных устройств? Любые советы по рендерингу различных SVG на основе размеров экрана устройства? Большое спасибо.

Answer 1

Вы можете использовать запросы css media для этого. Вот несколько примеров: blogpost.

Пример:

<svg> 
    <defs> 
     <style type="text/css"> 
      @media screen and (max-width: 200px) { 
       #slogan{ 
        display: none; 
       } 
      } 
     </style> 
    </defs> 
    <g id="slogan"> 
     ... 
    </g> 
</svg>