How to use svg images?

Asked

Viewed 3,057 times

2

I don’t understand and I can’t even use images svg in a web application.

I downloaded the image https://svgur.com/i/8NF.svg and put it in the <img src="8NF.svg" class="logo"/>, but she doesn’t show up.

It only appears when I put the url of the image in <img src="https://svgur.com/i/8NF.svg" class="logo"/>.

When accessing locally localhost:5555/8NF.svg by the browser, the image also appears normally. So the image is there.

I’ve already reviewed the code several times, and I don’t think it’s a problem. But I also don’t know what other problem it would be.

<style>
.logo {
  width: 80px;
  height: 80px;
}
</style>

<p>Desta forma funciona.</p>
<p><img src="https://svgur.com/i/8NF.svg" class="logo" /></p>

<p>Já assim, não aparece a imagem.</p>
<p><img src="8NF.svg" class="logo" /></p>

svg
  • 1

    The server is returning the SVG with the correct MIME type?

  • 1

    I recommend also putting your HTML code here to check another possible problem.

  • I don’t know what it is MIME type, nor how to verify it. I will give a search. Thank you!

  • 1

    Have you checked to see if there’s any CSS interfering with the image, or the container the image is in? If you can access the URL is pq it is there... probably has a display:None, opacity:0, position:Absolute or something like that taking the image from the Stage. Even if she’s with the fill white #fff might be that you’re not noticing her on the screen... Check the classes etc, sometimes resolve

  • 1

    That’s the MIME type type="image/svg+xml" and apparently right, although using image.svg in the image tag does not need to declare MIME type, so it should be working, I believe your problem is something related to what I said above...

  • So it’s like in the example I posted. I don’t have any css.

  • You really need to use svg inside the tag <object> or you put just wanted?

  • I’m looking for a server to upload the image I have. Because this example seems to be working the way I’d like it to work with the original image I have. It’s all so confusing. I’ll run some more tests localhost. The page being PHP interferes with something?

  • Be. PHP does not change anything. You can put the code that is inside the . svg right in Codepen or Jsfidelle, then we take the code and save it locally as . svg, I think it’s easier than going up . svg pro host

  • Ah, I get it now. There’s code inside the SVG. I hadn’t yet messed with this extension. So the problem could be inside the SVG? I’ll try to post the image source code.

  • This is the SVG code http://jsfiddle.net/d0wohutf/

Show 6 more comments

2 answers

2

Apparently there were no problems like his SVG, he had some details, but nothing to stop the rendering. So I believe the problem is the way you’re working with arquivo.svg

Note the code below that I put the SVG right inside the code. But locally you can take everything inside the tags <svg></svg> copy and glue inside a Bloco de Notas, saved as .txt same, and then renames the minhaimagem.txt for minhaimagem.svg. ready vc will have your SVG saved to be able to index in the document.

Also note that any width and height that you put in the Style is what is worth to <svg>, even though it has a width and height defined inline, CSS overrides these values!

Also note that the default SVG preserves the Aspect-ratio, and it will not occupy the container whole because you’re putting a square image inside a rectangle, if you want to change it you need to set it inside your .svg preserveAspectRatio="none" on the tag <svg>

To see how it looks see the example below.

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
svg {
    border: 1px solid black;
    width: 64vw;
    height: 64vh;
}    
svg.quadrado {
    border: 1px solid black;
    width: 100px;
    height: 100px;
} 
SVG com o aspect-ratio preservado<br><br>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" id="Capa_1" viewBox="0 0 512 512" width="512px" height="512px">
    <g>
        <circle style="fill:#0053AB" cx="256" cy="256" r="256" data-original="#0053AB" class="" data-old_color="#44C4FC"/>
        <path style="fill:#0B3660" d="M512,256c0-10.491-0.646-20.83-1.872-30.99l-99.507-99.507L78,361l149.401,149.401  C236.792,511.445,246.331,512,256,512C397.385,512,512,397.385,512,256z" data-original="#0B3660" class="" data-old_color="#29ACE5"/>
        <rect x="101.38" y="125.5" style="fill:#37474F;" width="309.24" height="215.99" data-original="#37474F" class=""/>
        <rect x="255.95" y="125.5" style="fill:#263238;" width="154.67" height="215.99" data-original="#263238" class=""/>
        <rect x="119.3" y="141.78" style="fill:#FEA626;" width="273.4" height="183.45" data-original="#FEA626" class=""/>
        <rect x="255.95" y="141.78" style="fill:#F47C00;" width="136.75" height="183.45" data-original="#F47C00" class=""/>
        <path style="fill:#1E499E" d="M285.026,166.246v65.458h-58.052v-65.458c-19.361,10.373-32.534,30.792-32.534,54.294  c0,23.533,13.21,43.975,32.615,54.334v50.349h57.893v-50.348c19.404-10.36,32.614-30.801,32.614-54.335  C317.561,197.039,304.387,176.619,285.026,166.246z" data-original="#1E499E" class=""/>
        <path style="fill:#0E387C" d="M317.561,220.54c0-23.501-13.174-43.921-32.535-54.294v65.458h-29.074v93.519h28.994v-50.348  C304.351,264.515,317.561,244.074,317.561,220.54z" data-original="#0E387C" class=""/>
        <rect x="78" y="319.67" style="fill:#455A64" width="356" height="41.33" data-original="#455A64" class=""/>
        <rect x="255.95" y="319.67" style="fill:#37474F;" width="178.05" height="41.33" data-original="#37474F" class=""/>
    </g>
</svg>

<br><br>

SVG sem o aspect-ratio preservado<br><br>

<svg preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" viewBox="0 0 512 512" >
    <g>
        <circle style="fill:#0053AB" cx="256" cy="256" r="256" data-original="#0053AB" class="" data-old_color="#44C4FC"/>
        <path style="fill:#0B3660" d="M512,256c0-10.491-0.646-20.83-1.872-30.99l-99.507-99.507L78,361l149.401,149.401  C236.792,511.445,246.331,512,256,512C397.385,512,512,397.385,512,256z" data-original="#0B3660" class="" data-old_color="#29ACE5"/>
        <rect x="101.38" y="125.5" style="fill:#37474F;" width="309.24" height="215.99" data-original="#37474F" class=""/>
        <rect x="255.95" y="125.5" style="fill:#263238;" width="154.67" height="215.99" data-original="#263238" class=""/>
        <rect x="119.3" y="141.78" style="fill:#FEA626;" width="273.4" height="183.45" data-original="#FEA626" class=""/>
        <rect x="255.95" y="141.78" style="fill:#F47C00;" width="136.75" height="183.45" data-original="#F47C00" class=""/>
        <path style="fill:#1E499E" d="M285.026,166.246v65.458h-58.052v-65.458c-19.361,10.373-32.534,30.792-32.534,54.294  c0,23.533,13.21,43.975,32.615,54.334v50.349h57.893v-50.348c19.404-10.36,32.614-30.801,32.614-54.335  C317.561,197.039,304.387,176.619,285.026,166.246z" data-original="#1E499E" class=""/>
        <path style="fill:#0E387C" d="M317.561,220.54c0-23.501-13.174-43.921-32.535-54.294v65.458h-29.074v93.519h28.994v-50.348  C304.351,264.515,317.561,244.074,317.561,220.54z" data-original="#0E387C" class=""/>
        <rect x="78" y="319.67" style="fill:#455A64" width="356" height="41.33" data-original="#455A64" class=""/>
        <rect x="255.95" y="319.67" style="fill:#37474F;" width="178.05" height="41.33" data-original="#37474F" class=""/>
    </g>
</svg>

<br><br>

SVG sem o aspect-ratio preservado, mas corrigido usando altura e largura iguais<br><br>

<svg class="quadrado" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" version="1.1" id="Capa_1" viewBox="0 0 512 512" width="512px" height="512px">
    <g>
        <circle style="fill:#0053AB" cx="256" cy="256" r="256" data-original="#0053AB" class="" data-old_color="#44C4FC"/>
        <path style="fill:#0B3660" d="M512,256c0-10.491-0.646-20.83-1.872-30.99l-99.507-99.507L78,361l149.401,149.401  C236.792,511.445,246.331,512,256,512C397.385,512,512,397.385,512,256z" data-original="#0B3660" class="" data-old_color="#29ACE5"/>
        <rect x="101.38" y="125.5" style="fill:#37474F;" width="309.24" height="215.99" data-original="#37474F" class=""/>
        <rect x="255.95" y="125.5" style="fill:#263238;" width="154.67" height="215.99" data-original="#263238" class=""/>
        <rect x="119.3" y="141.78" style="fill:#FEA626;" width="273.4" height="183.45" data-original="#FEA626" class=""/>
        <rect x="255.95" y="141.78" style="fill:#F47C00;" width="136.75" height="183.45" data-original="#F47C00" class=""/>
        <path style="fill:#1E499E" d="M285.026,166.246v65.458h-58.052v-65.458c-19.361,10.373-32.534,30.792-32.534,54.294  c0,23.533,13.21,43.975,32.615,54.334v50.349h57.893v-50.348c19.404-10.36,32.614-30.801,32.614-54.335  C317.561,197.039,304.387,176.619,285.026,166.246z" data-original="#1E499E" class=""/>
        <path style="fill:#0E387C" d="M317.561,220.54c0-23.501-13.174-43.921-32.535-54.294v65.458h-29.074v93.519h28.994v-50.348  C304.351,264.515,317.561,244.074,317.561,220.54z" data-original="#0E387C" class=""/>
        <rect x="78" y="319.67" style="fill:#455A64" width="356" height="41.33" data-original="#455A64" class=""/>
        <rect x="255.95" y="319.67" style="fill:#37474F;" width="178.05" height="41.33" data-original="#37474F" class=""/>
    </g>
</svg>

TIP

When vc index your SVG in the document use only the tag <img> and treat the image styles as direct height and width by CSS

Take the example:

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
img {
    border: 1px solid black;
    width: 64vw;
    height: 64vh;
}   
SVG externo indexado<br><br>

<img src="https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/410.svg" alt="">

  • Thank you for your hard work. But I still haven’t been able to make it work here. I copied the third code, put it in a notepad, saved it as test.txt, and then renamed it to test.svg. Then I put in a <img src="test.svg" class="image"> and in css I put img.image {width:64vw;height:64vh;}. Continues to appear a square of 500 by 500 empty.

  • Putting the code directly into html, then it works. But I wanted to use the.svg file anyway. Do you know how to put that code in a.svg file that can be placed in the src of an img tag? Thank you!

  • 1

    @Paulodossantos Check if your code editor, if it’s Atom, Sublime, VS Code etc, check if it saves files like . SVG, if yes, open a new document, put the code of the first tag <svg></svg> and save directly from the edit as.svg image, it may be that saving by Notepad has given some problem... And I copied this SVG code right out of my answer in VS Code and saved it as SVG, then called it <img ... . svg> and it worked right

  • I’ve gone over everything, several times. But I still can’t make the image appear.

  • 1

    @Paulodossantos guy picks up the "kernel" of your SVG and puts it inside that tag and saves it as . SVG, then opens it in the browser. <?xml version="1.0" encoding="iso-8859-1"?>&#xA;<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">&#xA;<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"&#xA; width="284px" height="284px" viewBox="0 0 284 284" style="enable-background:new 0 0 284 284;"&#xA; xml:space="preserve"> ... </svg> Check here if your browser supports svg https://caniuse.com/#feat=svg

  • I checked and it supports. I also put the code in Sublime, saved, opened the file in the browser, I could see the image, but it doesn’t show <img src="imagem.svg" style="width:512px;height:512px;" />. It is as if the browser did not find the image (as in the example I returned today).

  • @Paulodossantos Did you put the image in the right folder? Don’t you have another css on the page like img {display:None} ? You have checked in the Devtools Network Tab if the image appears or if there is an error (enter the devtool press F12, go to the Network tab and an F5 and see if the image appears in the list)?

  • https://ctrlv.cz/oFgP

  • Is it a server issue?

  • First test locally and see if it works. Looks like it’s returning a Status 304 look what it is https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/304 ... looks like it’s Cache

  • That must not be it! https://ctrlv.cz/wmke

  • I even gave one <?=file_get_contents("logo.svg")?> with PHP, and the image appears perfectly. But I would like to use HTML tag <img src="logo.svg" class="logo" />.

  • @Paulodossantos now it seems that returned a 200, was the image has appeared... I can not say why did not roll... Here locally with your code and the link image worked normally

  • I think it’s a server problem! I’m going to test this solution here: https://forum.imasters.com.br/topic/513485-svg-n%C3%A3o-rendering/

  • Thank you so much for the time you spent trying to help me. Really everything you told me worked locally, but it didn’t work on the server. As I do not understand any of this, it is even difficult to explain what is happening.

  • 1

    @Paulodossantos quiet young, good luck there! If you get the solution then put there to the community

  • 1

    Thank you! I will post yes! :)

Show 12 more comments

1


Browser other questions tagged svg

You are not signed in. Login or sign up in order to post.