Steeds vaker worden websites op mobiele apparaten bezocht. In lijn met deze ontwikkeling worden responsive websites steeds populairder. Bij de ontwikkeling van een responsive website moet met veel zaken rekening gehouden worden. Hoe ziet de website er uit op de iPad? Hoe werkt de navigatie op een mobiel? Hoe ga ik om met een retina scherm? Dit zijn slechts een aantal belangrijke vragen. In deze blog laat ik zien wat de beste manier is om een SVG logo toe te voegen.
Een SVG is een vector formaat gebaseerd op XML. Het voordeel van een SVG bestand is dat dit formaat schaalbaar is. Vanuit Adobe Illustrator kan je vrij eenvoudig een SVG van je logo genereren.
Backward compatibility
Het enige nadeel van het gebruik van SVG’s is dat oudere browsers dit niet ondersteunen. Het is daarom zaak om deze integratie backward compatible te maken. Laten we aan de slag gaan.
echo '<a title="' . esc_attr( get_bloginfo( 'name', 'display' ) ) . '" href="' . esc_url( home_url( '/' ) ) . '" rel="home">';
if ( file_exists( get_stylesheet_directory() . '/images/logo.svg' ) && file_exists( get_stylesheet_directory() . '/images/logo.png' ) ) {
<img alt="' . esc_attr( get_bloginfo( 'name', 'display' ) ) . '" src="' . get_stylesheet_directory_uri() . '/images/logo.svg" data-src-png="' . get_stylesheet_directory_uri() . ' /images/logo.png">
} elseif ( file_exists( get_stylesheet_directory() . '/images/logo.png' ) ) {
<img alt="'. esc_attr( get_bloginfo( 'name', 'display' ) ).'" src="'. get_stylesheet_directory_uri().'/images/logo.png">
} else {
bloginfo( 'name' );
}
echo '</a>';
Wat ik hier doe is vrij eenvoudig. Allereerst controleer ik op de aanwezigheid van het logo in PNG en SVG formaat. Als er geen SVG bestand gevonden wordt, wordt hier het PNG logo ingeladen. In het eerste gedeelte van de code laad ik het SVG betand in en geef via een HTML 5 data attribuut het pad van de PNG mee. Het pad van de PNG kunnen we vervolgens gebruiken in het geval de website met een oude browser wordt bezocht.
Modernizr
Om te controleren of de browser SVG ondersteuning biedt maken we gebruik van Modernizr. Deze library voegen we als volgt toe aan WordPress.
wp_enqueue_script( 'modernizr', get_template_directory_uri() . '/vendor/modernizr/modernizr.js', array(), '2.7.1', true );
Let’s do some magic. Met Modernizr kunnen we nu controleren of de browser SVG ondersteund. Doet de browser dat niet, dan vervangen we de SVG met het PNG bestand.
if ( ! Modernizr.svg ) {
$( 'img[data-src-png]' ).each( function() {
var $this = $( this );
$this.attr( 'src', $this.data( 'src-png' ) );
} );
}
In dit geval vervangen we alle SVG’s met het data attribuut ‘data-src-png’ met een PNG bestand.
3 reacties
Ik doe altijd het volgenden:
if(!Modernizr.svg) {
$('img[src*="svg"]').attr('src', function() {
return $(this).attr('src').replace('.svg', '.png');
});
}
En upload dan een svg en een png… in hoeverre is dit anders / beter / slechter?
*volgende
Dat is ook een mooie oplossing. Er is hierbij niet zozeer een oplossing beter of slechter. Wij controleren nog of het bestand bestaat omdat we dat bij de thema’s niet altijd zeker weten. Als je dit zeker weet is jouw oplossing een mooi alternatief.