Question : Quel est la particularité de cette image ?
Réponse : C'est un programme et non une image enregistrée en format Jpeg, png, gif ou autre format ! Etonnant, non ? elle est enregistrée en SVG (Scalable Vector Graphics), soit des données pour décrire une des graphiques vectoriels et ce même SVG est basé sur du XML.(Extensible Markup Language)
Bravo à son auteur ! Chrisdesign
Désolé, mais avec mon blog à fond sombre, on n'apperçoit très peu les ombres du dessous.
Affichage des articles dont le libellé est Programme SVG. Afficher tous les articles
Affichage des articles dont le libellé est Programme SVG. Afficher tous les articles
vendredi 18 mars 2011
mardi 3 novembre 2009
Programme SVG : Cercle avec feuille de style
Configuration dans un seul fichier ; Ouvrir notepad++ et enregistrez ce fichier en, le-nom-que-vous-voulez.xml
<svg html="http://www.w3.org/1999/xhtml" xmlns="http://www.w3.org/2000/svg">
<style><br /> circle:hover {fill-opacity:0.9; stroke-width:2mm;}<br /></style>
<g style="fill-opacity:0.7; stroke:black; stroke-width:0.1cm;">
<circle cx="6cm" cy="2cm" r="100" fill="red" transform="translate(0,50)">
<circle cx="6cm" cy="2cm" r="100" fill="blue" transform="translate(70,150)">
<circle cx="6cm" cy="2cm" r="100" fill="green" transform="translate(-70,150)">
</g>
</svg>
Ou de manière à séparer le contenu de l'agrémentation ; Ouvrir notepad++ et enregistrez ce fichier en, le-nom-que-vous-voulez.xml :
<?xml version="1.0"?>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:svg="http://www.w3.org/2000/svg" >
<head>
<title>Agremente SVG avec CSS</title>
<link rel="stylesheet" type="text/css" media="screen" href="feuille-de-style-cercle.css" />
</head>
<body>
<h1>Agremente SVG avec CSS</h1>
<svg:svg width="12cm" height="12cm">
<svg:g>
<svg:circle cx="6cm" cy="2cm" r="100" style="fill:red;" transform="translate(0,50)" />
<svg:circle cx="6cm" cy="2cm" r="100" style="fill:blue;" transform="translate(70,150)" />
<svg:circle cx="6cm" cy="2cm" r="100" style="fill:green;" transform="translate(-70,150)" />
<svg:rect x="0" y="0" width="12cm" height="12cm" />
</svg:g>
</svg:svg>
</body>
</html>
Vous constaterez un lien par la balise link où se situe le nom du fichier de la feuille de style : feuille-de-style-cercle.css :
circle {
fill-opacity:1; stroke-width:6mm;
}
circle:hover {
fill-opacity:0.5; stroke-width:2mm;
}
rect {
fill:none;
stroke:black;
stroke-width:1;
}
g {
fill-opacity:0.7; stroke:grey; stroke-width:0.1cm;
}
@font-face {
src: url(e:/windows/fonts/GenR102.woff) format("woff"),
url(e:/windows/fonts/GenR102.ttf) format("truetype");
}
h1 {
font-family: Gentium;
}
Pour terminer ouvrez ces deux fichiers dans votre navigateur (Opera, Firefox ou autres) ; Le cercle bleu dont on remarque une baisse de son opacité, est le fait du passage de ma souris sur le cercle.
Dans ce billet, http://hacks.mozilla.org/2009/10/woff/, on nous informe les défauts d'IE8, à savoir qu'il supporte le format .eot et non le .woff:
@font-face {
font-family: GentiumTest;
src: url(fonts/GenR102.eot); /* for IE */
}
@font-face {
font-family: GentiumTest;
/* Works only in WOFF-enabled browsers */
src: url(fonts/GenR102.woff) format("woff");
}
Inscription à :
Articles (Atom)