links en rechts van plaatje bij Firefox probleem

Hoi,
Bij Firefox zie ik bij een website die ik aan het maken ben een wit lijntje links en rechts van het plaatje staan.


Het is een SVG van 1920 pixels breed en dat plaats ik boven de voettekst met de volgende code:
Kan nog geen linkje naar site sturen want die is in onderhoudsmode.

Bij Chrome geen probleem.

Wat zou het kunnen zijn?
Thanks!

Kan je het op JSFiddle delen?

@php4u heb een jsfiddle van gemaakt maar dat is dan alleen de html en css code geworden.

Het is een SVG van 1920 pixels breed

Klik om te vergroten...

Is .svg noodzakelijk? Zo niet, dan zou je een screenshot kunnen maken en de afbeelding als .png (of als .jpg) kunnen invoegen. Voordeel van .svg is dat de kwaliteit altijd even goed en scherp blijft maar dat is tevens het nadeel. Dezelfde foto kan in .png/.jpg er beter uitzien door een lichte compressie.

Als er tekst op de afbeelding staat die wel altijd scherp moet blijven dan kan je deze over de afbeelding heen leggen.
Met bijvoorbeeld font-size: calc(0.75rem + 3vw) of het gebruik van @media kan je de font-size aanpassen voor de verschillende resoluties.

Hoi @bron, bedankt voor reageren. De klant wil dat het zo scherp mogelijk is vandaar SVG.
Denk je dat de svg het probleem is?

Alle huidige browsers hebben volledige .svg support, ook FF. Af en toe kom ik rare dingetjes tegen die in FF bijna goed werken terwijl ze in andere browsers goed werken, geen idee waar dit aan ligt, misschien de huidige engine die FF al een tijdje gebruikt. Is FF de vroegere IE, haha? Het is lastig te zeggen waar het aan ligt. Soms wil het helpen als je in de css bij sommige ccs3 eigenschappen een regel kopieert en er -moz- voor zet.

Je gebruik het nu als img src, is het mogelijk om het als tekst te gebruiken, iets als

Of geef de img een width voor een volledige breedte

Of als het helemaal niet lukt, go dirty


aanvulling:
php4u vroeg een jsfiddle. Als ik de vergroter aanzet zie ik geen lijntje, of mis ik iets?
De curven in de .svg zijn dusdanig dat je dezelfde kwaliteit misschien ook in jpg/png kan bereiken (bij een lage compressie).

top @bron, ga ik proberen!

Van een screenshot (jsfiddle) heb ik jpg en png gemaakt, beide met lage compressie.
De lijnen zijn door de lichte compressie vloeiender dan de svg die uit scherpe "streepjes" bestaat..

Je kan ze even invoegen en kijken wat je (en je opdrachtgever) er van vindt.
Eé ding is zeker, het zal nooit zo mooi worden als drukwerk omdat een scherm uit pixels bestaat

aanvulling 1
De getallen in de bestandsnaam is de kwaliteit. Bij jpg 97% en 98% , bij png 8/9 en 9/9.

aanvulling 2
Het lijkt erop dat het .webp formaat (klik) de nieuwe norm voor websites gaat worden. Alle browsers (behalve Safari) ondersteunen dit sinds een paar jaar. Webp heeft de voordelen van jpg, svg en png, zonder de nadelen. Je kan in .webp kiezen voor geen compressie (net als svg) of wel compressie (als in jpg/png). Net als png ondersteunt het ook transparantie. Ik zou het nu nog niet gebruiken i.v.m. oudere browsers en Safari die het niet ondersteunen. Ook google is enthousiast.

Helemaal helder @bron! Dank je wel voor de duidelijke uitleg. Voor het gemak heb ik nu de vormgever gevraagd het svg bestand in zo hoog mogelijke png kwaliteit met zo klein mogelijke bestandsgrootte te sturen.
Dat heeft geholpen want nu is dat lijntje weg
Kwaliteit is prima.

Zal ook artikel over webp goed bekijken.

Vraag is ruimschoots opgelost :thumb: