Media Queries et SVG

    Images SVG et media queries…

    L'utilisation des images SVG est de plus en plus fréquente sur les sites internet. Ces sites sont également conçus en design « responsive » grâce à l'utilisation des media queries.
    Et si on utilisait les media queries dans les sources SVG ? Aller, c'est parti !

    Dans le principe, un fichier SVG peut être considéré comme une « page dans la page ». Abus de langage s'il en est, mais il s'agit d'expliquer le comportement des media queries appliquées à un document SVG.
    Le principe est tout simple car totalement équivalent à ce qui se pratique dans une feuille de styles appliquée à un document HTML.

    Le code SVG

    Ici, on peut voir que les media queries sont intégrés dans le style du document SVG. Pour l'exemple, des formes simples ont été intégrées (un carré à angles arrondis et un cercle posé sur le carré).

    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
        <defs>
            <style>

                #icon-square rect {
                    fill: #ff3300;
                }

                #icon-square circle {
                    display:none;
                }

                @media (min-width: 50px) {
                    #icon-square rect {
                        fill: #0088cc;
                    }

                    #icon-square circle {
                        fill: white;
                        opacity: .5;
                        display: inline-block;
                    }
                }

                @media (min-width: 100px) {
                    #icon-square rect {
                        fill: #ff8830;
                    }

                    #icon-square circle {
                        opacity: 1;
                        display: inline-block;
                    }
                }

                @media (min-width: 300px) {
                    #icon-square rect {
                        fill: limegreen;
                        rx: 40;
                        ry: 40;
                    }

                    #icon-square circle {
                        display: none;
                    }
                }
            </style>

            <symbol id="icon-square">
                <rect x="0" y="0" width="32" height="32" rx="3" ry="3"/>
                <circle cx="16" cy="16" r="10"/>
            </symbol>

        </defs>

        <view id="square" viewBox="20 20 32 32"/>
        <use xlink:href="#icon-square" x="20" y="20" width="32" height="32"/>

    </svg>

    L'affichage du svg

    C'est au moment de l'affichage que la prise en compte des media queries se fait.
    IL suffit d'appeler le même fichier en ne modifiant que les attributs width et height ou de gérer par ces tailles par une feuille de style.
    <img src="/svg/svg-with-media-queries.svg#square" alt="" width="20" height="20" /> Les media queries internes au SVG vont s'appliquer sur la dimension intrinsèque de l'image sans tenir compte des media queries du document principal.

    Exemples

    <img src="/svg/svg-with-media-queries.svg#square" alt="" width="20" height="20" />
    <img src="/svg/svg-with-media-queries.svg#square" alt="" width="50" height="50" />
    <img src="/svg/svg-with-media-queries.svg#square" alt="" width="100" height="100" />
    <img src="/svg/svg-with-media-queries.svg#square" alt="" width="300" height="300" />

    Dans ce dernier exemple, le radius défini par les attributs rx et ry sont surchargés pour arrondir la balise rect. Voir la CSS interne ci-dessus.

    In fine, il ne reste plus qu'à appliquer sur différents path, g ou autres au sein du SVG… Le tout associé à un peu de javascript interne au SVG et voilà matière à bien s'amuser !

    Si vous souhaitez participer, même modestement, au maintien du site et pour son usage, vous pouvez cliquer sur le joli bouton…
    Soutenez Aquinum
    Voir aussi…
    • Vérifier un numéro de carte bancaire Vérification de carte bancaire, script de validation de carte bancaire. Contrôle de format de numéro de carte bancaire, algorithme de Luhn carte de crédit Visa, Mastercard, Maestro, CB, Carte Bancaire, Discover Card, American Express, JCB Cards
    • Owl Carousel multiple Gérer plusieurs carrousels/sliders sur une seule page avec Owl Carousel 2. Manage multiple carousels/sliders on one page with Owl Carousel 2
    • Conversion SVG/CSS Encodage SVG pour CSS compatible Sass et exemple d'intégration SVG via xlink compatible CSS. SVG encoder, base64 SVG pour CSS.
    • Optimisation SVG Intégration SVG via xlink/use/symbol, factorisation de symbol SVG
    • Responsive SVG Utilisation des media queries internes au SVG
    • LazyLoad Intersection Observer LazyLoad avec IntersectionObserver API pour images, picture, iframe, etc.
    • Design, flux et accessibilité jQuery Responsive layout logical DOM plugin
    • Lightbox Responsive et Accessible Lightbox images jQuery Responsive accessible a11y. Automatisation d'une Lightbox multipages. Lightbox image unique ou multiple. Lightbox responsive et accessible a11y wcag
    • Tooltip (infobulle) a11y Tooltip (infobulle) compatible a11y et SEO, naviguable au clavier, accessible par lecteur d'écran
    • Zipcode patterns Contrôle automatisé de codes postaux internationaux
    • Responsive background-image jQuery responsive background-image plugin
    • Drapeaux ISO 3366 SVG Drapeaux nationaux vectoriels normés ISO alpha 2, alpha 3 et numérotation Organisation des Nations Unies (ONU). SVG drapeaux pour internationalisation de sites multilingues.
    • Layout rigolo Une autre approche pour définir un layout de page responsive.
    • Générateur de noms API de génération de couples prénom/nom aléatoires.
    2020-07-12