Partage
  • Partager sur Facebook
  • Partager sur Twitter

Modifier la taille d'un logo au format .svg

C'est possible ? Avec CSS ?

18 septembre 2015 à 10:37:23

Bonjour, 

Je souhaiterais savoir s'il est possible de modifier la taille d'un logo au format .svg en utilisant du CSS ? 

Mon logo (une maison qui fera office de bouton accueil), fait à la base 20px*20px. Je souhaiterais l'agrandir à 60px*60px. 

Comment faut-il s'y prendre ? 

Merci d'avance !

  • Partager sur Facebook
  • Partager sur Twitter
18 septembre 2015 à 11:04:37

Salut, 

tu peux ajouter une valeur width et height de 60px dans ton code. 

Bonne continuation 

  • Partager sur Facebook
  • Partager sur Twitter
Tu cherches un graphiste, développeur ou tu veux proposer tes services ? Va vite sur pixelads.fr !
18 septembre 2015 à 12:06:56

Salut,

Agrandir une image n'est jamais une bonne solution. Tu vas perdre en qualité d'image.

Il vaut mieux dans ce cas là prendre une autre image ou aller redimensionner ton image via un logiciel. 

  • Partager sur Facebook
  • Partager sur Twitter
18 septembre 2015 à 12:18:42

@jusle agrandir un bitmap est généralement une mauvaise idée. SVG est vectoriel.

  • Partager sur Facebook
  • Partager sur Twitter
Ce n'est pas parce que vous ne savez pas vous servir d'un marteau qu'il faut planter des clous au tournevis.
18 septembre 2015 à 13:10:06

@Qlesd Je te poste mon code, j'ai une class pour ce logo. Je dois ajouter un terme spécifique comme "path" ?

Merci ! 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <link rel="stylesheet" href="style.css" />
        <title>Site Web</title>
    </head>

    <body>
            <header>

                <nav>
                    
                    <ul>
                        <li><a href="#"><svg class="accueil" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20" viewBox="0 0 20 20">
                        <path fill="#000000" d="M19.871 12.165l-8.829-9.758c-0.274-0.303-0.644-0.47-1.042-0.47-0 0 0 0 0 0-0.397 0-0.767 0.167-1.042 0.47l-8.829 9.758c-0.185 0.205-0.169 0.521 0.035 0.706 0.096 0.087 0.216 0.129 0.335 0.129 0.136 0 0.272-0.055 0.371-0.165l2.129-2.353v8.018c0 0.827 0.673 1.5 1.5 1.5h11c0.827 0 1.5-0.673 1.5-1.5v-8.018l2.129 2.353c0.185 0.205 0.501 0.221 0.706 0.035s0.221-0.501 0.035-0.706zM12 19h-4v-4.5c0-0.276 0.224-0.5 0.5-0.5h3c0.276 0 0.5 0.224 0.5 0.5v4.5zM16 18.5c0 0.276-0.224 0.5-0.5 0.5h-2.5v-4.5c0-0.827-0.673-1.5-1.5-1.5h-3c-0.827 0-1.5 0.673-1.5 1.5v4.5h-2.5c-0.276 0-0.5-0.224-0.5-0.5v-9.123l5.7-6.3c0.082-0.091 0.189-0.141 0.3-0.141s0.218 0.050 0.3 0.141l5.7 6.3v9.123z"></path>
                        </svg></a></li>
                        <li><a href="#">Présentation</a></li>
                        <li><a href="#">Réalisations</a></li>
                        <li><a href="#">CV</a></li>
                        <li><a href="#">Contact</a></li>
                        <li><a href="#">Livre d'or</a></li>
                    </ul>

                </nav>

            </header>

            <img class="banniere" src="nature.jpg" alt="nature" title="nature"><!-- @whitespace
            --><section>Bienvenue sur mon site web ! Ici vous allez pouvoir en découvrir un peu plus à mon sujet, et je l'espère très bientôt mais réalisations.</br>Bonne visite !</section>
    </body>
</html>
/* Police personnalisée */

@font-face {
    font-family: 'sharebold';
    src: url('police/Share-Bold-webfont.eot');
    src: url('police/Share-Bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('police/Share-Bold-webfont.woff') format('woff'),
         url('police/Share-Bold-webfont.ttf') format('truetype'),
         url('police/Share-Bold-webfont.svg#sharebold') format('svg');
    font-weight: normal;
    font-style: normal;
}

/* Éléments principaux de la page */

body
{
	font-family: 'sharebold'; sans-serif;
	font-size: 1.3em;
	color: black;
	margin: 0;
}

/* Navigation */

nav
{
	margin: auto;
	text-align: center;
	width: 50%;
	height: 60px;
	background-color: #EBFFDA;
	border: outset;
	border-color: #447ABD;
	border-radius: 10px 5px 10px 5px;
}

nav a
{
	text-decoration: none;
	color: #1E414A;
	text-transform: uppercase;
	line-height: 60px;
}

nav a:hover
{
	color: #44E8B3;
}

nav ul
{
	list-style-type: none;
	margin-top: 0;
	padding: 0;
}

nav li
{
	display: inline-block;
}

ul li
{
	margin: 0px 15px;
	text-align: center;
}

.banniere
{
	display: inline-block;
	width: 100%;
	height: 350px;
}

section
{
	display: inline-block;
	width: 100%;
	height: 50px;
	margin-top: -5px;
	padding: 0;
	background-color: #98C2E8;
	text-align: center;
}


.accueil:hover path
{
	fill: #44E8B3;
}




  • Partager sur Facebook
  • Partager sur Twitter
18 septembre 2015 à 14:41:13

J'avais pas fait attention au svg, mais du coup pourquoi pas redimensionner ton image ? tu ne perdras pas de qualité.

Pourquoi faire compliqué si on peut faire simple ?  :D

  • Partager sur Facebook
  • Partager sur Twitter
3 février 2020 à 14:19:20

Bonjour tu lui mes une width sans height, faut pas mettre de height avec une width, ensuite tu augmente/baisse les pixel (px) de ta width tu verra ton svg s'agrandire...
  • Partager sur Facebook
  • Partager sur Twitter
Staff 3 février 2020 à 17:56:56

Bonjour,

Déterrage

Citation des règles générales du forum :

Avant de poster un message, vérifiez la date du sujet dans lequel vous comptiez intervenir.

Si le dernier message sur le sujet date de plus de deux mois, mieux vaut ne pas répondre.
En effet, le déterrage d'un sujet nuit au bon fonctionnement du forum, et l'informatique pouvant grandement changer en quelques mois il n'est donc que rarement pertinent de déterrer un vieux sujet.

Au lieu de déterrer un sujet il est préférable :

  • soit de contacter directement le membre voulu par messagerie privée en cliquant sur son pseudonyme pour accéder à sa page profil, puis sur le lien "Ecrire un message"
  • soit de créer un nouveau sujet décrivant votre propre contexte
  • ne pas répondre à un déterrage et le signaler à la modération

Je ferme ce sujet. En cas de désaccord, me contacter par MP.

  • Partager sur Facebook
  • Partager sur Twitter