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 !

Quentles

18 septembre 2015 à 11:04:37

Salut,

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

Bonne continuation

Tu cherches un graphiste, développeur ou tu veux proposer tes services ? Va vite sur pixelads.fr !

jusle

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.

nightmat

18 septembre 2015 à 12:18:42

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

Ce n'est pas parce que vous ne savez pas vous servir d'un marteau qu'il faut planter des clous au tournevis.

Jason_Darras

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;
}

jusle

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 ?

IsshakHenni1

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...

AbcAbc6

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.

Forums des Zéros

Modifier la taille d'un logo au format .svg

C'est possible ? Avec CSS ?

Déterrage

Modifier la taille d'un logo au format .svg

C'est possible ? Avec CSS ?

Déterrage

Supprimer

Modérer

Signaler le message aux modérateurs