Affichage des articles dont le libellé est SVG. Afficher tous les articles
Affichage des articles dont le libellé est SVG. Afficher tous les articles
mercredi 5 mai 2010
lundi 21 décembre 2009
Liens SVG : Les recommandations SVG - W3C
Tout sur SVG :
http://www.w3.org/Graphics/SVG/
SGV v.1.1 :
http://www.w3.org/TR/SVG11/
SVG Tiny v.1.2 : pour équipements mobiles
http://www.w3.org/TR/SVGTiny12/
Traduction française de la version 1.0 :
http://www.yoyodesign.org/doc/w3c/svg1/
Les errata :
http://www.yoyodesign.org/doc/w3c/svg1/errata/errata.html
La doctype à inclure pour afficher du SVG :
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
http://www.w3.org/Graphics/SVG/
SGV v.1.1 :
http://www.w3.org/TR/SVG11/
SVG Tiny v.1.2 : pour équipements mobiles
http://www.w3.org/TR/SVGTiny12/
Traduction française de la version 1.0 :
http://www.yoyodesign.org/doc/w3c/svg1/
Les errata :
http://www.yoyodesign.org/doc/w3c/svg1/errata/errata.html
La doctype à inclure pour afficher du SVG :
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
mercredi 4 novembre 2009
Vidéos SVG : Introduction au SVG + Javascript + SMIL
http://code.google.com/p/svgweb/
La musique : Chensington - Revelation
En dessous du titre, vous avez la possibilité de lire ou télécharger le morceau avec cet intitulé : [ Play Track ] [Download - 14.83 MB]
La licence de ce morceau : ici
Un autre lien code in paradise par un des fondateurs Brad Neuberg : ici
croczilla : ici
Sur ajaxian un autre article est rédigé où on voit la puissange du SVG :
http://ajaxian.com/archives/view-source-tutorial-fancy-web-page-using-html5-css-and-svg#more-7553
Tous les articles inhérents à SVG sur le site ajaxian
Dans cette article, il fait remarquer que le site http://emacsformacosx.com/, est exclusivement conçu en SVG. Testé sous Firefox 3.5.4, par contre sous Opera 10, il manque une partie de l'affichage :
Sous Firefox 3.5.4 :
En passant la souris sur le rectangle
Sous Opera 10.0 :
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");
}
vendredi 28 août 2009
jeudi 27 août 2009
Inscription à :
Articles (Atom)
Messages les plus consultés depuis la création du blog
-
Last Man - Clint Mansell - The Fountain OST - piano cover
-
A partie de cette article ci-dessous, vous allez découvrir une application qui est plutôt une librairie : http://ajaxian.com/archives/raphae...
-
http://www.boutsdeplanete.com/portfolio/france/alpes/bdp236.jpg.php http://www.boutsdeplanete.com/portfolio/france/alpes/xj_france_84.jpg.ph...
-
http://www.boutsdeplanete.com/portfolio/islande/D7N_0682.2ccp.jpg.php http://www.boutsdeplanete.com/portfolio/islande/D7N_0673.2ccp.jpg.php ...
-
Suite à l'article que j'ai conçu à l'adresse suivante : http://cleroy61-blog.blogspot.com/2009/09/inkscape-dessins-dossier-reper... -
http://creativecommons.org/licenses/by-sa/3.0/ Vous pouvez copier, distribuer et communiquer cet album au public tant que : 1 - Vous citez l... -
Vous pouvez copier, distribuer et communiquer cet album au public tant que : Vous citez le nom de l'artiste Vous n'en effectuez a...
-
http://cleroy61-blog.blogspot.com http://cleroy61-photographies.blogspot.com Tableau des visites de Mars 2010 Date New Visitors ...
Articles
