SVG image does not appear

Asked

Viewed 1,845 times

2

I’m trying to upload an SVG image as background but it doesn’t appear. When I’m in the live preview of VS Code it works normally, but when I open index.html directly from the browser it just doesn’t appear. If anyone can help me I would really appreciate it. Github link https://github.com/AlxandreLopes/fylo-landing-page.git

HTML

    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- displays site properly based on user's device -->

  <link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
  <link rel="stylesheet" href="style.css">
  <link href="https://fonts.googleapis.com/css?family=Open+Sans|Raleway&display=swap" rel="stylesheet">

  <title>Frontend Mentor | Beta sign up split layout Challenge</title>

  <!-- Feel free to remove these styles or customise in your own stylesheet  -->
  <style>
    .attribution { font-size: 11px; text-align: center; }
    .attribution a { color: hsl(228, 45%, 44%); }
  </style>
</head>

<body>


  <div class="header">
    <header>
      <nav>
        <svg width="120" height="35" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><path id="a" d="M.01.021h67.924V34.93H.01z"/></defs><g fill="none" fill-rule="evenodd"><path d="M0 10.215v.088l20.205 9.492 20.277-9.524v-.024L20.205.723 0 10.215zm7.284.044l12.922-6.07 12.922 6.07-12.923 6.07-12.92-6.07zm12.921 13.223L0 14.132v3.458l20.205 9.372 20.277-9.404V14.1l-20.277 9.382zm0 7.014L0 21.145v3.458l20.205 9.373 20.277-9.405v-3.458l-20.277 9.383z" fill="#BDBAFA"/><g transform="translate(52.048)"><mask id="b" fill="#fff"><use xlink:href="#a"/></mask><path id="logo-fylo" d="M63.296 17.46a5.856 5.856 0 0 0-1.562-4.03 5.247 5.247 0 0 0-1.69-1.208 4.962 4.962 0 0 0-2.062-.436c-.73 0-1.417.145-2.061.436a5.246 5.246 0 0 0-1.691 1.208 5.857 5.857 0 0 0-1.562 4.03 5.857 5.857 0 0 0 1.562 4.029 5.246 5.246 0 0 0 1.69 1.208c.645.29 1.332.435 2.062.435.73 0 1.417-.145 2.061-.435a5.247 5.247 0 0 0 1.691-1.208 5.856 5.856 0 0 0 1.562-4.03zm4.638 0c0 1.396-.258 2.69-.773 3.883a9.468 9.468 0 0 1-2.126 3.095c-.902.87-1.96 1.558-3.172 2.063a9.996 9.996 0 0 1-3.881.757 9.878 9.878 0 0 1-3.865-.757 10.021 10.021 0 0 1-3.156-2.08 9.652 9.652 0 0 1-2.126-3.11c-.515-1.192-.773-2.476-.773-3.852a9.36 9.36 0 0 1 .79-3.82 10.063 10.063 0 0 1 2.141-3.126 9.883 9.883 0 0 1 3.156-2.095 9.796 9.796 0 0 1 3.833-.757c1.374 0 2.668.252 3.88.757a10.115 10.115 0 0 1 3.173 2.063 9.426 9.426 0 0 1 2.126 3.11 9.722 9.722 0 0 1 .773 3.868zm-21.482 9.218a6.217 6.217 0 0 1-1.24.42c-.462.107-.94.16-1.433.16a7.114 7.114 0 0 1-1.98-.274 4.34 4.34 0 0 1-1.66-.886c-.472-.408-.848-.94-1.127-1.596-.279-.655-.418-1.445-.418-2.369V.021h4.734v21.306c0 .774.156 1.306.467 1.596.311.29.682.435 1.111.435.537 0 1.052-.161 1.546-.483v3.803zM36.5 8.112l-8.374 22.144c-.622 1.655-1.438 2.847-2.447 3.578-1.01.73-2.212 1.096-3.607 1.096a5.744 5.744 0 0 1-1.45-.194l-1.546-4.319c.365.172.741.306 1.128.403a4.52 4.52 0 0 0 1.095.145 4.05 4.05 0 0 0 1.996-.5c.602-.333 1.063-.95 1.385-1.853l.644-1.87-7.182-18.63H23.2l4.283 11.99 4.026-11.99H36.5zM17.015 5.308H4.905v5.995h11.95v4.061H4.904v11.41H.01V1.022h17.005v4.287z" fill="#fff" mask="url(#b)"/></g></g></svg>

        <ul id="socialMedia">
          <li><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M336 96c21.2 0 41.3 8.4 56.5 23.5S416 154.8 416 176v160c0 21.2-8.4 41.3-23.5 56.5S357.2 416 336 416H176c-21.2 0-41.3-8.4-56.5-23.5S96 357.2 96 336V176c0-21.2 8.4-41.3 23.5-56.5S154.8 96 176 96h160m0-32H176c-61.6 0-112 50.4-112 112v160c0 61.6 50.4 112 112 112h160c61.6 0 112-50.4 112-112V176c0-61.6-50.4-112-112-112z"/><path d="M360 176c-13.3 0-24-10.7-24-24s10.7-24 24-24c13.2 0 24 10.7 24 24s-10.8 24-24 24zM256 192c35.3 0 64 28.7 64 64s-28.7 64-64 64-64-28.7-64-64 28.7-64 64-64m0-32c-53 0-96 43-96 96s43 96 96 96 96-43 96-96-43-96-96-96z"/></svg></li>

          <li><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M426.8 64H85.2C73.5 64 64 73.5 64 85.2v341.6c0 11.7 9.5 21.2 21.2 21.2H256V296h-45.9v-56H256v-41.4c0-49.6 34.4-76.6 78.7-76.6 21.2 0 44 1.6 49.3 2.3v51.8h-35.3c-24.1 0-28.7 11.4-28.7 28.2V240h57.4l-7.5 56H320v152h106.8c11.7 0 21.2-9.5 21.2-21.2V85.2c0-11.7-9.5-21.2-21.2-21.2z"/></svg></li>

          <li><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M460.6 147.3L353 256.9c-.8.8-.8 2 0 2.8l75.3 80.2c5.1 5.1 5.1 13.3 0 18.4-2.5 2.5-5.9 3.8-9.2 3.8s-6.7-1.3-9.2-3.8l-75-79.9c-.8-.8-2.1-.8-2.9 0L313.7 297c-15.3 15.5-35.6 24.1-57.4 24.2-22.1.1-43.1-9.2-58.6-24.9l-17.6-17.9c-.8-.8-2.1-.8-2.9 0l-75 79.9c-2.5 2.5-5.9 3.8-9.2 3.8s-6.7-1.3-9.2-3.8c-5.1-5.1-5.1-13.3 0-18.4l75.3-80.2c.7-.8.7-2 0-2.8L51.4 147.3c-1.3-1.3-3.4-.4-3.4 1.4V368c0 17.6 14.4 32 32 32h352c17.6 0 32-14.4 32-32V148.7c0-1.8-2.2-2.6-3.4-1.4z"/><path d="M256 295.1c14.8 0 28.7-5.8 39.1-16.4L452 119c-5.5-4.4-12.3-7-19.8-7H79.9c-7.5 0-14.4 2.6-19.8 7L217 278.7c10.3 10.5 24.2 16.4 39 16.4z"/></svg></li>
        </ul>      
      </nav>        
    </header>
  </div>

  <div class="illustration" id="illustrationMain">
      <svg viewbox="0 0 458 473" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><path id="a" d="M0 .191h9.064v9.065H0z"/><path id="c" d="M0 472.793h456.636V0H0z"/></defs><g transform="translate(.692 .077)" fill="none" fill-rule="evenodd"><path d="M338.848 411.311s-1.965-17.454 9.82-18.66c11.786-1.208 7.834-19.477 22.213-18.523 14.38.953 11.213-30.092 20.186-31.195 8.972-1.103 16.362-9.783 16.89-16.264.527-6.478 18.472-8.062 8.972 11.467-9.5 19.528 12.138 26.155-7.388 35.244-19.53 9.091 2.11 5.71-11.084 19.276-13.196 13.566-2.25 20.834-18.44 28.255-16.19 7.42-44.484 9.956-44.484 9.956l3.315-19.556z" fill="#98C5ED"/><path fill="#122C64" d="M373.17 415.74l-29.727-.97.021-.07 5.49-17.704.107.033-5.467 17.634 29.58.964z"/><path d="M337.968 416.644l-.028-.11c.15-.04 15.217-4.06 32.066-16.582 9.895-7.354 18.46-16.16 25.455-26.17 8.743-12.51 15.045-26.952 18.733-42.923l.112.026c-3.692 15.985-10 30.441-18.754 42.967-7.003 10.018-15.575 18.832-25.481 26.194-16.867 12.535-31.952 16.56-32.103 16.598" fill="#122C64"/><path fill="#122C64" d="M397.712 370.545l-2.046-24.436.112-.01 2.034 24.283 13.545-5.489.042.107zM392.397 391.79h-12.51l.009-.066 3.44-21.938.11.019-3.427 21.872h12.378z"/><g fill="#E4F3F4"><path d="M103.908 331.715h-34.27a3.79 3.79 0 1 1 0-7.58h34.27a3.79 3.79 0 0 1 0 7.58M114.993 346.875H62.626a3.79 3.79 0 1 1 0-7.58h52.367a3.79 3.79 0 1 1 0 7.58"/><path d="M95.695 335.506a3.791 3.791 0 0 1 3.79-3.792H76.083a3.792 3.792 0 0 1 0 7.582h23.404c-2.095 0-3.791-1.7-3.791-3.79"/></g><g fill="#E4F3F4"><path d="M183.44 270.816h12.092a5.497 5.497 0 0 1 0 10.992H183.44a5.496 5.496 0 1 1 0-10.992M86.368 226.842h4.946a5.497 5.497 0 0 1 0 10.994h-4.946a5.497 5.497 0 0 1 0-10.994M90.949 248.827h22.49a5.495 5.495 0 1 0 0-10.991h-6.413a5.497 5.497 0 0 1 0-10.994h67.024a5.497 5.497 0 0 1 0 10.994h-9.344a5.496 5.496 0 1 0 0 10.991h19.513a5.497 5.497 0 0 1 0 10.995h-19.513a5.496 5.496 0 1 0 0 10.992l-.021.002h5.097a5.496 5.496 0 0 1 0 10.992H98.643a5.496 5.496 0 1 1 0-10.992h5.14l-.01-.002a5.495 5.495 0 0 0 5.496-5.496 5.495 5.495 0 0 0-5.495-5.496H90.949a5.497 5.497 0 0 1 0-10.994M71.584 259.097H53.218a4.485 4.485 0 0 1 0-8.97h18.366a4.486 4.486 0 0 1 0 8.97"/></g><path d="M452.345 75.02h-17.553a4.29 4.29 0 1 1 0-8.58h5.006a4.29 4.29 0 1 0 0-8.58h-38.791a4.29 4.29 0 0 0 0 8.58h7.294a4.29 4.29 0 0 1 0 8.58h-15.23c-2.37 0-4.29 1.921-4.29 4.29a4.29 4.29 0 0 0 4.29 4.29h59.274a4.29 4.29 0 1 0 0-8.58M87.554 65.083H70a4.29 4.29 0 0 1-4.29-4.29A4.29 4.29 0 0 1 70 56.501h5.004a4.29 4.29 0 1 0 0-8.58H36.216a4.29 4.29 0 1 0 0 8.58h7.293a4.29 4.29 0 1 1 0 8.58h-15.23a4.29 4.29 0 1 0 0 8.58h59.275a4.29 4.29 0 0 0 0-8.58" fill="#E4F3F4"/><g fill="#E4F3F4"><path d="M275.007 165.32h-12.093a5.496 5.496 0 0 0-5.495 5.497 5.496 5.496 0 0 0 5.495 5.498h12.093a5.498 5.498 0 0 0 0-10.994M372.078 121.349h-4.947a5.496 5.496 0 0 0-5.496 5.496 5.495 5.495 0 0 0 5.496 5.496h4.947a5.496 5.496 0 1 0 0-10.992M367.497 143.335h-22.49a5.497 5.497 0 0 1 0-10.994h6.414a5.496 5.496 0 1 0 0-10.992h-67.025a5.496 5.496 0 0 0-5.495 5.496 5.495 5.495 0 0 0 5.495 5.496h9.346a5.496 5.496 0 0 1 5.494 5.498 5.497 5.497 0 0 1-5.494 5.496h-19.514a5.496 5.496 0 1 0 0 10.992h19.514a5.496 5.496 0 0 1 5.494 5.497 5.496 5.496 0 0 1-5.494 5.497h.02-5.097a5.498 5.498 0 1 0 0 10.994h71.136a5.497 5.497 0 1 0 0-10.994h-5.14.012a5.497 5.497 0 1 1 0-10.994h12.824a5.496 5.496 0 1 0 0-10.992"/></g><path d="M326.95 444.585s-94.144-61.38-81.373-97.183c12.772-35.804 87.453 56.222 90.831 91.597l-9.459 5.586z" fill="#DE8486"/><path d="M331.651 441.833c-23.95-20.15-45.256-46.17-58.913-64.452-14.794-19.804-24.047-35.042-24.139-35.192l.109-.067c.091.152 9.341 15.384 24.134 35.185 13.65 18.274 34.95 44.286 58.89 64.43l-.08.096z" fill="#122C64"/><path fill="#122C64" d="M272.41 376.856l-.072-.028-25.32-10.089.046-.117 25.248 10.06 4.907-26.82.125.021zM287.245 395.842l-.07-.023-27.59-8.94.04-.12 27.52 8.916 5.154-31.528.126.02zM304.39 415.547l-.072-.025-26.853-9.715.043-.12 26.78 9.688 5.114-30.473.126.02zM327.082 437.85l-.087-.04-24.354-10.676.05-.117 24.266 10.639.257-24.462h.128z"/><path d="M310.32 418.098s-12.423-33.605-11.961-47.208l4.667 5.542 13.84 43.415.34 2.825-4.793-1.143-2.094-3.431z" fill="#122C64"/><path d="M323.507 444.54s-44.905-103.024-14.558-125.913c30.35-22.889 42.154 95.037 25.53 126.447l-10.972-.534z" fill="#DE8486"/><path d="M328.948 444.826c-8.931-29.997-12.427-63.447-13.788-86.224-1.473-24.677-.825-42.492-.819-42.67l.127.005c-.007.178-.654 17.988.819 42.659 1.36 22.77 4.855 56.207 13.782 86.194l-.121.036z" fill="#122C64"/><path fill="#122C64" d="M315.176 357.982l-.045-.064-15.608-22.345.104-.072 15.564 22.281 18.84-19.708.092.089zM317.133 381.997l-.046-.059-18.135-22.631.1-.08 18.088 22.575 21.637-23.503.094.085zM320.623 407.882l-.047-.062-17.093-22.875.104-.076 17.046 22.813 21.02-22.644.094.086zM327.32 438.986l-.052-.08-14.475-22.307.107-.07 14.423 22.227 13.662-20.294.104.071z"/><path d="M272.57 401.009s47.888 18.576 65.756 35.179l-3.948 3.99-60.506-33.722 4.79.389-6.092-5.836z" fill="#122C64"/><path d="M332.65 448.196s-91.354-4.586-97.044-34.996c-5.69-30.41 84.535 3.698 101.407 27.191l-4.363 7.805z" fill="#DE8486"/><path d="M334.827 444.346c-25.101-4.357-50.746-13.924-67.841-21.182-18.52-7.865-31.27-14.789-31.397-14.859l.06-.11c.127.068 12.873 6.99 31.389 14.852 17.087 7.255 42.723 16.82 67.811 21.174l-.022.125z" fill="#122C64"/><path fill="#122C64" d="M244.544 426.22l-.02-.125 21.864-3.27-7.535-20.858.118-.043 7.588 21.003-.075.011zM261.636 435.232l-.026-.124 22.99-5.004-9.288-24.27.12-.045 9.34 24.408-.072.016zM281.964 441.216l-.023-.125 22.789-4.16-8.887-23.51.119-.046 8.94 23.654-.075.014zM308.406 445.896l-.015-.126 21.405-2.46-9.833-17.292.11-.063 9.93 17.458z"/><path fill="#FCFCFC" d="M388.508 159.508l-1.419 1.87-.186 2.34-1.87-1.42-2.34-.185 1.419-1.87.186-2.34 1.87 1.417zM425.135 125.79l-2.224 2.932-.293 3.67-2.933-2.226-3.669-.29 2.226-2.934.291-3.669 2.934 2.226zM430.131 12.87l-2.224 2.932-.293 3.67-2.932-2.227-3.67-.29 2.227-2.933.29-3.67 2.934 2.227zM361.527 314.399l-1.419 1.87-.186 2.34-1.87-1.419-2.34-.186 1.419-1.87.186-2.341 1.87 1.418zM123.116 100.06l-1.423 1.866-.192 2.34-1.866-1.423-2.34-.191 1.424-1.868.19-2.34 1.868 1.423z"/><g transform="translate(0 143.254)"><mask id="b" fill="#fff"><use xlink:href="#a"/></mask><path fill="#FCFCFC" mask="url(#b)" d="M9.064 2.694L6.852 5.607l-.29 3.649-2.915-2.212L0 6.755 2.213 3.84 2.5.19l2.915 2.212z"/></g><path fill="#FCFCFC" d="M270.88 391.776l-2.212 2.913-.29 3.649-2.915-2.213-3.646-.289 2.212-2.915.288-3.649 2.916 2.213zM118.987 398.772l-2.212 2.912-.29 3.649-2.915-2.213-3.648-.288 2.213-2.916.29-3.649 2.914 2.213zM15.188 299.683a4.296 4.296 0 1 1-8.592 0 4.296 4.296 0 0 1 8.592 0M427.982 235.473a2.637 2.637 0 1 1-5.273.002 2.637 2.637 0 0 1 5.273-.002M29.263 2.637a2.637 2.637 0 1 1-5.275 0 2.637 2.637 0 0 1 5.275 0M162.79 19.88a3.002 3.002 0 1 1-6.005 0 3.002 3.002 0 0 1 6.005 0"/><path d="M114.055 167.022h96.128v-25.32c0-5.723 4.64-10.364 10.364-10.364h93.855c5.723 0 10.363 4.64 10.363 10.365v171.032H118.874c-8.386 0-15.184-6.797-15.184-15.183V177.386c0-5.723 4.64-10.364 10.365-10.364" fill="#EFD456"/><path d="M223.048 275.352h-20.307c-13.39 0-24.245-10.855-24.245-24.245v-20.308c0-13.39 10.854-24.244 24.245-24.244h20.307c13.39 0 24.246 10.854 24.246 24.244v20.308c0 13.39-10.855 24.245-24.246 24.245" fill="#FFF"/><path d="M224.31 234.64c0-6.506-5.273-11.78-11.779-11.78-6.505 0-11.777 5.274-11.777 11.78 0 4.869 2.956 9.048 7.171 10.841l-4.511 10.432h19.21l-4.552-10.88c3.71-1.983 6.238-5.891 6.238-10.393" fill="#021550"/><mask id="d" fill="#fff"><use xlink:href="#c"/></mask><path fill="#FFF" mask="url(#d)" d="M113.316 296.784h1.749v-88.172h-1.749zM113.316 200.943h1.749v-15.032h-1.749z"/><path d="M270.733 253.242a3.83 3.83 0 1 1 5.412 5.415 3.83 3.83 0 0 1-5.412-5.415m8.612 8.6a8.446 8.446 0 0 0-3.522-14.057c.02-.127.033-.255.033-.385l-.038-24.108a2.334 2.334 0 0 0-4.666.004v.457h-4.29a1.534 1.534 0 0 0 0 3.065h4.29v4.161h-4.29a1.534 1.534 0 0 0 0 3.065h4.29v13.365c0 .104.007.205.02.305a8.446 8.446 0 0 0-3.774 14.127 8.446 8.446 0 0 0 11.947 0" fill="#010101" mask="url(#d)"/><path d="M234.919 222.345v21.986c0 6.285-6.18 11.91-11.696 15.677-4.34 2.968-8.265 4.778-8.424 4.847h-.006s-20.128-9.284-20.128-20.524v-21.986l20.134-6.441 20.12 6.44z" fill="#A8D626" mask="url(#d)"/><path d="M214.797 215.903l-.001.001v48.952c.354-.148 20.125-9.288 20.125-20.526v-21.987l-20.124-6.44z" fill="#448E1B" mask="url(#d)"/><path fill="#FFF" mask="url(#d)" d="M202.466 238.731l10.249 10.475 16.777-16.598-4.353-3.991-12.244 12.336-6.62-5.805z"/><path d="M330.218 305.46s-18.596 138.19-18.662 158.69l11.729.574s27.593-117.326 34.431-123.468c0 0 2.83-.47 3.923 0 1.092.472-3.931 118.243-5.754 125.848l12.44.992s25.454-132.572 24.477-161.805c0 0-5.204-14.683-26.967-13.36-21.762 1.322-33.43-2.054-35.617 12.53" fill="#2A2B2A" mask="url(#d)"/><path d="M324.605 463.989c-3.736-.495-10.064-.683-13.82-.341a44.04 44.04 0 0 1-9.654 4.2c-.987.295-2.024.578-2.783 1.222-.758.644-1.129 1.78-.517 2.543.534.666 1.554.794 2.46.857 6.935.475 16.446.459 23.355-.267.414-.044.855-.1 1.17-.348.251-.2.384-.491.49-.779.866-2.312.606-4.951-.7-7.087M369.877 462.186s-12.542-.033-14.06.764c-1.516.797-3.07 8.007-.584 9.04 2.486 1.032 28.274-1.031 28.274-1.031s2.306-2.965-4.612-4.77c-6.918-1.807-8-1.798-9.018-4.003" fill="#07033B" mask="url(#d)"/><path d="M389.953 228.837c3.002 3.217 5.77 6.675 8.143 10.408 3.571 5.62 6.21 11.802 8.833 17.953 3.42 8.023 6.903 16.32 7.02 25.081.038 2.835-.306 5.757-1.646 8.234-1.258 2.327-3.298 4.09-5.39 5.653-4.284 3.2-9.523 5.889-14.7 4.752 1.019-2.911 2.35-6.16 5.178-7.21.852-.317 1.786-.401 2.589-.837.899-.49 1.533-1.369 2.058-2.267 3.347-5.742 3.103-13.49-.599-18.997-1.623-2.413-3.802-4.364-5.951-6.293-5.628-5.05-11.307-10.246-15.21-16.797-3.493-5.857-5.858-13.836-3.89-20.68 2.138-7.424 10.096-2.715 13.565 1" fill="#0ABC85" mask="url(#d)"/><path d="M268.784 268.664c-1.153-.394-2.363-.908-3.055-1.957-.602-.914-.707-2.076-.785-3.18-.037-.5-.054-1.057.25-1.442.35-.44.971-.473 1.52-.472l3.401.01c.81.002 1.74-.054 2.233-.722.157-.215.253-.473.417-.682.414-.52 1.176-.591 1.792-.376.619.214 1.137.657 1.67 1.046a11.902 11.902 0 0 0 5.14 2.143c.412.063.84.11 1.21.315.531.296.864.88 1.073 1.471.524 1.487.42 3.522-.485 4.83-.818 1.187-1.993.896-3.283.886a35.192 35.192 0 0 1-11.098-1.87" fill="#FCE0D3" mask="url(#d)"/><path d="M348.336 241.694l-.976-13.034c-.108-1.417-.28-2.978-1.326-3.94-1.6-1.473-4.172-.686-6.081.351-7.818 4.247-13.716 11.23-19.449 18.031-5.732 6.801-11.695 13.746-19.576 17.872-5.822 3.045-10.85.882-17.087 1.09-.292.012-.645.046-1.036.104-.015.082-.012.156-.035.24-.28 1.07-.538 3.944-.84 5.01-.094.59-.165 1.182-.27 1.77-.123.699-.2 1.621-.526 2.316 4.45.974 10.998.82 13.12.796 6.504-.073 12.983-1.221 19.177-3.182 10.8-3.42 20.72-9.225 29.823-15.968 1.748-1.294 3.535-2.704 4.445-4.68.962-2.084.81-4.488.637-6.776" fill="#0ABC85" mask="url(#d)"/><path d="M352.858 171.212c-4.476 3.78-6.182 9.192-6.927 14.461a52.92 52.92 0 0 0-.258 12.61c.414 4.174 1.393 8.486 4.351 12.02 2.957 3.534 8.316 6.096 13.376 5.312 5.778-.894 9.134-5.511 11.6-9.763 3.57-6.159 6.786-12.72 6.456-19.63-.312-6.544-4.486-11.749-10.108-16.41-5.273-4.372-13.898-2.477-18.49 1.4" fill="#FCE0D3" mask="url(#d)"/><path d="M395.822 319.278c.012-.051.036-.098.025-.158-4.266-26.406.954-56.382-8.279-81.772l-5.121-11.487s-5.83-8.995-27.483-6.588c-15.47 1.718-14.202 20.51-14.202 20.51l.102-.006c-.486 5.483-11.59 47.069-13.102 68.628l-.563 8.007c-.088 1.264-1.042 3.623.681 4.741 1.202.78 10.81.779 12.326.84 4.599.186 9.252.162 13.854.056 16.371-.371 25.88 1.686 41.212-2.076.502-.124.657-.437.55-.695" fill="#06D79D" mask="url(#d)"/><path d="M359.58 257.992c-1.703-6.309-1.652-11.131-2.562-18.168-.841-6.51-1.86-12.913-3.13-19.04-.006-.02-.015-.024-.021-.039-.023-.382-.27-.603-.399-.194-1.198 3.825-2.611 6.86-4.347 9.342-.26.374-.198 1.254.083 1.47.949.73 2.98 1.8 3.624 3.77.896 2.739-.972 5.983-1.777 7.54-.154.299-.115.852 0 1.163 2.562 6.841 5.433 12.99 8.647 18.144.291.465.552-.296.474-.926.089-.17-.512-2.765-.592-3.062M370.458 229.28c-1.263 2.34-2.6 4.176-4.012 5.739-.254.283-.44 1.279-.18 1.88.812 1.874 1.648 3.366 2.587 4.611-2.468 7.54-4.987 14.84-8.007 20.728.883-12.313 1.91-24.584 3.37-36.477.432-3.508.626-7.036 2.2-6.136 1.187.676 2.497 3.564 3.585 5.115.156.223 1.6 1.963 1.594 2.275-.01.488-.993 1.999-1.137 2.266" fill="#006FD0" mask="url(#d)"/><path d="M360.445 236.921c-.041.008-.082.017-.124.022.04-.001.083-.016.124-.022" fill="#FFF" mask="url(#d)"/><path d="M357.032 231.042c-.463-1.383-1.332-3.298-1.139-5.074.133-1.206.65-1.797 1.23-1.814a6.478 6.478 0 0 1 3.063-1.019c.736-.051 2.238-.444 2.714 1.02.445 1.366-.177 3.775-.462 5.008-.494 2.136-1.17 4.05-1.93 5.884-.075.18-.15.34-.226.499l.003.005c.529 2.666 2.109 8.615 2.733 14.289 1.527-11.315 3.69-28.402 3.69-28.402s-.672-5.928-13.24-.886c0 0 1.8 12.683 3.423 23.886.474-2.713 1.18-5.252 1.953-8.732-.728-1.126-1.353-3.293-1.812-4.664" fill="#FFF" mask="url(#d)"/><path d="M360.699 236.853c-.024.007-.04.02-.067.026a.426.426 0 0 0 .067-.026" fill="#FFF" mask="url(#d)"/><path d="M360.59 236.897c.016-.005.027-.013.043-.018a.815.815 0 0 1-.189.042c.049-.009.098-.01.146-.024" fill="#004161" mask="url(#d)"/><path d="M361.701 259.021c.24-1.351.733-4.844 1.317-9.18-.623-5.676-2.204-11.624-2.733-14.29l-.002-.002c.074-.162.15-.323.225-.502.76-1.834 1.436-3.748 1.93-5.885.285-1.232.907-3.64.462-5.008-.476-1.463-1.978-1.07-2.714-1.018a6.467 6.467 0 0 0-3.064 1.019c-.578.017-1.096.607-1.229 1.813-.193 1.775.676 3.69 1.139 5.075.458 1.37 1.084 3.537 1.812 4.664-.773 3.48-1.48 6.018-1.953 8.732 1.255 8.669 2.403 16.45 2.526 16.782.139.374.486 1.021.904 1.008.042-.008.083-.03.123-.048.063-.023.124-.042.189-.1.025-.016.042-.043.066-.062.333-.355.686-1.217 1.002-2.998" fill="#07033B" mask="url(#d)"/><path d="M391.027 291.836c-.874-.648-1.77-1.308-2.804-1.646-.715-.232-1.47-.306-2.22-.331-1.112-.038-2.322.059-3.158.795-.645.571-.953 1.435-1.115 2.281a9.156 9.156 0 0 0 .18 4.16c.136.483.319.968.658 1.337.376.41.906.638 1.43.82 2.415.84 5.015.94 7.569 1.032 1.302.048 2.869-.044 3.514-1.176.232-.405.295-.88.355-1.342.074-.567.452-1.68.289-2.216-.155-.512-.75-.79-1.193-1.119l-3.505-2.595" fill="#FCE0D3" mask="url(#d)"/><path d="M345.931 185.673s-.005-6.585 2.533-13.17c0 0 1.13-3.35 0-5.205-2.442-4.004 23.222-15.822 33.108 3.69 9.886 19.51-4.793 31.677-4.793 31.677s.656-6.428-.048-8.679c-.703-2.25-3.797-3.375-3.797 0 0 3.376-1.34.142-1.34.142s-1.753-6.47 1.762-8.017c3.515-1.545 4.772-11.39-1.762-11.39-6.534 0-14.269 6.75-18.91 4.782 0 0-4.646-2.424-6.753 6.17" fill="#B97C00" mask="url(#d)"/><path d="M346.863 180.468s.834-5.912-2.941-7.405c0 0-4.648-2.18-2.421-9.01 0 0 .867-2.01 2.419-2.469 0 0 .761-.468.84 1.182.08 1.65 4.732 4.574 8.709 2.546l-6.606 15.156z" fill="#B97C00" mask="url(#d)"/></g></svg>
  </div>

  <div class="main">
    <main>
      <h1>All your files in one secure location, <br> accessible anywhere!!!</h1>

      <p id="description">Fylo stores all your most important files in one secure location. Access them wherever you need, share and collaborate with friends, family and co-workers.</p>  

      <p id="signUp">Sign up for early access</p>
    </main>

    <form action="">        
      <input id="box" type="email">
      <input id="btn" type="button" value="Sign Up"> 
    </form>

    <footer>
      <a href="#">Privacy Policy</a>
    </footer>
  </div>    
</body>
</html>

CSS

/* RESET */

h1, p, ul {
  margin: 0;
  padding: 0;  
}

ul {
  list-style: none;
}

/* General Style */

body{  
  margin: 0 auto;
  padding: 0 40px 0 40px;
  background-image: url(/images/bg-intro.svg);
  background-repeat: no-repeat; 
  background-size: 100%;
  display: grid;
  grid-template-areas:   
  "header"
  "illustration"
  "main";  
}

/* Grid Template */


.header{

  grid-area: header;
}

.illustration{
  grid-area: illustration;
}

.main{
  grid-area: main;
}

/* Header */

nav{
  display: flex;
  justify-content: space-between;
  padding-top: 40px;
}

#socialMedia{
  display: flex;
  align-items: center;  
}

#socialMedia svg{
  height: 25px;
  fill: white;
}

li + li{
  margin-left: 20px;
}

#illustrationMain{
  width: 75%;
  margin: 0 auto;
  margin-top: 50px; 
  margin-bottom: 35%;
}

/* Main */

h1{
  font-size: 1.8em;

  margin-bottom: 20px;
}
h1, #signUp, footer{
  font-family: 'Raleway', sans-serif;
  font-weight: 700;
  color: hsl(243, 87%, 12%);
}

#description{
  font-family: 'Open Sans', sans-serif;
  color: hsl(0, 0%, 50%);
  font-weight: 400;
  margin-bottom: 50px;
}

/* Form */

form{
  display: grid;   
}

#signUp, input{
  margin-bottom: 20px;  
}

#box{
  border: 1px solid hsl(0, 0%, 50%);
  border-radius: 3px;
  height: 40px;
}

#btn{
  color: #fff;
  font-weight: 700;
  background-color: hsl(163, 95%, 43%);
  border: none;
  height: 43px;
  width: 150px;  
  border-radius: 3px;
  box-shadow: 2px 2px 5px 2px rgba(0, 0, 0, 0.1);
}

/* Footer */

footer{
  float: right;
  margin-bottom: 30px;
  font-size: 1em;
}

/* Queries */

@media(min-width:1440px){
  body{
    grid-template-areas:
    "illustration header"
    "illustration main";
    grid-template-columns: 1fr 1fr;
    background-image: none;
    padding: 0;
    height: 100vh;
  }

  #socialMedia li svg, #logo-fylo{
    fill: hsl(243, 87%, 12%);
  }

  #illustrationMain{
    display: flex;
    justify-content: center;    
    background-image: linear-gradient(hsl(243, 87%, 12%), hsl(243, 86%, 85%));
    margin: 0 auto;
    width: 100% !important;    
    margin-top:0 !important; 
    margin-bottom: 0 !important;
  }  

  #illustrationMain svg{    
    width: 50%;
  }

  .header, .main{
    padding: 0 60px;    
  }

  .main{
    max-width: 75%;
  }

  form{    
    grid-template-columns: 2fr 1fr; 
    justify-content: space-between;
    grid-gap: 30px;
  }


  #btn{
    width: 100% !important;
  }  
}

SVG

<svg width="375" height="445" xmlns="http://www.w3.org/2000/svg"><defs><linearGradient x1="14.569%" y1="-6.457%" x2="132.964%" y2="153.753%" id="a"><stop stop-color="#110A6D" offset="0%"/><stop stop-color="#BDBAFA" offset="100%"/><stop stop-color="#BDBAFA" offset="100%"/></linearGradient></defs><path d="M0 376.28c67.572-32.674 124.62-32.674 171.144 0 69.787 49.013 141.558 86.511 242.423 59.172 67.244-18.226 67.244-163.377 0-435.452H0v376.28z" fill="url(#a)" fill-rule="evenodd"/></svg>
html5 css3 svg
  • 1

    And where’s your html? Where’s the svg code? Open the svg file in vscode, copy its code and paste here editing the question, take advantage and put tbm html

  • Your file .css is inside some folder, or is at the root of the site along with the file .html? Put the <head> from your document, thinking that your problem is not with SVG

  • It’s at the root next to . html, I’m going to put the <head> plus the repository link, thank you.

  • Guy here testing locally worked normal... his problem should be with the folders and paths of the files. It would be interesting to put an image of how the folders are and the <head> of the document with which you are indexed in it of . css etc http://prntscr.com/omg4dc look at the image working

  • Solved, both background-image: url(./images/bg-intro.svg); and background-image: url(images/bg-intro.svg); solved the problem. Thank you very much!

  • Yes yes, as I said in reply ;)

Show 1 more comment

1 answer

1


Your problem is this bar / that you put in the background image walk...

If the . css and image folder are in the site root, you don’t need to put it like this background-image: url(/images/bg-intro.svg); and that /images makes the css search in the root folder of the directory and not inside the local folder the correct would be just background-image: url(images/bg-intro.svg); without the / at the beginning of path.

inserir a descrição da imagem aqui

Recommended reading: Path to access html folders ,css,php etc

  • 2

    Perfect, totally clarified my doubt and I had my problem solved. Thank you very much

  • 1

    @Alexandre walks folder sometimes even confuses rss, but good that solved, and better still that it was not in the rss SVG

Browser other questions tagged html5 css3 svg

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