CODEWITHSUNDEEP
htmlcsssvg
user310291
user310291

Reputation: 38228

Why my svg picture is truncated at the bottom when embedded in html

my svg is just text over a circke with full screen rectangle

svg

<svg version="1.1"
 baseProfile="full"
 xmlns="http://www.w3.org/2000/svg">

<rect width="100%" height="100%" fill="red"/>

<circle cx="150" cy="100" r="80" fill="green"/>

<text x="150" y="125" font-size="60" text-anchor="middle" fill="white">Hello SVG</text>

</svg>

When in img src it is arbitriraly truncated at the bottom why ? How to fix this ?

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title of the document</title>
</head>

<body>
    <img src="hello.svg" type="image/svg+xml">
</body>

</html>

Upvotes: 1

Views: 1102

Answers (2)

Paul LeBeau
Paul LeBeau

Reputation: 101938

You have not specified any size for the <img> or <svg> so the browser is choosing the default size for indeterminate sized objects, which is 300x150. So your circle will get cut off at the bottom. The solution, as chipChocolate has already pointed out, is to give one or the other an appropriate size.

Upvotes: 2

Weafs.py
Weafs.py

Reputation: 22998

Specify the width, height and viewPort attributes of svg.

<svg version="1.1" width="300" height="200" viewPort="0 0 300 200" baseProfile="full" xmlns="http://www.w3.org/2000/svg">
  <rect width="100%" height="100%" fill="red" />
  <circle cx="150" cy="100" r="80" fill="green" />
  <text x="150" y="125" font-size="60" text-anchor="middle" fill="white">Hello SVG</text>
</svg>

Upvotes: 2

Related Questions