How to use svg images?

Question

How to use svg images?

Navigation

#1 by (2 votes)
#2 by (1 votes)

2

I do not understand and can not even use svg images in a web application.

I downloaded the image https://svgur.com/i/8NF.svg and put it in <img src="8NF.svg" class="logo"/> , but it does not appear.

Only appears if I place the url of the image in <img src="https://svgur.com/i/8NF.svg"class="logo"/> .

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

I've reviewed the code several times, and I do not think it's a problem with it. But I also do not 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

asked by anonymous 17.09.2018 / 20:50

2 answers

2

Apparently there were no issues like his SVG, he had some details, but nothing that would prevent rendering. So I think the problem is how you're working with arquivo.svg

Notice the code below that I put the right SVG inside the code. But locally you can get everything inside the <svg></svg> copy and paste tags inside a Bloco de Notas , saved as .txt itself, and then rename the file minhaimagem.txt to minhaimagem.svg . soon you will have your SVG saved to be able to index the document.

Note also that any width and height that you put in Style is what works for <svg> , even if it has an inline defined width and height, CSS overwrites those values! >

Also note that SVG by default preserves the aspect-ratio, and it will not occupy the entire container as you are placing a square image inside a rectangle, if you want to change that you need set it inside its .svg preserveAspectRatio="none" in 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 you index your SVG in the document use only the <img> tag and treat the styles in that image as height and direct width through CSS

See 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="">

17.09.2018 / 22:26

Taking the name of the Default Printer What is the difference between% d and% i in printf and scanf, in C language? [duplicate]

score 1 · Accepted Answer

I found the solution to my problem!

The MIME Type was not defined on the server. I added the following lines of code in the file .htaccess .

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

Source: link