Hoe gebruik ik .svg-bestanden op een webpagina?

Ik wil weten hoe men een .svg-bestand in een webpagina kan gebruiken?


Antwoord 1, autoriteit 100%

Zie svgweb quickstarten de svgweb-projectstartpaginavoor iets dat in alle browsers werkt, inclusief IE (flash-plug-in vereist).

Er zijn veel manieren om een ​​bestaand svg-bestand op te nemen:

  • <img src="your.svg"/>
  • <object data="your.svg"/>
  • <iframe src="your.svg"/>
  • <embed src="your.svg"/>
  • <div style="background:url(your.svg)">...</div>

Antwoord 2, autoriteit 42%

Als u alleen maar een SVG-afbeelding wilt plaatsen, zoals een logo of een statisch diagram, moet u ervoor zorgen dat u een terugval biedt voor oudere versies van Internet Explorer (d.w.z. versies 8 en eerder).

De beste en eenvoudigste methode die ik heb gevonden, is om een ​​.png of .jpg te gebruiken voor je fallback, geplaatst met een normale img-tag. Vervolgens wikkelt u de img-tag in een objecttag en gebruikt u het data-attribuut om de SVG te plaatsen.

<object data="/path-to/your-svg-image.svg" type="image/svg+xml">
  <img src="/path-to/your-fallback-image.png" />
</object>

De img fallback wordt alleen geladen en gebruikt als de browser SVG niet begrijpt.


Antwoord 3, autoriteit 12%

Ik raad aan om de svg inline in je document te plaatsen (html5-techniek). Open gewoon je SVG-bestand, kopieer de SVG-tag en alles wat erin zit en plak het in je html-document.

<html>
    <body>
        <svg></svg>
    </body>
</html>

Het heeft het voordeel dat je hiermee css kunt gebruiken om het op te maken, zoals het wijzigen van de vulkleur of het toepassen van filters zoals vervaging. Een ander voordeel is dat u één http-verzoek opslaat om het svg-bestand op te halen als het zich in uw document bevindt.

Als je bijvoorbeeld de positie wilt wijzigen met css, dan moet je de css in een stijlkenmerk plaatsen. Stijlen die in een extern css-bestand staan, worden in de meeste browsers niet toegepast, omdat dit een beveiligingsbeperking is. Bijvoorbeeld:

<svg id="mySVG" style="position: absolute; top: 200px; left: 200px;"></svg>

Deze techniek wordt ondersteund door alle browsers behalve IE8 en lager, evenals de Android 2.3-browser en lager.

Lees het hoofdstuk inline SVG voor meer details:

Als u het niet inline op uw pagina wilt plaatsen, lijkt het beste alternatief de objecttag te zijn en het gebruik van de embed-tag te vermijden.

Lees dit voor meer details over object versus insluiten versus img-tag:


Antwoord 4, autoriteit 11%

http://www.w3schools.com/svg/svg_inhtml.asp

Het beste voorbeeld:

<embed src="rect.svg" width="300" height="100"
type="image/svg+xml"
pluginspage="http://www.adobe.com/svg/viewer/install/" /> 

Antwoord 5, autoriteit 7%

Caspars benadering is de juiste. Ik zou echter de fallback naar de CSS verplaatsen, omdat je waarschijnlijk enkele stijlen op het svg-bestand zelf wilt toepassen…

<object data="/path-to/your-svg-image.svg" type="image/svg+xml"  class="logo"> </object>

CSS

.no-svg .logo {
  width: 99px;
  height: 99px;
  background-image: url(/path-to/your-png-image.png);
}`

Antwoord 6, autoriteit 5%

Raphaël—JavaScript-bibliotheek. Leuke javascript-bibliotheek die svg gebruikt en je een groot aantal effecten geeft!

Ondersteunt ook de meeste browsers, inclusief IE


Antwoord 7, autoriteit 4%

Ik ben het eens met het antwoord van “code-zoop”. Hoewel dit technisch geen antwoord geeft op je vraag, kan het ook een oplossing zijn: voer de relevante gegevens rechtstreeks in de HTML in. Ofwel direct als een svg-element, of door Raphaël-JS te gebruiken.

Van w3c-schools:

SVG wordt allemaal ondersteund in Firefox, Internet Explorer 9, Google Chrome,
Opera en Safari kunt u

<html>
<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <circle cx="100" cy="50" r="40" stroke="black"
  stroke-width="2" fill="red"/>
</svg>
</body>
</html>

(einde citaat)

En om nog meer buiten de gebaande paden te denken, afhankelijk van hoe u het wilt gebruiken, kunt u uw 1-kleurige afbeeldingen ook in een webfontplaatsen. (zie bijvoorbeeld iconmoon.io )

Other episodes