SVG bestand als logo in HTML

[kimzoekthulp]

Goedemiddag!

Na al twee middagen googelen, ga ik proberen om mijn antwoord op dit forum te krijgen:

Ik heb een logo gemaakt in Adobe Illustrator. Dit logo zou ik graag gebruiken in de header van mijn website. ik gebruik het platform Blogger, waarbij ik normaal gebruik maak van een standaard widget om afbeeldingen toe te voegen. Helaas herkent deze widget alleen geen SVG bestanden. Nu ben ik aan het proberen om deze afbeelding zelf in de HTML te verwerken maar het lukt niet!

Ik gebruik de code:
<img src="documenten/afbeeldingen/logovector2.svg" alt="logovector"/>

De afbeelding staat op mijn mac opgeslagen in het mapje documenten, en vervolgens dus afbeeldingen.

Echter als ik dit toevoeg aan mijn HTML krijg ik een klein licht blauw vierkantje met een wit vraagteken? Ik kom er echt niet meer uit, dus bij deze vraag ik jullie om hulp.

Ik hoop heeeeeeel graag van iemand te horen, want ik wordt er gek van.

Alvast bedankt,
Kim

[D4NG3R]

Is jouw mac ook de webserver dan? Want jouw image staat lokaal op jouw systeem.

[eL_Jay]

het pad van het plaatje zal denk ik verkeerd staan
Oplossing: achterhaal de locatie van het plaatje op de server (pad) en vul deze in bij de img src="" ipv documenten/afbeeldingen/logovector2.svg.

eL_Jay wijzigde deze reactie 27-10-2016 15:49 (58%)

[RobIII]

quote:

D4NG3R schreef op donderdag 27 oktober 2016 @ 15:46:
Is jouw mac ook de webserver dan? Want jouw image staat lokaal op jouw systeem.

^ Dat. Geheid. Want documenten/afbeeldingen/ is nou niet bepaald een blogger pad.

quote:

eL_Jay schreef op donderdag 27 oktober 2016 @ 15:47:
het pad van het plaatje zal denk ik verkeerd staan

Let ook op o.a. cAsE-sEnSiTiViTy.sVg (ook voor 't pad). En überhaupt dat 't plaatje geüpload is natuurlijk.

Het zou ook nog kunnen dat de SVG met de verkeerde content-type (meer) geserveerd wordt, maar dat is al onwaarschijnlijker dan gewoon een verkeerd pad.

En als je twijfelt open je je browser's console (Firefox Firebug of Dev.tools / IE F12 Dev.tools / Chrome Dev.tools / Safari Dev.tools / Opera Dragonfly) en kijk je wat er gaande is (m.n. in de network tab). Krijg je een 404 op de request dan klopt 't pad dus gewoon niet of is 't plaatje niet eens aanwezig op de webserver.

Kwestie van (basis) debuggen.

RobIII wijzigde deze reactie 27-10-2016 16:00 (27%)

[kimzoekthulp]

Ik merk al dat ik hier veeeeeeeeel te weinig van af weet haha!

1. Ik heb geen idee of mijn mac een webserver is.. ik weet niet eens wat een webserver is.
2. Hoe achter haal ik dan de locatie van het plaatje op de server?
3. Hoe weet ik of het laatje geupload is?

Waarschijnlijk allemaal niet hele diepgaande vragen maar dat maakt antwoorden ook een stuk makkelijker zullen we maar zeggen!

[D4NG3R]

quote:

kimzoekthulp schreef op donderdag 27 oktober 2016 @ 16:16:
1. Ik heb geen idee of mijn mac een webserver is.. ik weet niet eens wat een webserver is.

Een (web)server bied iets aan aan clients. Als jij bijvoorbeeld naar Tweakers.net gaat in je browser vraagt jouw computer als client aan een server de website op. De server verwerkt deze aanvraag en stuurt de juiste data terug.

quote:

2. Hoe achter haal ik dan de locatie van het plaatje op de server?
3. Hoe weet ik of het laatje geupload is?

Je zal ergens op dat blogger platform wel plaatjes kunnen uploaden. Het pad ligt aan de uploadlocatie, deze kan bijvoorbeeld /images/blablabla.svg zijn maar kan ook een URL zijn, bijvoorbeeld https://ic.tweakimg.net/ext/i/imagenormal/2001278701.jpeg (Random plaatje van een artikel op de FP).

[kimzoekthulp]

quote:

Je zal ergens op dat blogger platform wel plaatjes kunnen uploaden. Het pad ligt aan de uploadlocatie, deze kan bijvoorbeeld /images/blablabla.svg zijn maar kan ook een URL zijn, bijvoorbeeld https://ic.tweakimg.net/ext/i/imagenormal/2001278701.jpeg (Random plaatje van een artikel op de FP).

Nou het punt is dus dat ik alleen jpg, bmp en png achtige plaatjes of foto's kan uploaden. SVG herkent blogger niet Dus weet niet hoe ik dan een URL kan verkrijgen..

[RobIII]

quote:

kimzoekthulp schreef op donderdag 27 oktober 2016 @ 18:55:
[...]


Nou het punt is dus dat ik alleen jpg, bmp en png achtige plaatjes of foto's kan uploaden. SVG herkent blogger niet Dus weet niet hoe ik dan een URL kan verkrijgen..

Als Blogger alleen maar die bestandsformaten accepteert dan zijn je opties beperkt:

1. Je converteert je SVG naar een van de geaccepteerde formaten (lees: in jouw geval vrijwel 100% zeker PNG)
2. Je uploadt de SVG naar een andere locatie die wél SVG accepteert en daarna verander je de src van documenten/afbeeldingen/logovector2.svg naar http://someimagehost.tld/foo/bar/123123897.svg. Helaas accepteert imgur (bijvoorbeeld) ook geen SVG maar er zijn alternatieven (zoals imgh.us en svgur.com). De vraag is even hoe betrouwbaar die zijn en welke andere voorwaarden zij hanteren (misschien wel kosten, verplicht account, whatever) en hoe jij je daar in kunt vinden

Maar wat de aller makkelijkste optie is, is gewoon de SVG "inlinen". SVG is immers gewoon platte tekst; open het bestand maar eens in notepad, sublimetext of een andere texteditor (géén Word of Wordpad en consorten!). Je krijgt dan zoiets:
HTML:

<!DOCTYPE html>
<html>
<head>
  <title>Yay!</title>
</head>
<body>
  <p>
    Lorem ipsum dolor sit amet
  </p>
  <a href="http://tweakers.net">
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 100 100" enable-background="new 0 0 100 100" width="100" height="100">
      <rect fill="#b41e3b" width="100" height="100"></rect>
      <path fill="#FFFFFF" d="M86.256,52.367c0-2.051-0.17-4.075-0.503-6.059l8.378-8.165l-11.528-1.675c-5.229-10.701-15.679-18.338-27.474-19.997L50,6.081l-5.128,10.391c-11.797,1.66-22.245,9.297-27.475,19.997L5.869,38.144l8.376,8.166c-1.956,11.684,1.973,23.799,10.48,32.049l-2.001,11.664l10.478-5.505c10.395,5.448,23.2,5.448,33.597,0l10.478,5.508l-2.001-11.667C82.265,71.55,86.256,62.129,86.256,52.367C86.256,50.316,86.256,62.053,86.256,52.367z M39.09,34.545H50h10.91v7.245h-7.078v13.493H50h-3.831V41.79H39.09V34.545z M73.666,68.983c-7.327,10.41-21.005,14.893-33.061,10.743c-11.542-3.973-19.533-15.151-19.533-27.359c0-9.371,4.686-18.318,12.355-23.696v26.612L50,64.924l16.574-9.639V28.672c6.223,4.365,10.577,11.136,11.908,18.624C79.822,54.829,78.071,62.729,73.666,68.983C71.914,71.475,76.872,64.431,73.666,68.983z"></path>
    </svg>
  </a>
  <p>
    Lorem ipsum dolor sit amet
  </p>
</body>
</html>

Zie regel 11-14; dat is gewoon letterlijk de inhoud van de SVG file (minus wat xml geneuzel).

Dat scheelt je ook nog eens een extra HTTP request naast dat het je gedoe scheelt met uploaden/hosten van de image en het pad uitpuzzelen en whatnot.

Ik gebruik die techniek ("inlinen") veelvuldig op m'n eigen site (zie "Over mij" hieronder in mijn sig). De code van, bijvoorbeeld, de "contact" pagina (waar nogal wat SVG afbeeldingen inlined zijn) vind je hier.

RobIII wijzigde deze reactie 27-10-2016 19:50 (65%)

[kimzoekthulp]

Het is gewoon gelukt Rob!!! Ik heb het inlinen toepast en na wat gestuntel is het me gelukt!
Nu nog even een paar aanpassingen maken en dan is het helemaal top.

Super bedankt allemaal voor jullie hulp en Rob natuurlijk in het speciaal voor de doorslaggevende tip!!

[D4NG3R]

quote:

kimzoekthulp schreef op vrijdag 28 oktober 2016 @ 16:54:
Het is gewoon gelukt Rob!!! Ik heb het inlinen toepast en na wat gestuntel is het me gelukt!
Nu nog even een paar aanpassingen maken en dan is het helemaal top.

Super bedankt allemaal voor jullie hulp en Rob natuurlijk in het speciaal voor de doorslaggevende tip!!

offtopic:
Psst, je kan zijn antwoord aanvinken als het beste.