Faites vos propres graphiques et infographies SVG réactifs

Exploiter la puissance des SVG réactifs: améliorer l'expérience utilisateur via le contrôle au niveau du code

Cet article explore comment créer des graphiques vectoriels évolutifs (SVG) plus réactifs et plus réactifs en manipulant directement leur balisage. Nous tirons parti d'un éditeur de texte et d'un panneau HTML de Codepen.io pour l'expérimentation.

Améliorer la propreté et l'efficacité des SVG

Pour les SVG plus propres et plus compacts, les propriétés en ligne répétées doivent être refactorisées en classes CSS, reflétant les meilleures pratiques HTML. Cela améliore la lisibilité, réduit la taille des fichiers et permet une gestion de style centralisée. Par exemple, considérez ces éléments répétitifs <text></text>:

<text> y="430" x="40" style="text-anchor: middle; fill: rgb(103, 102, 102); font-size: 12px;"></text>1960>
<text> y="430" x="118" style="text-anchor: middle; fill: rgb(103, 102, 102); font-size: 12px;"></text>1965>
<text> y="430" x="196" style="text-anchor: middle; fill: rgb(103, 102, 102); font-size: 12px;"></text>1970>

Ceux-ci peuvent être simplifiés à l'aide d'une classe CSS dans la section <defs></defs>:

.y-axis text {
    text-anchor: middle;
    fill: rgb(103, 102, 102);
    font-size: 12px;
}

Les éléments <text></text> deviennent alors:

<text class="y-axis" y="430" x="40">1960</text>
<text class="y-axis" y="430" x="118">1965</text>
<text class="y-axis" y="430" x="196">1970</text>

Cette approche améliore considérablement la maintenabilité du code et réduit la taille du fichier. Des techniques similaires peuvent être appliquées à d'autres éléments répétitifs.

Création de SVG réactifs avec CSS Media Queries

Tirer parti des requêtes multimédias CSS rend les SVG réactifs aux différentes tailles d'écran. Ceci est crucial pour maintenir la lisibilité à diverses résolutions. Par exemple, pour ajuster les tailles de police en fonction de la largeur de l'écran:

@media (max-width: 500px) {
    .label-startrek, .label-starwars {
        font-size: 170%;
    }
    .y-axis text, .x-axis text {
        font-size: 130%;
    }
}

Cela garantit que le texte reste lisible même sur des écrans plus petits. D'autres améliorations, telles que la cachette conditionnellement des éléments utilisant display: none; ou opacity: 0; dans les requêtes multimédias, peuvent améliorer la disposition et la lisibilité à des points de rupture plus petits. Le sélecteur :nth-of-type fournit une approche plus élégante pour cibler des éléments spécifiques.

au-delà de la réactivité de base

Les SVG réactifs s'adaptent non seulement à la taille de l'écran mais aussi à leur position dans une disposition. Ils peuvent redimensionner dynamiquement pour remplir l'espace disponible, ce qui les rend idéaux pour les éléments interactifs et le contenu dynamique. Cela permet de créer des miniatures adaptables ou des graphiques interactifs qui ajustent leur niveau de détail en fonction de l'espace disponible.

Conclusion

En adoptant le contrôle au niveau du code et en utilisant les techniques CSS, les SVG peuvent être transformés en composants très réactifs et conviviaux. L'expérimentation avec Codepen.io et un éditeur de texte est un moyen puissant d'explorer ces techniques et de créer des graphiques dynamiques et adaptables. N'oubliez pas d'incorporer votre CSS final dans la section <defs></defs> du SVG pour les fichiers autonomes et maintenables.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!