0

Stumbled upon the following svg:

https://codepen.io/iliran11/pen/eRPxwG

While im copying the content of the pen into a file liran.svg there are the 2 following scenarios:

  • opening directly liran.svg with latest chrome - it works perfectly
  • Importing liran.svg to index.html (code below) - i can see nothing.

Maybe any exaplnation?

index.html

<!doctype html>
<html class="no-js" lang="">
    <head>
        <meta charset="utf-8">
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
    </head>
    <body>
        <img src="./liran.svg">
    </body>
</html>
LiranC
  • 2,400
  • 1
  • 27
  • 55

1 Answers1

0

You did not import properly if it is the same folder with the index.html file use

<!doctype html>
<html class="no-js" lang="">
    <head>
        <meta charset="utf-8">
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
    </head>
    <body>
        <img src="liran.svg">
    </body>
</html>

If it is the parent folder of the folder containing index.html use

<!doctype html>
<html class="no-js" lang="">
    <head>
        <meta charset="utf-8">
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
    </head>
    <body>
        <img src="../liran.svg">
    </body>
</html>

Take a look a this link to learn more on referencing files in html and css How to properly reference local resources in html

Collins
  • 145
  • 2
  • 15
  • thanks, but still not working. have you tried it on your own machine? – LiranC Jul 09 '17 at 21:07
  • Where is the link to the svg you used?, because what i saw there was a base64 encoded svg, unless you converted it because copying that wont work – Collins Jul 09 '17 at 21:09
  • that's the svg i got. with base64 inside. you say that the browser can't handle this as imported `img`? – LiranC Jul 09 '17 at 21:37
  • Yeah, use [base64decode](https://www.base64decode.org) to convert the base64 the normal svg code then try it again – Collins Jul 11 '17 at 15:40