Sujet Précédent Sujet Suivant

Probleme d'affichage de pictos svg en background en ligne

Résolu/Fermé
yoram7792 Messages postés 5 Date d'inscription jeudi 29 mars 2012 Statut Membre Dernière intervention 6 janvier 2014 - 6 janv. 2014 à 01:52
yoram7792 Messages postés 5 Date d'inscription jeudi 29 mars 2012 Statut Membre Dernière intervention 6 janvier 2014 - 6 janv. 2014 à 15:20
Bonjour a tous,
Voila quelques jours que je galere pour faire des pictos svg en background.
En fait cela fonctionne parfaitement en local mais des que je passe en ligne mes background ne s'affichent pas a partir du moment ou mes images sont des svg.
(Si j'utilise du jpg ou du png ca fonctionne en revanche.)
Je souhaite utiliser du svg pour que mes pictos puisse s 'adapter au responsive design.
Bref je commence a etre a court d i'dees.
Pouvez vous m'aider?

Merci d'avance :)

Ps: pour ceux qui me diront: "Utilise le png et les medias queries...", abstenez vous merci, j'utilise deja les media queries mais je veux utiliser le format svg.

Voici mes codes: 

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

		<title>Mon titre</title>
                <link rel="stylesheet" type="text/css" href="styles.css" />
       </head>
       <body>
<nav>
	<ul id="navigation">	
		<li class="sepMenu"><a href="#">Accueil</a></li>
		<li class="toggleSubMenu sepMenu"><a>Articles</a>
			<ul class="subMenu">
				<li><a href="#">Ajouter un article</a></li>
				<li><a href="#">Gestion des articles</a></li>
			</ul>
		</li>
		<li class="toggleSubMenu sepMenu"><a>Pages</a>
			<ul class="subMenu">
				<li><a href="#">Accueil</a></li>
				<li><a href="#">Contact</a></li>
				<li><a href="#">Mon compte</a></li>
			</ul>
		</li>
		<li class="sepMenu"><a href="#">Mon compte</a></li>
		<li class="sepMenu"><a href="#">Gestion des admins</a></li>
		<li class="sepMenu"><a href="#">Règlages</a></li>
		<li class="sepMenu"><a href="#">Developpeur</a></li>
		<li class="sepMenu"><a href="#">Mode d'emploi</a></li>
	</ul>
</nav>
</body>
</html>



#conteneur nav{width:210px;min-height:inherit;margin:46px 0 0 0;background:#242424;position:absolute;left:0;z-index:999;}
/*ul*/
nav ul#navigation {
width:210px;
list-style:none;
border-top:1px solid #404040;
border-bottom:1px solid #404040;}

/*menu ferme*/
nav ul#navigation a, #navigation span {
width:210px;
background:#242424 url('../images/site/spritedd.svg')167px -137px no-repeat;
display:block;
height:43px;
padding:0 20px;
line-height:43px;
color:#fff;
text-decoration:none;}
nav ul#navigation a:hover, #navigation span:hover {
background-color:#444;}
nav ul#navigation .toggleSubMenu a, #navigation .toggleSubMenu span {background:#242424 url('../images/site/spritedd.svg')167px -92px no-repeat;cursor:pointer;}
nav ul#navigation .toggleSubMenu a:hover, #navigation .toggleSubMenu span:hover{background-color:#444;}

/*menu ouvert actif*/
nav ul#navigation .open a, #navigation .open span {background-color:#0daaed;}
nav ul#navigation .open a:hover , #navigation .open span:hover {background-color:#0daaed;}

/*sous menu*/
nav ul#navigation ul.subMenu a{
height:40px;
line-height:40px;
background:#fff;
color:#999;
border-right:4px solid #ddd;
border-top:1px solid #ddd;}
nav ul#navigation ul.subMenu a:hover{
background:#f6f6f6;
color:#ef1548;}


Pour precision j 'ai essaye d'ajouter ces lignes a mon .htaccess:

AddType image/svg+xml svg
AddType image/svg+xml svgz

Et j ai essaye aussi de faire mes background ainsi: 

background-image: url('../images/site/spritedd.svg');
background-size:cover; background-size:100px 100px;
background-repeat:no-repeat;
background-position: ***px ***px; /*C'est une sprite donc la position varie*/
A voir également:

3 réponses

Réponse 1 / 3
animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 738
6 janv. 2014 à 06:58
salut

essaie de faire une page de test en html5 avec ton sgv intégré a la page avec la balise <sgv> et affiche avec firefox ou chrome récent

si ca affiche local et distant pour le css c un problème de chemin ou de nom de fichier

sinon essaie ca dans ton htaccess

AddType image/svg+xml svg svgz
AddEncoding gzip svgz

après peu être que le serveur distant refuse svg
4
yoram7792 Messages postés 5 Date d'inscription jeudi 29 mars 2012 Statut Membre Dernière intervention 6 janvier 2014 1
6 janv. 2014 à 13:35
Merci pour tes propositions animostab,
j' ai fini par trouver la solution et tes conseils m'ont indirectement aide a trouver celle ci.
Merci encore et a plus :)
0
Réponse 2 / 3
yoram7792 Messages postés 5 Date d'inscription jeudi 29 mars 2012 Statut Membre Dernière intervention 6 janvier 2014 1
6 janv. 2014 à 15:20
Rectification apres plusieurs essais c 'est la reponse d'animostab qui est correct et non la mienne juste en dessous de la sienne.
C est bien le .htaccess

AddType image/svg+xml svg svgz
AddEncoding gzip svgz
1
Réponse 3 / 3
yoram7792 Messages postés 5 Date d'inscription jeudi 29 mars 2012 Statut Membre Dernière intervention 6 janvier 2014 1
6 janv. 2014 à 13:33
C'est bon je viens de resoudre mon probleme.
J'avais cree le svg a partir d'illustrator.

Il se trouve qu'illustrator rajoute quelques lignes dans le document svg qui pose un probleme des que l on passe en ligne.

Voici les lignes que j ai retire en debut de document: 

<?xml version="1.0" standalone="no"?>
<!-- Generator: Adobe Illustrator 15.0.0, SVG Export Plug-In  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">


Merci a tous ;)
0

Discussions similaires

Statut « en ligne » alors que non
GgBono -
Slickk -

1 réponse
On me voit connecté sur facebook alors que je n'y suis pas
MrTheMolode -
lily -

5 réponses
Connaissez-vous un simulateur de coiffure gratuit ?
rara-wow -
louloute fan de coiffe -

7 réponses
Que veut dire "correspondant occupé" lors d'un appel ?
veroaaa -
mamybigoud68 -

9 réponses