Techniques for Data Visualization on both Mobile & Desktop, by Nadieh Bremer | Visual Cinnamon
▻https://www.visualcinnamon.com
From doing nothing all the way to creating a different chart for mobile and desktop. I’ll share and explain these and many more examples
Time-saving #CSS techniques to create #responsive #images
▻https://medium.freecodecamp.org/time-saving-css-techniques-to-create-responsive-images-ebb1e84f
To Recap
1) Use background-image if your image is not part of the page’s content.
2) Use object-fit if you don’t care about IE.
3) The padded container technique, used by Netflix, works everywhere.
4) In most cases, just add height: auto; in your CSS.
5) If you need fast load times, use srcset to load smaller images on mobile.
Le #plugin #SPIP « Image responsive » d’@arno utilise la méthode Netflix si je ne m’abuse.
A peu de chose près : les images ne sont pas en absolute, c’est le contenant <picture> qui a une hauteur à 0
▻https://www.paris-beyrouth.org/Plugin-SPIP-Image-responsive
Test Your Website at Different Mobile Screen Resolutions
▻http://responsivechecker.net/responsive
Un testeur de rendu « responsive » spécialement bien fourni en modèles de terminaux
Web #design Tricks To Fuel Your Business Growth
▻https://hackernoon.com/web-design-tricks-to-fuel-your-business-growth-22bfad5902ee?source=rss--
Growing a business is not a piece of cake. It requires efforts right from the product creation to growth plans, developing marketing strategies and finally coming up with your website.A well-designed website itself is enough to create a commendable image of your brand/business/service in the mind of the visitors. In addition to that, a good website design will surely make visitors stay longer on your page whereas a bad website design will instantly turn them off.Web Design Tricks to Fuel Your Business GrowthTo begin with, nobody likes to spend time on a site that is slow, ineffective or has an unoriginal design. So, a responsive and interactive website design ranks high when it comes to determining if a brand can be trusted upon or not.Well, that is why it is so crucial to invest in (...)
Responsive Components: a Solution to the Container Queries Problem — Philip Walton
▻https://philipwalton.com/articles/responsive-components-a-solution-to-the-container-queries-problem
This article describes a strategy for using modern web technologies to build responsive components: DOM elements that can update their style and layout in response to changes in the size of their container.
Mouais pas aussi cool que ce que je pensais à la base.
Ça oblige à définir des breakpoints dans le JS en plus en doublon. Et ça oblige aussi à mettre dans le HTML lui-même les éléments qu’on veut observer pour leur rajouter des classes suivant les breakpoints. Du coup impossible de changer de thème sans changer le HTML (chose que l’on cherche à éviter au maximum).
En fait c’est une version/vision du problème…
ça fait quelques temps que je suis ce sujet et y’a pas mal de tendances, celle ci est un exemple… certainement que ça sent plus les habitudes de quelqu’un qui fait des applis mobiles et bosse avec React, du coup le html est plus marqué de toute façon…
Dans les autres tendances et stratégies sur le meme sujet :
Elements queries :
Le draft de la spec proposée :
▻https://tomhodgins.github.io/element-queries-spec/element-queries.html
Un petit tour d’horizon du sujet et de la problématique :
▻https://www.sitepoint.com/responsive-css-patterns-without-media-queries
Un polifyll, intérressant (regarder le src/resizeSensor.js) car a la différence de l’autre on utilise css
▻https://github.com/marcj/css-element-queries
Après synchroniser le js et le css … c’est un peut pour ça que j’ai regardé pour l’insertion des variables dans scss.php, après ne pas y avoir touché depuis 5ans ^^ c’est carrément le but…
Qu’elle classe ce code css ;-)
Responsive Elements - Semantic
▻https://semantic-ui.com/examples/responsive.html
Bon semantic ui est bien connu, plus qu’il n’est utilisé certainement. Mais en retombant dans mes notes, sur cette page, je suis toujours séduis par l’approche de ce code css.
Loin des BEM, et autres méthodes verbeuse et finalement lourdes à rédiger, la on est dans la simplicité, tout semble logique, lisible.
Si on regarde bien comment c’est foutu, on se rends compte que la spécificité des classes est super ciblé, verrouillée, sans pour autant utiliser des classes verbeuse de Block__elm—pod.is-elem-state
tout est dans ::not ou ~= , ^=
un peut comme dans une boucle spip quand on enlève ce qu’on veut pas, pour récupérer ce que l’on veut ^^
L’autre avantage de cette méthode est aussi d’économiser sur les css générées, j’ai fais quelques test et il y’a un gain significatif sur des composant tout bêtes comme des labels, ou icones.
Sauf que bem n’est pas fait par hasard comme ça, d’une ya la cohérence total avec vraiment 100% toujours la même manière d’écrire mais surtout c’est fait pour être le plus rapide possible à exécuter par les navigateurs.
.ui.segments:not(.horizontal) > .segment:first-child est très long à compiler et trouver, c’est méga complexe comme sélecteur.
.segments_vertical .segments__segment:first-child est beaucoup plus rapide
+1 effectivement, la ça mérite des tests réels de temps de rendu navigateur, plutôt qu’une estimation de gain en kbytes transférés.
Quand je vois le pross de mon vieux mac sur une page ou j’ai pas mal d’animations css3, ça peut vite aller dans le rouge suivant comment c’est rédigé. Donc le parcours du dom comme tu le souligne est forcément plus couteux avec des pseudo selector.
Du coup, ça me donne envi de de réfléchir a un suite de test la dessus. En fait j’ai un petite lib qui est inspiré de bem_selectors, en fait ça gère le nomage des selecteurs, mais en fonction de plusieurs conventions … pour le moment SMACSS, OOCSS, BEM, et Rscss …
Pour faire ce genre de test, ça peut être interressant, de prendre une page type, et de générer un rapport de perf entre les différentes méthodologies, vu qu’on peut switcher en changeant une map.
Il y a #Grillade de #KNACSS aussi : ▻https://knacss.com/grillade
Je commence a l’utiliser à la place de celle de #SemanticUI
En fait je n’utilise pas semantic ui, ;-) mais je lis le code de tout le monde, j’aime bien regarder surtout les approches différentes, ça sert toujours un jour, dans une certaine situation ^^.
Au départ je lisais ceci ▻http://bradfrost.github.io/this-is-responsive/patterns.html#layout
et cela ▻https://github.com/oddbird/accoutrement-layout
dans le but de créer un composant/lib scss qui gère tout le layout de manière « générique »… comme on a un support qui commence a être correct de grid et flex, ça simplifie quand même bien le boulot.
Des media queries pour savoir si l’usager en est réduit à viser grossièrement avec ses gros doigts boudinés, ou s’il peut piquer précisément comme une abeille :
Using Media Queries For Responsive Design In 2018 — Smashing Magazine
▻https://www.smashingmagazine.com/2018/02/media-queries-responsive-design-2018
@media (pointer:coarse) {
.which-pointer::after {
content: "You have a coarse pointer, are you on a touchscreen device?";
}
}
@media (pointer:fine) {
.which-pointer::after {
content: "You have a fine pointer, are you using a mouse or trackpad?";
}
}
Avec Mosquito, on vient de livrer le site de la Fondation Custodia :
▻https://www.fondationcustodia.fr
Comme d’habitude, c’est du #SPIP, #HTML5 #responsive et tout ça…
Parmi les points à voir en particulier…
– Un menu hamburger tout mignon.
– Des #longforms pour la présentation des expositions :
▻https://www.fondationcustodia.fr/Georges-Michel
– Dans ces longforms, on peut présenter des collections d’œuvres avec mon raccourci <ligne>, qui présente les images sur une ou plusieurs lignes, en adaptant la taille des images pour occuper la largeur de l’écran :
– Ou avec mon raccourci <slide>, qui présente les documents les uns à côté des autres sur une ligne.
▻https://www.fondationcustodia.fr/Les-portraits-en-miniature-12
Pour rappel, « ligne » et « slide », c’est dans mon #plugin « Insertion avancée d’images », documenté ici :
►http://www.paris-beyrouth.org/Plugin-SPIP-Insertion-avancee-d-images
On trouvera même quelques habillages automatiques de formes irrégulières, toujours avec ce même plugin, et le raccourci <img|shape> :
– Dans les « formes longues », un problème usuel, c’est la navigation verticale « trop » longue, et donc l’utilisation d’une sorte de table des matières pour pouvoir naviguer rapidement. Mine de rien, c’est toujours assez problématique. Là j’ai développé une solution que je trouve bien sympathique, avec une table des matières en haut à gauche de l’écran, qui se plie/déplie, au fur et à mesure du scroll, et au survol, pour indiquer où on est et qui, évidemment, permet de naviguer au clic :
Détail mignon : pour réaliser le graphisme de ce petit menu, il n’y a pas une seule image, c’est entièrement réalisé en CSS.
– Il y a une maquette assez sympa pour la présentation des « Collections », avec des panneaux qui défilent horizontalement (et c’est responsive, la présentation change assez radicalement sur téléphone ou tablette) :
▻https://www.fondationcustodia.fr/les-portraits-en-miniature
– Il y a aussi une présentation avec un « méga-zoom » sur les images, pour la présentation des œuvres des « Catalogues », mais comme le contenu n’est pas encore en ligne, alors je reposterai un message pour que tu ailles voir quand ce sera prêt.
– Quand on clique sur la loupe de recherche, hop un grand pavé recouvre l’écran :
– Enfin, sur ce site, je me suis particulièrement astreint à ce que toutes les animations/interactions/transitions soient autant que possible réalisées sans Javascript. Du coup, on peut naviguer sur le site avec Javascript désactivé, avec un minimum de dégradations (essentiellement : des images responsive qui vont rester en basse définition). Mais le menu hamburger se déploie, avec ses sous-menus animés, comme si de rien n’était ; le système de « table des matières » des longforms fonctionne très bien, avec ses animations au survol, les sliders un peu partout fonctionnent de manière transparente… (et évidemment : des interactions « au doigt » moins riches sans Javascript).
– Enfin la page d’accueil obtient un score de 100/100 sur mobile avec PageSpeed, et 97/100 sur ordinateur, c’est chouette.
À l’intérieur du site, j’ai le plugin Saisies qui me fait chuter la moyenne sur quelques pages, en m’insérant violemment des appels à un fichier CSS et un fichier Javascript (ah, c’est vache !). :-))
Un effet que j’aime bien sur ce site : j’ai mis des dégradés colorés sous les grandes images, pour avoir quelque chose qui s’affiche avant que les images soient chargées.
Ce qui donne par exemple, avant chargement de l’image :
et une fois l’image chargée :
Ce que je réalise directement dans le squelette ainsi :
#image_haut {
background-color: [#(#LOGO_ARTICLE_RUBRIQUE|couleur_extraire)];
background: linear-gradient(to bottom,
[#(#LOGO_ARTICLE_RUBRIQUE|image_proportions{16,9, focus}|couleur_extraire{10,1})] 0%,
[#(#LOGO_ARTICLE_RUBRIQUE|image_proportions{16,9, focus}|couleur_extraire{10,5})] 25%,
[#(#LOGO_ARTICLE_RUBRIQUE|image_proportions{16,9, focus}|couleur_extraire{10,10})] 50%,
[#(#LOGO_ARTICLE_RUBRIQUE|image_proportions{16,9, focus}|couleur_extraire{10,15})] 75%,
[#(#LOGO_ARTICLE_RUBRIQUE|image_proportions{16,9, focus}|couleur_extraire{10,19})] 100%
);
}
#image_haut:before {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
content: " ";
z-index: 1;
background: linear-gradient(to right,
[#(#LOGO_ARTICLE_RUBRIQUE|image_proportions{16,9, focus}|couleur_extraire{1,10})] 0%,
[#(#LOGO_ARTICLE_RUBRIQUE|image_proportions{16,9, focus}|couleur_extraire{5,10})] 25%,
[#(#LOGO_ARTICLE_RUBRIQUE|image_proportions{16,9, focus}|couleur_extraire{10,10})] 50%,
[#(#LOGO_ARTICLE_RUBRIQUE|image_proportions{16,9, focus}|couleur_extraire{15,10})] 75%,
[#(#LOGO_ARTICLE_RUBRIQUE|image_proportions{16,9, focus}|couleur_extraire{19,10})] 100%
);
mix-blend-mode: soft-light;
}
Merci pour cette astuce du fond d’image en dégradé CSS.
J’ai essayé de naviguer au clavier et impossible de dérouler le hamburger :(
@realet Je viens de mettre en ligne une détection du focus en javascript, pour plier ou déplier le menu hamburger selon qu’on est sur un lien dans le menu ou en dehors.
Je fais ceci :
$("#menu_flottant a").on("focus", function() {
$("#afficher_menu").prop("checked", true);
});
$("body > *:not(#menu_flottant) a").on("focus", function() {
$("#afficher_menu").prop("checked", false);
});
How to make your HTML responsive by adding a single line of #CSS
▻https://medium.freecodecamp.org/how-to-make-your-html-responsive-by-adding-a-single-line-of-css
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
Titre un peu racoleur mais tout de même intéressant.
#grid
A Brief Overview On #Responsive #Navigation Patterns
In this article, I want to look specifically at the issue of responsive navigation. We will first talk about information architecture, then the purpose of navigation, and finally we will look at three responsive navigation patterns that have served well over time.
▻https://www.smashingmagazine.com/2017/04/overview-responsive-navigation-patterns
▻https://bradfrost.github.io/this-is-responsive/patterns.html#navigation
XRespond – Virtual Device Lab
I came across Matt Kersley’s Responsive Web Design Testing Tool ▻http://mattkersley.com/responsive and was blown away. It cut my development time in half. Even though the app was quite basic, it quickly became indispensable, and I continued to use it for several years.
It was very much to my surprise that I never saw this brilliant concept taken any further. This, combined with the lack of features, set me on a journey to create the open-source virtual device lab XRespond.
via ▻https://www.smashingmagazine.com/2017/09/xrespond-building-responsive-websites-simpler
#responsive #outil #test
Effectivement, une fois lue ça coule de source… la majorité des utilisateurs mobile utilisant leur pouce pour naviguer, la plupart des menus mobiles sont donc mal placés. Plus la taille de l’écran est grande moins la zone d’utilisation couverte par les mouvements du pouce est importante. En prenant en compte les gauchers et droitiers, on isole donc une zone idéale ou les éléments sont accessibles dans la majorité des cas.
▻http://uxmovement.com/mobile/why-mobile-menus-belong-at-the-bottom-of-the-screen
#Fluid #Responsive #Typography With #CSS Poly Fluid Sizing
▻https://www.smashingmagazine.com/2017/05/fluid-responsive-typography-css-poly-fluid-sizing
Fluid layouts have been a normal part of front-end development for years. The idea of fluid typography, however, is relatively new and has yet to be fully explored. Up until now, most developers’ idea of fluid typography is simply using Viewport units maybe with some minimum and maximum sizes.
That’s called a trendline. It’s a way to find an interpolated font-size value for any viewport width, based on the data provided.
The are several methods for determining the slope and y-intercept. When multiple values are involved, a common method is the Least Squares fit:
You can use the trendline equation like this:
h1 {
font-size: calc({slope}*100vw + {y-intercept}px);
}
Once you find your slope and y-intercept you just plug them in! Ya des gens qui sont pétés du bulbe quand même. :D
Et une preuve de plus que le métier d’intégrateurice n’a rien à envier en complexité aux devs « backend ». :)
Ouais, alors bon, faut quand même un petit niveau de math !
J’ai calculé ma pente, mais le y-intercept, c’est autre chose... c’est quoi les Y et X avec une barre dessus dans cette formule :
Note pour plus tard : penser à mieux écouter les cours de math...
Accessibility in a Responsive World
▻https://www.filamentgroup.com/lab/accessibility-funka.html
#slides_a11y_RWD_clevermarks
RÖCSSTI : le micro-framework CSS qui a la patate !
►https://rocssti.net
Un framework CSS minimaliste, simple, très léger et customisable à souhait. Conçu pour les sites responsive, avec en particulier une grille en em.
Basé sur des conventions de nommage des classes (noms courts et explicites) + une méthode de rangement des éléments.
Inclu des versions SASS et LESS, propose un générateur pour ceux qui n’utilisent pas de pré-processeur CSS.
Basé sur le reset CSS de Tetue et recycle plusieurs éléments de Knacss
Les lignes directrices : ▻https://rocssti.net/guideline-rocssti-css
Le code complet commenté : ▻https://rocssti.net/code-css-commentaires-rocssti
Typographic Email
This is a #responsive #email template that is optimized for readability. This is used in my project - EmailThis. I created it because I needed a simple, minimal yet beautiful email template that focusses specifically on readability.
source : ▻https://github.com/EmailThis/typographic-email
démo : ▻https://rawgit.com/EmailThis/typographic-email/master/dist/kitchen_sink.html
À intégrer dans le plugin Newsletter de #SPIP ?
Intégré dans la version 1.5.1 du plugin Newsletter cf : ▻https://zone.spip.org/trac/spip-zone/changeset/103048
Voilà ce que ça donne :
La #population néerlandaise. Un point = une personne !
https://www.cbs.nl/-/media/_afbeeldingen/2017/02/dotmap2.png?la=nl-nl&hash=C718DF78BEB695A35DC78647ADD32C9AF4553B86#.png 
https://www.cbs.nl/-/media/_afbeeldingen/2017/02/dotmap1.png?la=nl-nl&h=450&w=900&hash=CA5C1FCF20369C481385CD598B110C13F4262CD6#.png il faut zoomer pour le voir :
Herkomst Dot Map
▻http://research.cbs.nl/colordotmap/NL/index.html
explications ici (en néerlandais)
▻https://www.cbs.nl/nl-nl/onze-diensten/innovatie/project/cbs-experimenteert-met-dotmaps
(dans le même ordre d’idées)
Responsive Data Vis
▻http://nrabinowitz.github.io/rdv
This is a small prototype of an approach to #responsive #data #visualization, using D3.js and a mini-library called rdv. The basic concept is to construct a visualization as a collection of features, then turn those features on and off based on the ratio of points to pixels.
réalisé par l’Insee local, le Centraal Bureau voor de Statistiek (CBS)
il faut zoomer pour le voir :
Et le croire.
on discute avec @severo de faire une carte mondiale sur ce principe, en incluant les données disponibles comme par exemple
– pour l’Inde ▻https://seenthis.net/messages/561805
– quand on se sait pas grand chose, extrapoler à partir de ▻https://visionscarto.net/implantation-humaine
#eqcss • Element Query #css | Scoped CSS, Meta-Selectors, Element Queries
▻http://elementqueries.com
Element queries are a new way of thinking about #responsive web design where the responsive conditions apply to elements on the page instead of the width or height of the browser. Unlike CSS @media queries, #@element Queries are aware of more than just the width and height of the browser, you can write responsive conditions for a number of different situations like how many characters of text or child elements an element contains. Another concept that element queries brings to CSS is the idea of ‘scoping’ your styles to one element in the same way that JavaScript functions define a new scope for the variables they (...)
On a livré aujourd’hui le site de l’OPPIC (L’Opérateur du patrimoine
et des projets immobiliers de la Culture) :
▻http://www.oppic.fr
Évidemment, #SPIP, #HTML5 et #responsive, avec Mosquito.
Les principales originalités :
– le système de recadrage « intelligent » (souvent qualifié de « direction artistique »), avec mon #plugin Centre image : on indique avec une petite croix dans l’espace privé le centre d’intérêt de l’image, et ensuite les recadrages responsive de l’interface publique se font autour de ce point (et non systématiquement au centre de l’image comme on fait usuellement) ; au passage : les grands logos changent beaucoup de proportions selon les proportions de l’écran (vertical/horizontal, et taille) ;
– les pages « projets » :
▻http://www.oppic.fr/article76.html
avec deux colonnes qui scrollent à des vitesses différentes (selon la taille de l’écran), et des raccourcis et des outils pour fabriquer différents cadres (pavé foncé en haut à gauche avec les mentions des architectes, maîtres d’œuvre…), un pavé avec les budgets (et système de « gros » chiffres, et dans le texte des petits pavés avec les prestataires…
– des #longforms (formes longues) :
►http://www.oppic.fr/rubrique18.html
avec mes outils permettant d’installer des images qui se fondent sous le texte, et une collection complète de modèles de texte (une, deux, trois, quatre colonnes, etc.).
Bonjour
Super et merci pour le partage :) ça m’a permis de découvrir Photoswipe que je ne connaissais pas et qui va me rendre bien service pour un nouveau projet.
Un petit truc : dans le title du href des images : Ecole d’architecture de Strasbourg. Chantier au 4 juin 2013. ©Bob Fleck - <span class="caps">OPPIC</span> , le span class="caps" n’est pas interprété...
Bonne nouvelle année à tous
Cilou
Resilient Web Design—Introduction
►https://resilientwebdesign.com
With a title like Resilient Web Design, you might think that this is a handbook for designing robust websites. This is not a handbook. It’s more like a history #book.
(…)
But in the world of #web_design, we are mostly preoccupied with the here and now. When we think beyond our present moment, it is usually to contemplate the future—to imagine the devices, features, and interfaces that don’t yet exist. We don’t have time to look back upon our past, and yet the history of web design is filled with interesting ideas.
effectivement c’est jolie. Est-ce que vous savez quelle typo est utilisé dans les chapitres ?
une analyse de l’émergence de l’hypertexte : considérations historiques, techniques et philosophiques, références nombreuses, bref : indispensable !
(une traduction en français serait la bienvenue...)
For instance, what should the Line Mode Browser do when it encounters an HTML element it doesn’t understand, such as NEXTID? The answer can be found in the sparse documentation that Tim Berners‐Lee wrote for his initial collection called HTML Tags. Under the heading “Next ID” he wrote:
Browser software may ignore this tag.
Web designers would do well to remember what the advertising industry chose to ignore: on the web, the user has the final say.
Platforms are controlled and predictable. The World Wide Web is chaotic and unpredictable.
The web is a hot mess.
The trick is identifying what it is considered core functionality and what is considered an enhancement.
1. Identify core functionality.
2. Make that functionality available using the simplest possible technology.
3. Enhance!
#hypertexte #histoire #HTML #Tim_Berner_Lee #Resilient_Web_Design #CSS #javascript #zen_garden #responsive #web_design #ajax #web_app #progressive_enhancement
#free #responsive Mobile Website #templates Designs - w3layouts.com
▻https://w3layouts.com/page/2
Free Responsive Mobile Website Templates
The 100% correct way to do #CSS #breakpoints
600px, 900px, 1200px, and 1800px if you plan on giving the giant-monitor people something special.
▻https://medium.freecodecamp.com/the-100-correct-way-to-do-css-breakpoints-88d6a5ba1862
Mouais.
100% correct c’est un peu péremptoire.
Je n’utilise jamais de breakpoints standards, je les définis toujours par rapport aux contenus d’un site.
▻http://bradfrost.com/blog/post/7-habits-of-highly-effective-media-queries
So where should you insert breakpoints? Follow Stephen Hay’s advice:
“Start with the small screen first, then expand until it looks like shit. Time for a breakpoint! –Stephen Hay”
C’est ce que je pratique, sauf que je ne travaille pas mobile first, donc je pars d’une résolution large, que je réduis.
Quand ça pète -> breakpoint.
Oui, c’est ce que pointe le premier commentaire :
This makes more sense than the counter example but it definitely not the 100% correct way. Ideally you want to choose your break points around your content and design, not around devices. This year’s devices are different than last year’s and different than next year’s. Resize your window — when the layout breaks or stops makings sense you have a break point. Devices should have no voice in this decision.
Le plus intéressant dans l’article est certainement cette partie :
https://cdn-images-1.medium.com/max/2000/1*XoDgRc5GXaxo7j47ClsIgw.png 
https://cdn-images-1.medium.com/max/2000/1*cZcTR2tVMzYg1U1h3cqdNg.png 
https://cdn-images-1.medium.com/max/2000/1*RZryP0xAyOy1_WRpBdPIog.png that’s basically what you’d be doing if you set your breakpoints at positions matching the exact width of popular devices (320px, 768px, 1024px).
...
I think we mix up “boundaries” and “ranges” in our discussions and implementations of breakpoints.
Reframe.js
▻https://dollarshaveclub.github.io/reframe.js
Reframe.js removes a specified element’s height & width attributes & then wraps that element in #responsive div that is an intrinsic ratio of the original element. This plugin is meant for embedded content like #iframes or #videos .
référencé dans l’article :
- « How to Scale SVG » ▻https://css-tricks.com/scale-svg pour les différences de mise à l’échelle d’un SVG en fonction du mode d’inclusion dans le HTML
- « Understanding SVG Coordinate Systems and Transformations » ▻https://sarasoueidan.com/blog/svg-coordinate-systems pour les subtilités d’utilisation des attributs viewport, viewBox, et preserveAspectRatio
avec une interface de démo et une « cheatsheet » pour ces attributs sur ▻https://sarasoueidan.com/demos/interactive-svg-coordinate-system/index.html