Le constat

Il arrive parfois que l'installation d'un CMS complet comprenant une base de données, une zone d'administration, un contrat de maintenance et avec une prise en main parfois complexe, pour seulement quelques pages, ne soit pas nécessaire. La simplicité a souvent du bon. Mais, la possibilité d'effectuer facilement des modifications ciblées sur un site vitrine/statique est un atout non négligeable.

Le compromis du MiniCMS

Il permet de modifier simplement et aisément certains contenus textuels (prédéfini à l'avance) d'un site web statique. Il est facile à utiliser et à prendre en main sans besoin de formation.

• Fonctionne sans base de données
• Volontairement minimaliste
• Gestion de texte brut uniquement
• Permet la modification de blocs de contenu
• Permet l'ajout, la suppression et la réorganisation d'éléments
• Possibilité de gérer des liens
• Compatible mobile
• Possibilité d'implémentation sur des sites web pré-existant (sous réserve de compatibilité technique)

Pour quels usages ?

Cette solution s'adresse avant tout aux petites entreprises, artisans ou commerçants qui n'ont pas de mise à jour fréquente à effectuer : instituts de beauté, salon de coiffure, restaurant, restauration rapide, artisans du bâtiment, artisanat, hébergement touristique, etc.

Quelques exemples de contenus modifiables :

• Menu ou carte d'un restaurant
• Liste de prestations
• Horaires d'ouverture, vacances ou annonce
• Grille tarifaire

Regarder la vidéo sur YouTube

Un web mature et plus complexe

Passé d'un quasi-artisanat en 2006, la conception de site web devient une discipline d'ingénierie : plus de complexité, plus de compétences - performance, accessibilité, sécurité, etc.

• Les CSS ont mûri, au point de se rapprocher d'un langage de programmation.
• Tailwind ou Bootstrap, Vue.js ou Angular - de nombreux frameworks sont apparus, pour le meilleur et pour le pire (dont une certaine uniformité). Pourtant, le parti pris de la conception en langages natifs limite les dépendances et assure une plus grande universalité des projets dans le temps.
• Les performances et les Core Web Vitals sont devenus la norme.
• L'accessibilité s'intègre peu à peu dans les projets, même si son adhésion reste très lente.
• On peut regretter la généralisation des builders qui produisent un code assez immonde, on se croirait revenu au temps de FrontPage ou DreamWeaver.

L'IA joue les trouble-fête

Arrivé en trombe il y a à peine quelques années, l'IA s'immisce désormais dans tous les processus créatifs et techniques : code, graphisme, design, tests, etc. Mal utilisée, cela produit du code peu propre et des sites web bancals. Bien utilisée, elle augmente la productivité, la créativité tel un assistant infatigable. Le futur se jouera sur l'expérience et l'expertise.

La passion et le futur

La passion est essentielle, c'est le moteur qui fait vibrer le web. Et le futur s'annonce stimulant à tout point de vue : plus la complexité augmente, plus l'innovation constante et l'expertise deviennent nécessaires.

Intégration dans le flux de production

Passer de la découverte à l'intégration dans les méthodes de travail n'est pas chose aisée. Outre le fait que la sortie de nouveaux modèles et de nouvelles IA est fréquente, l'assimilation efficace au quotidien peut prendre du temps : tests, vérifications, qualité, modification des processus de création, etc. Il faut souvent faire un bilan régulier : quelle réelle plus-value ? Quelle amélioration de la productivité ou de la qualité ?

Des images (encore) très marquées

Première application des IA génératives, la création d'image s'améliore progressivement. Pour ce qui est du design, elles peuvent servir de base de travail et éviter un long processus de réflexion et d'essais. Parfait pour tester rapidement des idées ou servir de support à une vectorisation. À noter que les IA génératives sont très performantes dans les "associations de couleurs".

Pour les images de type "photo réaliste", le résultat reste encore fréquemment très marqué. Il faut régulièrement retoucher la colorimétrie, sans compter les hallucinations qui persistent parfois, en particulier sur les yeux.

Un exemple de "photo réaliste" générée par 3 IA différentes et qui utilisent le même prompt, il s'agit d'une photo destinée à réaliser des mockup.

Le vrai problème vient de l'uniformisation des images, elles ont tendance à toutes "se ressembler", c'est assez flagrant sur les réseaux sociaux et maintenant sur des affiches ou des illustrations. En réalité, les images générées par IA présentent souvent des caractéristiques similaires : mêmes palettes de couleurs, mêmes compositions, même esthétique "lissée".

Code : après l'euphorie, la désillusion

L'intelligence artificielle est très efficace dans le codage : en l'utilisant comme métamoteur de recherche, on évite des longues heures de recherche dans la documentation, ou sur des forums spécialisés. L'inconvénient, c'est de ne pas réellement comprendre ce que l'on fait, avec tous les risques que cela pose en termes de qualité, de sécurité et de maintenabilité du code. Aujourd'hui, on arrive à un point ou des codeurs sont embauchés pour réparer les erreurs commises par l'IA.

La question du vibe coding

Avec le vibe coding, on touche à l'expérience extrême : coder des sites web ou des applications sans rien n'y connaître (c'est-à-dire sans relire le code, le corriger, l'implémenter, le tester...). Ce genre de projet tourne quasi systématiquement à la catastrophe.

Des avantages indéniables

L'usage de l'IA, dans un process bien encadré, permet d'accélérer la productivité : résumé de contenu et rédaction de texte, génération d'images, qui peuvent servir d'ébauche, ou être utilisées comme base de travail. Codage plus rapide : snippets ou recherche de bug. Accès à l'apprentissage et à des domaines d'expertises plus élevés.

Les inconvénients et risques à long terme

• Uniformisation : c'est déjà flagrant sur les images, mais aussi sur les textes ou le code. L'homogénéisation des contenus provoque une réelle menace pour l'identité de marque, et la différenciation devient plus difficile. Reproduire la complexité et la nuance, n'est pas chose aisée. Pour le code, cela pourrait aller jusqu'à un appauvrissement des écosystèmes et à des vulnérabilités plus fréquentes.
• Perte de compétence : à force d'utiliser l'IA, les développeurs pourraient perdre des compétences ou de l'expertise. Savoir coder avant d'utiliser l'intelligence artificielle constitue une condition préalable incontournable. Cela pourrait être pire avec les nouvelles générations, biberonnées à ChatGPT durant toutes leurs études !
• Dépendance : être accoutumé à un outil devient problématique si l'on ne conserve pas le savoir-faire humain. En cas de dysfonctionnement, tout est bloqué !

À cela s'ajoute le manque de données pour l'entraînement des IA (elles ont déjà "digéré" tout ce que l'humain a produit) et le contenu de masse généré automatiquement commence à "polluer" le web.

Conclusion

Il y a fort à parier que l'IA, comme tous les outils précédents, finissent par s'intégrer dans les processus de production en conservant un certain équilibre : automatiser et accélérer la conception, tout en préservant l'expertise humaine pour la créativité, la stratégie et l'innovation. Utiliser l'intelligence artificielle comme un copilote, et non en remplacement de la compétence humaine.

Les CSS ont énormément évoluées ces dernières années et intègre en natif et avec un large support beaucoup de fonctionnalité Sass. Outre, la suppression à une dépendance pour la compilation, l'utilisation des standards natifs offre une meilleure maintenabilité pour le futur. Quelques éléments de base pour effectuer la transition de Sass vers Vanilla CSS en douceur !

Les Variables

Déjà largement utilisées, les variables sont aisément implémentables, même s'il ne faut pas en abuser. Car, là où Sass remplace les variables par leurs valeurs respectives, ce n'est pas le cas en CSS.

Les variables en Sass

$color-green: #25653B;
$a11y-lineheight: 2.55rem;

main p {
	font-color: $color-green;
	line-height: $a11y-lineheight; 
}

Les variables en CSS

:root {
	--color-green: #25653B;
	--a11y-lineheight: 2.55rem;
}

main p {
	font-color: var(--color-green);
	line-height: var(--a11y-lineheight); 
}

Imbrication ou Nesting

C'est une fonctionnalité extrêmement intéressante et puissante de Sass qui évite des répétitions et une certaine lourdeur du code. Et, bonne nouvelle, cette fonctionnalité est déjà très largement supportée en CSS (plus de 90%).

Imbrication en Sass

.card {
    border: 1px solid #ddd;
	a {
		color: firebrick; 
		&:hover {color: steelblue;}
	}
	p:last-child {margin-bottom: 1em;}
}

Imbrication en CSS

Note : pour l'utilisation du sélecteur "&", vous pouvez vous référer à l'article Imbrication CSS.

.card {
    border: 1px solid #ddd;
	& a {
		color: firebrick; 
		&:hover {color: steelblue;}
	}
	& p:last-child {margin-bottom: 1em;}
}

Les mixins

@mixin couplé à @include permet de définir un style de base réutilisable. Mais le code va être systématiquement réinjecté, ce qui alourdit la feuille de style.

En Sass

@mixin card {
	border: 1px solid #ddd;
	a {
		color: firebrick; 
		&:hover {color: steelblue;}
	}
	p:last-child {margin-bottom: 1em;}
}

.card--home {
  @include card;
  background-color: aliceblue;
}

/* Avec variable */
@mixin card($bg: azure) {
	border: 1px solid #ddd;
	background-color: $bg;
	a {
		color: firebrick; 
		&:hover {color: steelblue;}
	}
	p:last-child {margin-bottom: 1em;}
}

.card--home {
	@include card(aliceblue);
}

En CSS

En utilisant la technique BEM et un sélecteur d'attribut, on arrive au même résultat. Avec, en bonus, un résultat plus léger, le code du bloc n'ayant pas besoin d'être systématiquement réinjecté.

[class^="card"] {	
	border: 1px solid #ddd;
	& a {
		color: firebrick; 
		&:hover {color: steelblue;}
	}
	& p:last-child {margin-bottom: 1em;}
}
.card--home {
	background-color: aliceblue;
}

/* En reprenant l'idée de la variable */
:root {
	--color-bg-card: azure; /* Couleur de base */
}
[class^="card"] {	
	border: 1px solid #ddd;
	background-color: var(--color-bg-card);
	& a {
		color: firebrick; 
		&:hover {color: steelblue;}
	}
	& p:last-child {margin-bottom: 1em;}
}
.card--home {
	--color-bg-card: hotpink; /* Couleur de remplacement */
}

La règle @import

La fonction @import qui permet d'inclure des fichiers est supportée en CSS depuis bien longtemps. Mais, là où Sass importe et compile le contenu des fichiers, ce n'est pas le cas en CSS. Ce qui a pour conséquence d'augmenter le nombre de requêtes auprès du serveur (1 @import = 1 requête). Pourtant, il existe une astuce : lors de la minification, il est possible d'intégrer le contenu des fichiers importés, notamment en utilisant postcss-import (généralement inclut dans les outils de minification) avec un fonctionnement identique à celui de Sass.

Exemple en CSS

/* ==Core */
@import "folder/variables.css";
@import "folder/reset.css"; 

/* ==Utilities & Components */
@import "folder/helpers.css";
@import "folder/skip.css";

Les pseudo-classes :is et :has

Ces pseudo-classes permettent de cibler précisément des éléments et de simplifier l'écriture : fort utile à bien des égards. Le support complet de :is et :has n'est que très récent (Baseline 2023) !

Exemples en CSS

/* Sans les pseudo-classes */
.card h2, 
.card cite {
	background-color: steelblue;
}
/* Avec les pseudo-classes */
.card :is(h2, cite) {
	background-color: steelblue;
}

On cible tous les paragraphes, enfants de la classe .card, qui contiennent la balise cite.

.card p:has(cite) {
	background-color: steelblue;
}

Conclusion

Avec une approche méthodique et une planification soigneuse, le passage de Sass à Vanilla CSS peut être réalisé de manière efficace. Sur des projets extrêmement complexes nécessitant des fonctions spécifiques ou des boucles, cela peut être un peu plus long, car il n'y a pas encore d'équivalent en pur CSS, il faudra, pour cela, réintégrer le code compilé.

Le RGAA français

• Il s'applique aux sites web, applications mobiles, documents bureautiques et au mobilier urbain numérique
• Il comporte 106 critères - précis et documentés
• Le périmètre d'application va des organismes publics (état, collectivités territoriales, etc) aux entreprises privées dont le chiffre d'affaires en France est supérieur à 250 millions d'euros
• Il nécessite une déclaration d'accessibilité, la mention de la conformité en page d'accueil et un schéma pluriannuel
• Des sanctions pouvant aller jusqu'à 20 000 euros
• Il est entré en application (en théorie !)

La norme européenne EN 301 549

• Un champ d'application très large : sites web (y compris les outils d'édition des systèmes de gestion de contenu), applications mobiles, documents bureautiques, système de communication audio et vidéo, dispositifs matériels (bornes interactives, terminaux de paiement, etc), logiciels, documentation et services d'assistance, accès aux services d'urgence
• Des critères et tests spécifiques à chaque champ d'application
• Le périmètre d'application va des organismes publics (état, collectivités territoriales, etc) aux entreprises privées de plus de 10 salariés ou dont le chiffre d'affaires est supérieur à 2 millions d'euros
• Il nécessite une déclaration d'accessibilité pour tous les supports numériques, la mention de la conformité et un schéma pluriannuel
• Des sanctions pouvant aller jusqu'à 50 000 euros
• Entre en application en juin 2025 pour les nouveaux contenus et produits et juin 2030 pour les contenus et produits déjà existants

Conclusion

Le RGAA et la norme EN 301 549 sont tous les deux basés sur les WCAG, mais la norme européenne propose un cadre plus large en contrepartie de plus de flexibilité dans les méthodes d'évaluation. Cette dernière est une référence pour les marchés publics européens.

Après avoir longtemps travaillé avec KNACSS (obsolète depuis), la question d'une base de travail pour mes projets se posait. Construire son propre framework CSS à partir de zéro peut sembler un peu fou, mais le temps investit au départ est largement compensé par la compréhension globale et sa facilité de mise en œuvre dans des projets concrets !

Acquérir des compétences

C'est l'un des premiers avantages : travailler sur ce type de projet permet l'acquisition de compétences spécifiques, une compréhension plus approfondie des subtilités des CSS et une expérience d'apprentissage des plus agréable - sans doute plus intéressante que n'importe quelle formation !

Adapté à vos besoins et votre méthode de travail

Les frameworks existants sont généralistes et prévoient un support large et de nombreux cas de figure (par exemple un système de grille à 12 colonnes, pour ma part, je n'ai jamais dépassé 5) et sont donc souvent plus lourd, même en n'incluant que les composants que vous utilisez.
À titre d'exemple, je n'ai pas ajouté le support de progress que je n'ai jamais employé.

On commence par définir la structure

Vous pouvez vous inspirer de projets existants pour créer votre propre structure (en SASS, Less ou CSS). Généralement, la base se constitue de variables, d'un mini reset, d'une base pour la typographie et l'espacement, sans oublier l'accessibilité.
Une seconde partie se constitue de composants et d'utilitaires comme les formulaires, les tables, un système de grille, etc.
Le but est de rester le plus minimaliste possible et de n'y inclure que ce que vous utilisez régulièrement.

Voici la structure de mon projet en SASS - c'est une méthode parmi d'autre, à adapter selon vos besoins et votre méthode de travail.

/* ==Core */
@import "variables.scss";
@import "reset.scss";  
@import "a11y.scss"; 
@import "layout.scss"; /* Typography & Spacings */

/* ==Utilities & Components */
@import "helpers.scss";
@import "skip.scss";
@import "tables.scss";
@import "pre.scss";
@import "video.scss"; 
@import "alerts.scss";
@import "badges.scss";
@import "details.scss"; /* Details & Summary */
@import "burger.scss"; /* Menu */

/* ==Forms */
@import "forms.scss";
@import "formscheckbox.scss";
@import "formsselect.scss";
@import "formsradio.scss";
@import "formspassword.scss";
@import "buttons.scss";

/* ==Grids */
@import "grids.scss"; /* Grid 2-5 */

/* ==Utilities 2 */
@import "responsive.scss";
@import "print.scss"; 

/* ==Customer Styles  */
@import "customer.scss";

Quelques astuces

• Limiter les couleurs au strict minimum.
• Limiter l'usage des classes et des variables, surtout les variables CSS.
• Séparer au maximum les composants - en regardant le code ci-dessus, vous verrez un fichier séparé pour les champs de mots de passe (que je n'utilise pas sur tous les sites).
• Intégrer l'accessibilité - avec une compatibilité WCAG et RGAA - dès le début de la conception (typographie, contraste, espacement des lignes et des paragraphes, etc).
• Ajouter quelques classes utilitaires de base comme le centrage de textes et le centrage vertical à l'intérieur d'un bloc.
• Ajouter des composants de base que vous utilisez régulièrement comme ribbon, cards, hero section, etc.

Tester et documenter (si besoin)

Créer une page de test incluant tous les composants et différentes variations : bloc de texte, balises h1 à h6, composants de formulaire, boutons, grilles, etc. Vous pourrez ainsi établir une stratégie pour effectuer des tests complets sur différents navigateurs et appareils (ordinateurs, mobiles et même téléviseurs).

Maintenance

Si votre code est bien conçu et structuré dès le départ, la maintenance reste assez faible - généralement 2 ou 3 fois par an : parfois quelques bugs visuels ou l'ajout de nouveautés CSS. Par exemple, j'ai récemment ajouté le support de aspect-ratio pour les vidéos.

Allez plus loin

Si vous souhaitez développer encore un peu plus votre framework, vous pouvez ajouter de nombreux éléments en fonction de vos besoins :

• Boutons de partages.
• Le support étendu du focus.
• Le support des téléviseurs HD et 4K.
• Des templates prêts à l'emploi avec grid-template-areas : articles, galerie d'images, page d'accueil, etc.

Les résultats obtenus avec ChatGPT sont disponibles dans les trois précédents articles, je ne les remets pas ici !

HTML et CSS

Page web avec Bard

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Web Agency Page Template</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header>
    <div class="container">
      <a href="index.html"><img src="logo.png" alt="Logo"></a>
      <nav>
        <ul>
          <li><a href="#">Home</a></li>
          <li><a href="#">About Us</a></li>
          <li><a href="#">Services</a></li>
          <li><a href="#">Contact Us</a></li>
        </ul>
      </nav>
    </div>
  </header>
  <main>
    <div class="container">
      <div class="content-left">
        <h2>About Us</h2>
        <p>We are a web agency that specializes in creating beautiful and responsive websites. We have a team of experienced designers and developers who can help you bring your vision to life.</p>
        <p>We offer a wide range of services, including web design, web development, SEO, and marketing. We are committed to providing our clients with the best possible service.</p>
        <p>If you are looking for a web agency that can help you create a website that will wow your customers, then please contact us today.</p>
      </div>
      <div class="content-right">
        <img src="image.jpg" alt="Image">
      </div>
    </div>
  </main>
  <footer>
    <div class="container">
      <p>Copyright &copy; 2023 Web Agency</p>
    </div>
  </footer>
</body>
</html>

body {
  font-family: sans-serif;
  margin: 0;
  padding: 0;
}

header {
  background-color: #000;
  color: #fff;
  padding: 20px;
}

.container {
  max-width: 960px;
  margin: 0 auto;
}

.content-left {
  width: 60%;
}

.content-right {
  width: 40%;
}

img {
  max-width: 100%;
}

footer {
  background-color: #fff;
  padding: 20px;
}

Un code HTML basique auquel il manque la balise <h1>.
La feuille de style est, elle aussi, ultra-minimaliste : pas de reset, le menu n'est pas en ligne, le contenu est bien adaptable, mais sans marge sur les côtés. Sans compter que les liens du menu sont de couleur bleue sur fond noir, pas très accessible !

Page web avec Claude 2

<!DOCTYPE html>
<html>
<head>
<title>Web Agency Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<header>
  <div class="logo">
    <img src="logo.png"> 
  </div>
  
  <nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Services</a></li>
      <li><a href="#">Portfolio</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
</header>

<div class="content">

  <div class="column-1">
    <h2>Our Company</h2>
    <p>Details about the web agency...</p>
  </div>
  
  <div class="column-2">
    <h2>Our Services</h2>
    <p>Details about services...</p>
  </div>

</div>

<footer>
  <p>&copy; Copyright Web Agency 2023</p>
</footer>

</body>
</html>

/* Responsive layout */
@media (min-width: 768px) {
  .content {
    display: flex;
  }
  
  .column-1 {
    flex: 1;
  }
  
  .column-2 {
    flex: 1;
  }  
}

/* Header */
header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
}

.logo img {
  width: 200px;
}

nav ul {
  list-style: none;
  display: flex;
}

nav a {
  padding: 10px 20px;
  text-decoration: none;
  color: #333;
}

/* Content */
.content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

/* Footer */
footer {
  background: #333;
  color: #fff;
  padding: 20px;
  text-align: center;
}

footer p {
  margin: 0;
}

Le code HTML est tout aussi basique, et les balises <h1> et main sont absentes.
Côté CSS, on est aussi sans reset, le menu est bien en ligne, mais pas adaptable contrairement au contenu

Pour cette première partie, c'est Claude 2 qui gagne, suivi de ChatGPT et de Bard. On est tout de même très, très loin de ce que peut produire un développeur web !

PHP et MySQL

Les formulaires n'ont pas été testés !

Formulaire avec Bard

<form action="save_data.php" method="post">
  <input type="text" name="name" placeholder="Name">
  <input type="email" name="email" placeholder="Email">
  <input type="password" name="password" placeholder="Password">
  <input type="submit" value="Submit">
</form>

<?php
  // Sanitize and validate the input
  $name = htmlspecialchars(trim($_POST['name']));
  $email = filter_var($_POST['email'], FILTER_VALIDATE_EMAIL);
  $password = md5($_POST['password']);

  // Connect to the MySQL database
  $db = new mysqli('localhost', 'root', '', 'my_database');

  // Insert the data into the MySQL table
  $sql = "INSERT INTO users (name, email, password) VALUES ('$name', '$email', '$password')";
  $result = $db->query($sql);

  // Check if the query was successful
  if ($result) {
    echo "The data was successfully inserted into the database.";
  } else {
    echo "There was an error inserting the data into the database.";
  }

  // Close the MySQL connection
  $db->close();
?>

Le code HTML est "minimaliste" : pas d'attribut ID, ni de required, et encore moins de balise label.
Pour ce qui est du code PHP, on est aussi dans le minimalisme et, contrairement à ChatGPT, les variables ne sont pas préparées avec bind_param.

Formulaire avec Claude 2

<form action="form.php" method="post">

  <label for="name">Name:</label>
  <input type="text" id="name" name="name"><br><br>

  <label for="email">Email:</label>
  <input type="email" id="email" name="email"><br><br>

  <label for="password">Password:</label>
  <input type="password" id="password" name="password"><br><br>

  <input type="submit" value="Submit">

</form>

<?php

// Connect to database 
$db = mysqli_connect("localhost", "username", "password", "database");

// Sanitize input data 
$name = mysqli_real_escape_string($db, $_POST['name']);
$email = mysqli_real_escape_string($db, $_POST['email']);
$password = mysqli_real_escape_string($db, $_POST['password']);

// Validate input data
if(empty($name) || empty($email) || empty($password)){
  echo "Please fill all fields";
  exit();
}

if(!filter_var($email, FILTER_VALIDATE_EMAIL)){
  echo "Invalid email format";
  exit();
}

// Insert data into database
$query = "INSERT INTO users(name, email, password) 
          VALUES ('$name', '$email', '$password')";
          
if(mysqli_query($db, $query)){
  echo "Records inserted successfully";
} else {
  echo "ERROR: Could not execute $query. " . mysqli_error($db);
}

?>

Le code HTML est simple et efficace, même si les double <br> font un peu mauvais effet.
Le code PHP fait aussi dans la simplicité. Mais, les variables ne sont pas préparées avec bind_param et le mot de passe n'est pas crypté !

Pour cette seconde partie, c'est ChatGPT qui gagne, suivi de Bard et de Claude 2, même si ce dernier devrait être mis hors-jeu pour ne pas avoir crypté le mot de passe !

Icônes SVG

Icônes SVG avec Bard

<svg width="100" height="100" viewBox="0 0 100 100">
  <path d="M50 0 L50 100 L0 50 L100 50 Z" stroke="black" stroke-width="10" fill="none"/>
</svg>

<svg width="100" height="100" viewBox="0 0 100 100">
  <g fill="none" stroke="black" stroke-width="2">
    <path d="M50 0 L50 100 L0 50 L100 50 Z" />
    <circle cx="50" cy="50" r="30" />
    <path d="M50 50 L70 80" />
    <path d="M50 50 L30 80" />
  </g>
</svg>

En l'état, le code est inutilisable, puisqu'il manque l'attribut xmlns. Mais même en le rajoutant, on obtient absolument n'importe quoi !

Icônes SVG avec Claude 2

<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M18 6L6 18" stroke="black" stroke-width="2"/>
<path d="M6 6L18 18" stroke="black" stroke-width="2"/>
</svg>

<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="3" y="4" width="18" height="18" rx="2" stroke="#555555" stroke-width="2"/>  
<path d="M16 2V6" stroke="#555555" stroke-width="2" stroke-linecap="round"/>
<path d="M8 2V6" stroke="#555555" stroke-width="2" stroke-linecap="round"/> 
<path d="M3 10H21" stroke="#555555" stroke-width="2" stroke-linecap="round"/>
<path d="M7 6H7.01" stroke="#555555" stroke-width="2" stroke-linecap="round"/>
<path d="M11 6H11.01" stroke="#555555" stroke-width="2" stroke-linecap="round"/>
<path d="M15 6H15.01" stroke="#555555" stroke-width="2" stroke-linecap="round"/>
<path d="M7 18H7.01" stroke="#555555" stroke-width="2" stroke-linecap="round"/> 
<path d="M11 18H11.01" stroke="#555555" stroke-width="2" stroke-linecap="round"/>
<path d="M15 18H15.01" stroke="#555555" stroke-width="2" stroke-linecap="round"/>
</svg>

Cette fois, c'est mieux, la croix est bonne, et le calendrier ressemble à un calendrier, même s'il est loin d'être parfait !

Dans tous les cas de figure, ces vectoriels ne sont pas optimisés et devront obligatoirement être retravaillés manuellement. Pour ce qui est des Icônes SVG, c'est ChatGPT qui gagne, suivi de Claude 2. Bard est, lui, hors-jeu !

Et le texte dans tout ça ?

J'ai aussi testé la génération de texte, même si ce n'est pas le but de cet article. J'ai demandé aux 3 IA Générative d'écrire une description pour une fiche produit. C'est Claude 2 qui s'en sort le mieux, le texte est quasiment utilisable tel quel. Suit ChatGPT qui a tendance à faire du contenu dupliqué si on lui demande des variantes. Bard est, lui, franchement assez médiocre.