CODEWITHSUNDEEP
svg
Charles Meyers
Charles Meyers

Reputation: 9

inline svg using percentages not scaling

I'm trying to design an SVG flag which consists of several rectangles spanning 100% of the horizontal available screen and an SVG logo in the center. I want it to be response and I'm using percentages everywhere except the logo in the middle, for that I'm using and SVG inline code, not in percentages. I can't get the logo to scale or center. Here is a stripped down version of the SVG in an HTML file.

` 

<svg xmlns="http://www.w3.org/TR/SVG11" width="100%" height="100%"       
    viewBox="0% 0% 100% 100%" >
<rect x="0&" y="0%" width="100%" height="100%" fill="yellow"/>
<use href="#logo" x=50% y=50% width="100%" height="100%" fill="blue" />
</svg>

<svg xmlns="http://www.w3.org/TR/SVG11" viewBox="0 0 100 100">
<def>
<g id="logo">
<rect x="0" y="0" width="100" height="100"/>
</g>
</def>
</svg>

</body>
</html>

`

Upvotes: 0

Views: 44

Answers (1)

Jorma Turkenburg
Jorma Turkenburg

Reputation: 183

Have a look at the code below. Is that what you're trying to do?

You have to draw the SVG in some size and set the viewBox to those dimensions. I just went with 100 x 60.

You can then make width and height relative. In your case by setting width="100%" to stretch it to the container's width.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>
  <div style="width: 300px">
    <svg xmlns="http://www.w3.org/TR/SVG11" width="100%" height="100%" viewBox="0 0 100 60">
      <defs>
        <g id="logo">
          <circle cx="50" cy="30" r="20" fill="orange"></circle>
        </g>
      </defs>
      <rect x="0" y="0" width="100" height="20" fill="red" />
      <rect x="0" y="20" width="100" height="20" fill="white" />
      <rect x="0" y=40 width="100" height="20" fill="blue" />
      <use href="#logo"></use>
    </svg>
  </div>
</body>

</html>

Upvotes: 1

Related Questions