J'utilise Raphaël.js pour dessiner quelques petits cercles (rayon 2-4px), ce qui se fait via SVG sur tous les navigateurs sauf IE. Les cercles ne me semblent pas lisses, donc ma question est:Antialiasing, web SVG et Raphaël.js
sur l'expérimentation plus loin, je pense que le problème est pas tant que le SVG n'a pas été anti-crénelé (en effet, je trouve lors de l'élaboration des lignes que je voulais généralement désactiver l'anticrénelage en mettant shapeRendering-crisp-edges, voir this issue) comme que je voulais des bords encore plus lisses sur mes cercles que l'antialiasing fourni.
Pour cela, dans Raphaël.js, vous pouvez définir séparément les couleurs fill et stroke. Par exemple, sur un fond blanc, en réglant le stroke sur une couleur plus claire que le fill, vous obtiendrez l'effet désiré.
la réponse ci-dessous est meilleure (j'ai testé les deux) - ps. Corel utilise la même méthode pour rendre l'objet net comme musefan mentionné –
L'anticrénelage est effectué via le moteur de rendu SVG, vous devez donc regarder le client qui affiche le fichier SVG. Le problème, cependant, est que ce que vous dessinez est trop petit pour être bien anti-aliasé. Si vous avez un cercle de 2px rayon, il est fondamentalement rendu comme un diamant parce que c'est le plus proche que vous pouvez obtenir à un cercle à cette taille. Le premier pixel de rayon est utilisé pour le noyau du cercle, le deuxième pixel est utilisé pour donner un peu d'arrondi, mais il est si petit qu'il ressemble à un diamant.
L'anti-aliasing a besoin de pixels supplémentaires pour fonctionner et ces petites formes ne fournissent pas grand-chose. À moins d'agrandir vos images, elles ne seront pas anti-aliasées.
J'ai trébuché sur ce post tout en cherchant une réponse aussi. Après avoir essayé de définir le trait d'une couleur plus claire, j'ai trouvé que cela rendait le rendu flou.
Cependant, si vous définissez le trait sur "aucun" comme ci-dessous, cela fait une grande différence dans la régularité des bords.
var circle = paper.circle(50, 40, 20);
circle.attr("fill", "#F00");
circle.attr("stroke", "none");
J'ai testé cela dans Safari 6, mais en ajoutant une course anti-crénelage de la même couleur semblait aider:
<polygon fill='blue' stroke='blue' stroke-width='3' stroke-antialiasing='true' … >
SVG semble anticrénelage me ici. Pouvez-vous donner un exemple? Quel navigateur? Et d'autres images SVG (comme sur Wikipédia) sont-elles anti-aliasées? – Ken
Je me demande si le problème est dû au navigateur. – Zeal
N'est-ce pas lié? http://stackoverflow.com/questions/11879836/firefox-not-anti-aliasing-scaled-background-svg – Offirmo