svg styling

[Jean-Baptiste-Lasselle]

Je n'arrive pour l'instant pas à modifier comme je le souhaite le positionnement de l'image SVG par rapport au viewBox https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/viewBox

[BorisTherin]

Pour ce que j'en comprend:

comme pour une css background, on peut cibler une partie precise d'une image pour ne render que cette partie (permettant un seul asset pour differents etat d'un bouton par exemple)

le viewbox defini la taille du 'canvas' et sa position de depart, ainsi un rectangle plein de dimension (50,50) occupera tout le rendu svg avec un viewbox='0 0 50 50' , occupera le quart haut gauche avec un viewbox(0 0 100 100) on pourra aussi decaler le rendu vers la gauche avec un viewbox="25 0 50 50", vers le bas avec un viewbox="0 25 50 50"

pour illustrer avec notre logo svg:

<svg version="1.1" 
    xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink" 
    x="0px" y="0px"
    viewBox="0 0 2000 2000" 
    style="enable-background:new 0 0 2000 2000;" 
    xml:space="preserve">

notre SVG a une resolution de 2000px * 2000px, nos paths se 'déplacent' dans cette résolution, (M1364.81,1054.2), si j'ampute la balise svg de son attribut viewport, le browser m'affiche une image vide (ou une portion vide tout le moins).

cela peut surprendre, car le SVG est censcé etre vectoriel, lui assigner des valeures en pixel semble contraire a la logique, cependant, pouvoir intervenir sur ces valeures reste logique coté "frontend", & herité de nos methodes images.

Ensuite SVG ca peut se complexifier a loisir, je pourrais manipuler 2 svg de resolutions differentes dans ma page, dans un 3eme svg & faire fit des differences de resolutions en fixant le viewbox des svg ressources.

je ne sais pas si l'on peut faire des path en % plutot qu'en pixel, mais encore une fois si on souhaite intervenir sur l'echelle, la position, le viewbox sera notre porte d'entrée.

ref: https://www.geeksforgeeks.org/svg-viewbox-attribute/

& pour revenir a nos moutons, qu'est-ce que souhaite exactement a propos de ce logo dans la page ? tu voudrais zoomer un peu ? le baisser ? pour un zoom qui occupera 'correctement l'espace': viewBox="500 500 1000 1000"

[BorisTherin]

exemple de tweaks pour une svg "recadrée" & 100% paramétrable inline via des variables css pour Justin Curieux.01.svg:

<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" 
    xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink" 
    x="0px" y="0px"
    viewBox="500 500 1000 1000" 
    style="enable-background:new 500 500 1000 1000;" 
    xml:space="preserve">
<defs>
    <style type="text/css">
        :root {
            --color-cat-inner: url(#gradientCat);
                        --gradient-cat-cy: 43%;
                        --gradient-cat-cx: 58%;
                        --gradient-cat-fr: 0%;
                        --gradient-cat-primary-color: #ff8001;
                        --gradient-cat-primary-offset: 58%;
                        --gradient-cat-secondary-color: #B45400;
                        --gradient-cat-secondary-offset: 100%;
            --color-cat-stroke: #535353;
            --color-book-inner: #535353;
            --color-book-stroke: #353535;
            --color-page-inner: #cdcdcd;    
        }
        .chat {
            fill: var(--color-cat-inner);
            stroke: var(--color-cat-stroke);
        }
        .couverture {
            fill: var(--color-book-inner);
            stroke: var(--color-book-stroke);
        }
        .page {
            fill: var(--color-page-inner)
        }
    </style>
    <radialGradient cy="var(--gradient-cat-cy)" cx="var(--gradient-cat-cx)" fr="var(--gradient-cat-fr)" id="gradientCat">       
        <stop offset="var(--gradient-cat-primary-offset)" stop-color="var(--gradient-cat-primary-color)" />
        <stop offset="var(--gradient-cat-secondary-offset)" stop-color="var(--gradient-cat-secondary-color)" />
    </radialGradient>
</defs>
<g>
    <!-- CHAT -->
    <path class="chat" 
        d="M1364.81,1054.2c-18.91-44.7-50.44-82.66-90.16-109.49c-39.7-26.84-87.7-42.53-139.18-42.52
        c-11.35,0-20.55,9.2-20.55,20.55c0,11.35,9.2,20.55,20.55,20.55v0c28.75,0,56.03,5.82,80.88,16.32
        c37.27,15.76,69.04,42.14,91.45,75.31c22.41,33.19,35.47,73.07,35.48,116.18c0,28.75-5.82,56.03-16.32,80.88
        c-15.76,37.27-42.14,69.04-75.31,91.45c-33.19,22.41-73.07,35.47-116.18,35.48c-0.2,0-0.4,0-0.6,0
        c23.11-61.53,53.79-182.73-3.35-298.15C1053.71,911.11,902.47,903.7,902.47,903.7c-1.95-78.5,67.07-45.25,56.07-120.15
        c-0.85-5.81-3.43-11.37-7.74-15.34c-8.8-8.11-14.44-22.38-19.33-50.93c-5.87-34.26-79.3-47.97-79.3-47.97
        c4.89-47.48-15.13-69.31-15.13-69.31c-284.5,248.37-185.9,407.62-162.24,564.45c25.9,127.48-5.93,188.74-5.93,188.74
        c-49.05,4.01-49.49,46.82-49.49,46.82h497.48h0c6.51,0,12.72,0,18.63,0c0,0,0,0,0.01,0c0.01,0,0.02,0,0.03,0
        c19.49,0,35.53,0,46.63,0c6.63,0,12.52-3.16,16.27-8.04c11.68-3.04,23.02-6.9,33.96-11.53c44.7-18.91,82.66-50.44,109.49-90.16
        c26.84-39.7,42.53-87.7,42.52-139.18C1384.38,1116.78,1377.42,1083.99,1364.81,1054.2z"/>
    <!-- COUVERTURE LIVRE -->
    <path class="couverture" 
        d="M910.48,860.71L910.48,860.71c-37.52,0-71.44,22.3-86.33,56.74L615.62,1400h133.98l140.46-332.1l11.06-26.17l9.35-22.08
            l9.35,22.08l11.06,26.17l140.46,332.1h133.98L996.8,917.45C981.92,883.01,947.99,860.71,910.48,860.71z"/>
    <!-- PAGES -->
    <polygon class="page" 
        points="910.51,1177.84 816.76,1399.47 839.15,1399.3 910.51,1230.55 981.87,1399.3 1004.24,1399.47"/>
    <polygon class="page" 
        points="910.49,1072.38 771.98,1399.82 794.37,1399.65 910.49,1125.1 1026.61,1399.65 1048.97,1399.82"/>
</g>
</svg>

[Jean-Baptiste-Lasselle]

On a réglé la question