Comment convertir une carte SVG US en JPG pour une compatibilité entre navigateurs ?

Conversion de SVG en JPG pour une carte des États-Unis compatible avec plusieurs navigateurs

Imaginez travailler sur un projet Web comportant une carte dynamique des États-Unis avec des couleurs représentant les données. Ce fichier SVG offre un point de départ fantastique, mais les navigateurs IE ne prennent pas en charge SVG. Pour résoudre ce problème, nous pouvons utiliser PHP/GD2 ou PHP/ImageMagick pour convertir la carte SVG au format JPG.

Utilisation de la bibliothèque Imagick

1. Importer la bibliothèque Imagick et chargez le contenu du fichier SVG dans une variable $svg.
2. Définissez un tableau ($idColorArray) mappant les abréviations d'état aux valeurs de couleur hexadécimale.
3. Utilisez une boucle pour appliquer les couleurs d'état en remplaçant les valeurs de remplissage d'origine par les valeurs hexadécimales souhaitées à l'aide d'une expression régulière.
4. Créez un Imagick, lisez-y le contenu SVG modifié et spécifiez la taille de l'image de sortie souhaitée.
5. Configurez le format de l'image (par exemple, "png24" pour PNG, "jpeg" pour JPG) et ajustez la taille de l'image selon vos besoins.
6. Écrivez l'image résultante dans un fichier ou exportez-la sous forme de chaîne base64 pour un affichage en ligne.

Considérations supplémentaires

• Vous pouvez utiliser CSS pour définir des règles de style pour les états individuels, ce qui simplifie la modification des couleurs. processus.
• Si la création de fichiers et la prise en charge étendue du navigateur ne sont pas nécessaires, vous pouvez envisager de manipuler le SVG directement à l'aide de jQuery.

Exemple

L'extrait de code suivant convertit la carte SVG au format PNG à l'aide d'Imagick :

$usmap = '/path/to/blank/us-map.svg';
$im = new Imagick();
$svg = file_get_contents($usmap);

// State color array
$idColorArray = array(
     "AL" => "339966",
    ,"AK" => "0099FF",
    ...
    ,"WI" => "FF4B00",
    ,"WY" => "A3609B"
);

// Update SVG with state colors
foreach($idColorArray as $state => $color){
    $svg = preg_replace(
         '/id="'.$state.'">

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!