Converting Adobe XD prototype to HTML

Question

I made this prototype:

Now I want to convert it to HTML, though I am having trouble with two things. First is the SVG. I can't get it to go off the screen, it keeps auto resizing to fit the screen.

Second, how would I go about making the green part below the SVG path?

What my HTML looks like currently:

<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" href="{{ url_for('static', filename='css/main.css') }}" />
    <link href="https://fonts.googleapis.com/css?family=Roboto:100i,300,300i,400,500" rel="stylesheet">
  </head>
  <body>
    <div class="overlay" id="heading">
      <h1>Welcome</h1>
    </div>
    <img>
      <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="3837.005 1394.976 2112.025 1122.24">
      <defs>
        <style>
          .cls-1 {
            fill: rgba(0, 0, 0, 0);
            stroke: #ffeb3b;
            stroke-width: 20px;
          }

          .cls-2 {
            margin-left: -30px;
            margin-right: -30px;
          }
        </style>
      </defs>
      <g class="cls-2" transform="matrix(1, 0, 0, 1, 0, 0)">
        <path id="Path_8-2" data-name="Path 8" class="cls-1" d="M-109.8,306.4s86.5-29.5,173.4-14.1,284.3,61.6,408.1,90.3S729.9,311.9,886.9,259s145.2,272.8,237.4,263,130-247.5,223.7-202.2,105.3,50,194.3,33.4S1726.8,107,1785.6,104s39.3,286.8,320.5,309.5,76.3,0" transform="translate(3906 1313)"/>
      </g>
      </svg>
    </img>

    <div class="overlay" id="introabout">
      <h2><i>Live data from the Faroe Islands<br />
      displayed visually.</i></h2>
    </div>

    Hello, World!
  </body>
  <footer></footer>
</html>

Your sample code doesn't reproduce the page as represented in the screenshot. It is missing some styling. — Paul LeBeau, Apr 30 '17 at 04:54

Paul LeBeau · Answer 1 · 2018-10-02T15:37:06.760

Some comments on your code:

<svg> is not a valid child element of <img>. <img> elements don't have children.

First is the SVG. I can't get it to go off the screen, it keeps auto resizing to fit the screen.

Your SVG has a viewBox. If an SVG has a viewBox, it will scale to fit it's parent element. If you want it to go off the page, either (a) make its parent element larger than the page, or (b) remove the viewBox so that the SVG is always drawn at 1:1 scale.

Second, how would I go about making the green part below the SVG path?

Add a new path whose top edge matches the current path, but which encloses an area below it by continuing down and around and connects back to the start point. Set its fill to green.

score 0 · Answer 2 · answered Feb 12 '19 at 15:39

YOU CAN SVG IMPORT:

body{
  background-color: blue;
  color:white;
}

<!DOCTYPE html>
<html>

<head>
  <title></title>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <link rel="stylesheet" href="{{ url_for('static', filename='css/main.css') }}" />
  <link href="https://fonts.googleapis.com/css?family=Roboto:100i,300,300i,400,500" rel="stylesheet">
</head>

<body>
  <div class="overlay" id="heading">
    <h1>Welcome</h1>
  </div>

  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="3837.005 1394.976 2112.025 1122.24">
      <defs>
        <style>
          .cls-1 {
            fill: rgba(0, 0, 0, 0);
            stroke: #ffeb3b;
            stroke-width: 20px;
          }

          .cls-2 {
            margin-left: -30px;
            margin-right: -30px;
          }
        </style>
      </defs>
      <g class="cls-2" transform="matrix(1, 0, 0, 1, 0, 0)">
        <path id="Path_8-2" data-name="Path 8" class="cls-1" d="M-109.8,306.4s86.5-29.5,173.4-14.1,284.3,61.6,408.1,90.3S729.9,311.9,886.9,259s145.2,272.8,237.4,263,130-247.5,223.7-202.2,105.3,50,194.3,33.4S1726.8,107,1785.6,104s39.3,286.8,320.5,309.5,76.3,0" transform="translate(3906 1313)"/>
      </g>
      </svg>


  <div class="overlay" id="introabout">
    <h2><i>Live data from the Faroe Islands<br />
      displayed visually.</i></h2>
  </div>

  Hello, World!
</body>
<footer></footer>

</html>

Converting Adobe XD prototype to HTML

2 Answers2