PSD vers SVG (raster PNG à l'intérieur) : une fenêtre d'affichage XML autour d'un bitmap aplati, idéale pour l'intégration, pas pour la vectorisation automatique
Ici, le SVG est un wrapper léger : le composite de « fusion visible » Photoshop (souvent PNG) est intégré dans `<image>` avec `viewBox` et largeur/hauteur afin que les wikis, les pages de révision et les documents de composants puissent référencer un type MIME. Les détails des pixels sont toujours limités par le bitmap intégré : un zoom sur les pixels réels semblera en bloc, ce qui n'a aucun rapport avec la « mise à l'échelle vectorielle infinie ». La collaboration nécessite une ligne explicite : il s'agit d'un aperçu ou d'un espace réservé, et non d'une source vectorielle modifiable ; les modifications de copie et de forme appartiennent à PSD, Figma ou Illustrator. Surveillez également le CSP, les liens dynamiques et le poids en ligne : insérer un énorme fichier PNG en base64 dans du HTML peut détruire le TTFB - préférez généralement une URL statique avec empreintes digitales et en-têtes de cache.
Comment utiliser PSD vers SVG en ligne : geler les calques visibles, télécharger, télécharger un SVG qui enveloppe le PNG, comparer les proportions et la netteté avec la vue PSD fusionnée dans un navigateur, puis archiver la version et hacher avec le ticket
- Dans Photoshop, vérifiez les calques visibles vers l'extérieur, la taille des pixels du plan de travail et que le bord long de l'exportation couvre la largeur CSS cible multipliée par le DPR du périphérique ; masquer le balisage de révision. Si le site interdit les images distantes, décidez dès le départ entre les URI de données en ligne et les chemins statiques de même origine afin que la politique de sécurité du contenu ne bloque pas la production.
- Ouvrez le SVG téléchargé directement dans un navigateur et à nouveau dans la page cible via `<img>` ou iframe ; vérifiez que `viewBox` plus la mise à l'échelle CSS ne s'étirent pas de manière inattendue. Zoomez à 200 % : si les petits caractères ou les lignes fines s'adoucissent, augmentez la résolution de fusion ou l'interpolation dans PS ; le shell SVG n'inventera pas de détails.
- Stockez le SVG à côté du PSD source, des notes de paramètres et d'un hachage de fichier dans le même enregistrement de version ; utilisez des URL avec empreintes digitales dans les bibliothèques de composants afin que les caches CDN de longue durée ne continuent pas à afficher une ancienne vignette après les mises à jour de conception.
FAQ PSD vers SVG (raster en SVG, pas de reconstruction de chemin)
Les parties prenantes voient « SVG » et supposent un « remplissage » CSS de style icône ou une chirurgie de chemin : comment tracer une frontière stricte par rapport aux livrables vectoriels réels ?
Indiquez clairement : ce SVG est un wrapper d'aperçu dont le héros réside dans le PNG intégré référencé par `<image>` ; il ne fournit pas de contours vectoriels indépendants ni d'objets texte en direct. L'approvisionnement en vecteurs doit suivre votre système de conception ou votre processus d'exportation de bureau. Sans cette phrase, les équipes front-end le câblent comme un composant glyphe, puis blâment le convertisseur lorsque les couleurs et les traits ne peuvent pas être modifiés.
L'élément semble net sur un ordinateur portable Retina mais doux sur un écran standard ou après l'échelle CSS : cela signifie-t-il que SVG a échoué, ou s'agit-il simplement d'une résolution intégrée par rapport aux mathématiques de mise en page ?
Inspectez « naturalWidth » par rapport à la largeur CSS et à devicePixelRatio, et vérifiez les transformations non entières. Les problèmes sont presque toujours dus à un manque de pixels incorporés ou à un étirement de la mise en page, et non à une syntaxe SVG cassée. A/B par rapport à un PNG exporté à la même taille fusionnée depuis Photoshop pour séparer la résolution source des erreurs de conteneur.
Le PNG intégré doit-il être intégré en base64 ou référencé par une URL ? Quels sont les compromis habituels en termes de performances, de mise en cache et d'hygiène du référencement ?
L'intégration de ballons HTML nuit à la réutilisation du cache et peut endommager le TTFB ; Les fichiers statiques externes à empreintes digitales avec de longs en-têtes de cache conviennent à la plupart des intégrations de sites. Réservez base64 pour les minuscules badges, les archives strictes à fichier unique ou les paquets de type courrier électronique où une deuxième demande est impossible. Ne déposez jamais silencieusement un aperçu de plusieurs mégaoctets dans l'en-tête du document.
Problèmes de sécurité ou de conformité concernant les scripts et les chargements à distance : comment décrire le modèle de menace pour ces SVG raster et renforcer la livraison ?
Les sorties bien formées doivent être statiques `<svg>` plus `<image>` sans `<script>` ou entités externes ; exécutez toujours des analyses de politique, bloquez les téléchargements non fiables à partir de chemins chauds et hachez les versions gelées. Si les utilisateurs peuvent télécharger des fichiers SVG arbitraires, vous avez besoin d'une désinfection et de listes d'autorisation de balises : votre générateur étant statique n'immunise pas toute la surface du produit.
Ce SVG peut-il être directement imprimé ou imprimé en grand format comme mécanique finale ?
Généralement non : le wrapper cible la collaboration sur écran et la résolution intégrée peut ne pas respecter les règles d'écran de ligne d'impression, de fond perdu, de couleurs d'accompagnement ou d'incorporation de polices. Continuez à appuyer sur les flux de travail TIFF/PDF/Illustrator et étiquetez les tickets « pas un maître d'impression ». L'envoi de ce fichier à un fournisseur sans cette clause de non-responsabilité entraîne des combats coûteux en matière de remplacement et de responsabilité.