Verwendung von Bild Tag für svg Typen

Wenn ich will Bilder laden (in png oder jpg-Format) für verschiedene Bildtypen I-Bild-Tag verwenden und beschreiben Quellen:Verwendung von Bild Tag für svg Typen

<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>

Gibt es einen besseren Weg, es zu benutzen, ist für SVG-Tag (und dann fill und andere CSS-Eigenschaften dafür verwenden)? (Ohne js)

Quelle

2017-10-19 prostyash

Es hängt davon ab, ob Sie wollen/verwenden:

inline SVG

oder

SVG als Bild (ex:<img src="someimage.svg" alt="svg" />)

Wenn Sie wollen/werden SVG als img verwenden, dann können Sie tun, wie Sie es im Moment picture Verwendung haben.

Andernfalls werden Sie CSS-Medienabfragen verwenden müssen, so etwas wie dieses:

/*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>

Quelle

2017-10-19 13:39:51 dippas

Dank für Erklärung! – prostyash

Verwendung von Bild Tag für svg Typen

Antwort

Verwandte Themen