使用SVG的类型

当我想要加载我用图片的标签不同的屏幕类型的图片（PNG或JPG格式）和描述来源：使用SVG的类型

<picture> 
     <source media="(min-width: 960px)" 
       srcset="img/[email protected] 1x, img/[email protected] 2x" 
       alt="Фотография пользователя"> 
     <source media="(min-width: 660px)" 
       srcset="img/[email protected] 1x, img/[email protected] 2x" 
       alt="Фотография пользователя"> 
     <img src="img/photo-drumset-mobile.jpg" 
      srcset="img/photo-drumset-mobile.jpg 1x, img/[email protected] 2x" 
      alt="Фотография пользователя из социальной сети"> 
    </picture>

什么是用它来更好的方法svg标签（然后使用填充和其他CSS属性）？（没有JS）

来源

2017-10-19 prostyash

这取决于，如果你想/将使用：

直列SVG

或

SVG作为图像（例如：<img src="someimage.svg" alt="svg" />）

如果您想/将使用SVG作为img那么您可以使用picture这样做。

否则，你将不得不使用CSS媒体查询，像这样：

/*demo purposes */ 
 
body { 
 
    margin: 0; 
 
    overflow: hidden 
 
} 
 

 
svg { 
 
    width: 100vw; 
 
    height: 100vh; 
 
} 
 
/* end demo purposes */ 
 

 
.mobile { 
 
    background: red 
 
} 
 

 
.desktop { 
 
    display: none 
 
} 
 

 
@media (min-width:1024px) { 
 
    .desktop { 
 
    background: green; 
 
    display: block 
 
    } 
 
    .mobile { 
 
    display: none 
 
    } 
 
}

<svg class="desktop"> 
 
<!-- svg code --> 
 
</svg> 
 
<svg class="mobile"> 
 
<!-- svg code --> 
 
</svg>

来源

2017-10-19 13:39:51 dippas

感谢解释！ – prostyash

使用SVG的类型

回答

相关问题