Jump to content

Imagem SVG não aparece

John Hebert Trindade

By John Hebert Trindade
in HTML

 Share
Go to solution Solved by John Hebert Trindade,

Recommended Posts

John Hebert Trindade try-catch user

John Hebert Trindade

Posted
Posted

Boa tarde a todos, eu fico frustrado e desmotivado, toda vez que vejo um curso online e tento fazer a aula igual e infelizmente não funciona.

No curso que estou a fazer o professor exibe uma imagem de logo da seguinte forma. 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Personal Portfolio Website</title>

    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/all.css">
    <link rel="stylesheet" href="css/owl.carousel.min.css">
    <link rel="stylesheet" href="css/owl.theme.default.min.css">
    <link rel="stylesheet" href="css/animate.css">
    <link rel="stylesheet" href="css/custom.css">

    <link rel="icon" type="image/png" href="images/man.png">

    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap" rel="stylesheet">

</head>
<body>

    <div id="preloader">
        <div id="preloader_inner"></div>
    </div>

    <nav class="navbar navbar-expand-lg bg-light">
        <div class="container">
            <a class="navbar-brand logo" href="index.html">
                 <img src="images/logo.svg" alt=""> 
            </a>

O logo dele aparece, mas o meu não, e coloquei da seguinte forma 

<body>
    <!-- Inicio do menu -->
    <nav class="navbar navbar-expand-lg bg-light">
        <div class="container">
          <a class="navbar-brand" href="#">
            <img src="img/logo.svg" alt="Logotipo Jbprojectos">
          </a>

O que estou fazendo errado

John Hebert Trindade try-catch user

John Hebert Trindade

Posted
  • Author
Posted (edited)

a única diferença que vejo é que a pasta dele chama images e a minha img, mas quando uso uma imagem png exibe, será a imagem? 

Mas consigo abri-la normalmente no vscode, ou será o formato.

Quais as recomendações para salvar no adobe ilustrator no formato svg?

Edited by John Hebert Trindade
M6 unsigned user

M6

Posted
Posted

Podes verificar se chegas ao SVG no browser através de uma chamada HTTP, isso ajuda logo a perceber se a imagem está a ser servida como deve ser e se o browser a consegue mostrar.

Usa o Dev Tools do browser para despistar algumas coisas:

  1. Que a imagem está no local certo (podes ver nos dev tools do browser se dá algum erro, por exemplo um 404 de que a imegem não foi encontrada);
  2. Que o browser suporta o formato (sim, eu sei que parece tolo, mas no passado já me deparei com situações dessas);
  3. Que o servidor não está configurado para bloquear (ou não servir) ficheiros com essas extensões.

Alguns exemplos simples com que já me deparei: um IE (sim um Internet Explorer) não tinha capacidade de mostrar um SVG; um IIS necessitou de uma configuração expecifica para servir ficheiros SVG.

  

10 REM Generation 48K!
20 INPUT "URL:", A$
30 IF A$(1 TO 4) = "HTTP" THEN PRINT "400 Bad Request": GOTO 50
40 PRINT "404 Not Found"
50 PRINT "./M6 @ Portugal a Programar."

 

  • 1 month later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...

Important Information

By using this site you accept our Terms of Use and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.