Cookies op Tweakers

Tweakers maakt gebruik van cookies, onder andere om de website te analyseren, het gebruiksgemak te vergroten en advertenties te tonen. Door gebruik te maken van deze website, of door op 'Ga verder' te klikken, geef je toestemming voor het gebruik van cookies. Wil je meer informatie over cookies en hoe ze worden gebruikt, bekijk dan ons cookiebeleid.

Meer informatie

Vraag


  • kimzoekthulp
  • Registratie: oktober 2016
  • Laatst online: 17-09 22:42
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

Beste antwoord (via kimzoekthulp op 30-10-2016 21:39)


  • RobIII
  • Registratie: december 2001
  • Laatst online: 00:48

RobIII

DT Doktersteam / Moderator Devschuur®

^ Romeinse 3 ja!

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 :F 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:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!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%)

Mistakes happen. It's the mistakes inside a For Loop that are a real problem - Scott Hanselman.

Over mij

Alle reacties


  • D4NG3R
  • Registratie: juli 2009
  • Laatst online: 02:18

D4NG3R

Beep Beep I'm a Geek

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

Trotse bezitter van deze signature! Dan eindelijk een nieuwe review, bekijk hier mijn blik op de ROCCAT Kova!


  • eL_Jay
  • Registratie: december 2010
  • Laatst online: 23-08 10:46
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
  • Registratie: december 2001
  • Laatst online: 00:48

RobIII

DT Doktersteam / Moderator Devschuur®

^ Romeinse 3 ja!

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

Mistakes happen. It's the mistakes inside a For Loop that are a real problem - Scott Hanselman.

Over mij


  • kimzoekthulp
  • Registratie: oktober 2016
  • Laatst online: 17-09 22:42
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
  • Registratie: juli 2009
  • Laatst online: 02:18

D4NG3R

Beep Beep I'm a Geek

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

Trotse bezitter van deze signature! Dan eindelijk een nieuwe review, bekijk hier mijn blik op de ROCCAT Kova!


  • kimzoekthulp
  • Registratie: oktober 2016
  • Laatst online: 17-09 22:42
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 :F Dus weet niet hoe ik dan een URL kan verkrijgen..

Acties:
  • Beste antwoord
  • +2Henk 'm!

  • RobIII
  • Registratie: december 2001
  • Laatst online: 00:48

RobIII

DT Doktersteam / Moderator Devschuur®

^ Romeinse 3 ja!

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 :F 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:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!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%)

Mistakes happen. It's the mistakes inside a For Loop that are a real problem - Scott Hanselman.

Over mij


  • kimzoekthulp
  • Registratie: oktober 2016
  • Laatst online: 17-09 22:42
Het is gewoon gelukt Rob!!! :D 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
  • Registratie: juli 2009
  • Laatst online: 02:18

D4NG3R

Beep Beep I'm a Geek

quote:
kimzoekthulp schreef op vrijdag 28 oktober 2016 @ 16:54:
Het is gewoon gelukt Rob!!! :D 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. ;)

Trotse bezitter van deze signature! Dan eindelijk een nieuwe review, bekijk hier mijn blik op de ROCCAT Kova!

Pagina: 1


Apple iPhone X Google Pixel XL 2 LG W7 Samsung Galaxy S8 Google Pixel 2 Sony Bravia A1 OLED Microsoft Xbox One X Apple iPhone 8

© 1998 - 2017 de Persgroep Online Services B.V. Tweakers vormt samen met o.a. Autotrack en Hardware.Info de Persgroep Online Services B.V. Hosting door True

*