Svg pass parameter - html

I'm trying to pass parameters to the svg, but I'm not doing something wrong can you give me a hand?
Link: codesandbox
Html:
<object type="image/svg+xml" data="button.svg?color=yellow">
<param name="color" value="red" />
<param name="label" value="stop" />
</object>
Svg:
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 110 40"
width="100%"
height="100%">
<g>
<rect
id="button_rect"
x="5"
y="5"
width="100"
height="30"
rx="15"
ry="15"
fill="param(color) blue"
stroke="navy"
/>
<text id="button_label" x="55" y="30" text-anchor="middle"
font-size="25" fill="white" font-family="Verdana"
content-value="param(label)">
Ok
</text>
</g>
</svg>


The folks who have written the specs have noted that while this isn't implemented in the browser itself, you need to include a Javascript library. What they left out is where you should include it. Obviously your first thought might be to include it inside the html document but that's not the case - it needs to be included in the .svg file as:
<script type="text/ecmascript" xlink:href="https://dev.w3.org/SVG/modules/ref/master/ref2.js"></script>
Furthermore I'd recommend referencing the parameters using the url(#parameterName) syntax.
For example:
<html>
<head>
<title></title>
<meta charset="UTF-8" />
<link rel="stylesheet" href="./style.css" />
</head>
<body>
<object type="image/svg+xml" data="button.svg?fill=red">
<param name="fill" value="blue" />
<param name="stroke" value="red" />
</object>
</body>
</html>
and button.svg:
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 110 40"
width="100%"
height="100%">
<defs>
<ref id="paramX" param="fill" default="red"/>
<ref id="paramY" param="stroke" default="blue"/>
</defs>
<g>
<rect
id="button_rect"
x="5"
y="5"
width="100"
height="30"
rx="15"
ry="15"
fill="url(#paramX)"
stroke="url(#paramY)"
/>
<text
id="button_label"
x="55"
y="30"
text-anchor="middle"
font-size="25"
fill="white"
font-family="Verdana" >
Go
</text>
</g>
<script type="text/ecmascript" xlink:href="https://dev.w3.org/SVG/modules/ref/master/ref2.js"></script>
</svg>

Related

SVG images not being clipped to width of SVG container in IE11

When displaying some SVG icons within an SVG of a fixed width, they should be clipped to the width of that SVG container.
In all sensible browsers this works fine but in IE11 the icons extend beyond the width of the container.
Is there any workaround to counter this behaviour?
<html>
<head>
<title></title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>
<body>
<svg class="task" width="50">
<rect class="task-rectangle" fill="#FFE5E5" width="50" height="50"></rect>
<svg class="svgs-using-def-with-image-href" x="4" y="5">
<use href="#GreenTick" x="0"/>
<use href="#Triangle" x="18"/>
<use href="#Facebook" x="36"/>
</svg>
<svg class="reusable-icons" width="0" height="0">
<defs>
<svg id="GreenTick" width="18" height="18">
<image href="https://svgur.com/i/XvH.svg" width="18" height="18"/>
</svg>
<svg id="Triangle" width="18" height="18">
<image href="https://svgur.com/i/XwA.svg" width="18" height="18"/>
</svg>
<svg id="Facebook" width="18" height="18">
<image href="https://svgur.com/i/Xx8.svg" width="18" height="18"/>
</svg>
</defs>
</svg>
</svg>
</body>
</html>
IE11: Chrome:

IE9-11 & Edge don't properly scale SVG files. You can add height, width, viewBox and CSS rules as workarounds.
I tried the overflow CSS style mentioned, and it works fine. How do you test the code? The reason it doesn't work in your side may be related to the browser cache, please try to clear IE cache and test again.
Edit: I refer to the code you provide, and it has such a problem: If you use the <g> element, I think you also need to use clip CSS to achieve the same effect.
This is a simple sample:
<html>
<head>
<title></title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>
<body>
<svg class="resource-row" data-level="1" x="0" y="0" width="100%" height="576" overflow="hidden">
<g class="task" overflow="hidden" clip-path="url(#clip)">
<rect class="task-rectangle" fill="#FFE5E5" width="50" height="50"></rect>
<svg class="svgs-using-def-with-image-href" x="4" y="5" width="46" overflow="hidden">
<use href="#GreenTick" x="0" />
<use href="#Triangle" x="18" />
<use href="#Facebook" x="36" />
</svg>
</g>
</svg>
<svg class="reusable-icons" width="0" height="0">
<defs>
<rect class="task-rectangle" id="rect" width="50" height="50"></rect>
<clipPath id="clip">
<use xlink:href="#rect" />
</clipPath>
<svg id="GreenTick" width="18" height="18">
<image href="https://svgur.com/i/XvH.svg" width="18" height="18" />
</svg>
<svg id="Triangle" width="18" height="18">
<image href="https://svgur.com/i/XwA.svg" width="18" height="18" />
</svg>
<svg id="Facebook" width="18" height="18">
<image href="https://svgur.com/i/Xx8.svg" width="18" height="18" />
</svg>
</defs>
</svg>
</body>
</html>
Result in IE 11:

External svg file is loaded but doesn't show up

I want to load an external svg file into my Html document at runtime. As discussed here, I use an <object type="image/svg+xml"></object> and change the data attribute via Javascript.
My html looks like this (pasted the cross.svg file in below for reference):
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<object id="svg_verified" type="image/svg+xml" data="cross.svg"></object>
<svg>
<circle cx="50" cy="50" r="50" fill="#111"/>
<rect y="-5" width="140" height="10" fill="white" transform="rotate(45)"/>
<rect y="-5" width="140" height="10" fill="white" transform="translate(100,0) rotate(135)"/>
</svg>
</body>
</html>
The loaded page looks like this:
However, I can see in the inspector that the svg file is loaded:
How do I make the SVG file in the object render correctly?

You are missing xmlns="http://www.w3.org/2000/svg". The xmlns attribute is required for image/svg+xml MIME type.
Are SVG parameters such as 'xmlns' and 'version' needed?
<object type="image/svg+xml" data="https://svgshare.com/i/GhM.svg"></object>
<!---->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<circle cx="50" cy="50" r="50" fill="#111"/>
<rect y="-5" width="140" height="10" fill="white" transform="rotate(45)"/>
<rect y="-5" width="140" height="10" fill="white" transform="translate(100,0) rotate(135)"/>
</svg>

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>

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>

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.

SVG code efficiency

So, I've been asked to create a static SVG file, and have been told to use <defs> and <use> to make it more efficient.
I understand there is code repetition but I'm not sure how to go about reducing what I have and still being able to have the same output.
Here is the code:
<!DOCTYPE html>
<html>
<body>
<center>
<h1>Static SVG</h1>
<svg width="200" height="200">
<!--transforming the group of shapes so that the origin is at the center of the svg image-->
<g transform="translate(100,100)">
<!--This is effectively the background-->
<rect x="-100" y="-100" width="200" height="200" style="fill:grey" />
<!--Inner rounded rectangle-->
<rect x="-40" y="-40" rx="5" ry="5" width="80" height="80" style="fill:black" />
<!--Four inner-most short arrows-->
<polygon points="0,-60 10,-50 0,-55 -10,-50" style="fill:black;stroke:lime;stroke-width:1" />
<polygon points="60,0 50,-10 55,0 50,10" style="fill:black;stroke:lime;stroke-width:1" />
<polygon points="-60,0 -50,10 -55,0 -50,-10" style="fill:black;stroke:lime;stroke-width:1" />
<polygon points="0,60 10,50 0,55 -10,50" style="fill:black;stroke:lime;stroke-width:1" />
<!--Middle short arrows-->
<polygon points="0,-80 10,-70 0,-75 -10,-70" style="fill:red;stroke:black;stroke-width:1" />
<polygon points="80,0 70,-10 75,0 70,10" style="fill:red;stroke:black;stroke-width:1" />
<polygon points="-80,0 -70,10 -75,0 -70,-10" style="fill:red;stroke:black;stroke-width:1" />
<polygon points="0,80 10,70 0,75 -10,70" style="fill:red;stroke:black;stroke-width:1" />
<!--Outer-most short arrows-->
<polygon points="0,-100 10,-90 0,-95 -10,-90" style="fill:lime;stroke:black;stroke-width:1" />
<polygon points="100,0 90,-10 95,0 90,10" style="fill:lime;stroke:black;stroke-width:1" />
<polygon points="-100,0 -90,10 -95,0 -90,-10" style="fill:lime;stroke:black;stroke-width:1" />
<polygon points="0,100 10,90 0,95 -10,90" style="fill:lime;stroke:black;stroke-width:1" />
<!--Longer Arros positioned diagonally from origin-->
<polygon points="40,50 50,50 50,40 60,60" style="fill:yellow;stroke:black;stroke-width:1" />
<polygon points="-50,-40 -50,-50 -40,-50 -60,-60" style="fill:yellow;stroke:black;stroke-width:1" />
<polygon points="50,-40 50,-50 40,-50 60,-60" style="fill:yellow;stroke:black;stroke-width:1" />
<polygon points="-50,40 -50,50 -40,50 -60,60" style="fill:yellow;stroke:black;stroke-width:1" />
<!--The elliptical shape in the centre of the rounded Square-->
<ellipse cx="0" cy="0" rx="20" ry="40" style="fill:white" />
</g>
</svg>
</center>
</body>
</html>

You're drawing the same polygons for the most part albeit rotated and positioned differently.
Along with moving their styles into a class, you can use defs and use like this:
<defs>
<!-- Define your shape here once -->
<polygon points="0,-60 10,-50 0,-55 -10,-50"
class="inner-arrow" id="inner-arrow" />
</defs>
<!-- Reuse multiple times
with the rotation (and translation if needed) handled by transform -->
<use xlink:href="#inner-arrow" />
<use xlink:href="#inner-arrow" transform="rotate(90)" />
<use xlink:href="#inner-arrow" transform="rotate(180)" />
<use xlink:href="#inner-arrow" transform="rotate(270)" />
Here's a DEMO that has the first inner arrows' code updated.

You can use and reuse symbols, which can have individual viewBoxes and be rotated and scaled like groups. The units in the symbols are proportional to the viewBox.
Here is a JSFiddle with your arrows coded and grouped using symbols:
<svg width="200" height="200" viewBox="0 0 200 200">
<defs>
<symbol id="sm_arrow" viewBox="0 0 20 10">
<polygon points="10,0 20,10 10,5 0,10" />
</symbol>
<symbol id="lg_arrow" viewBox="0 0 200 200">
<polygon points="0,10 10,10 10,0 20,20" />
</symbol>
<symbol id="triple_arrow" viewBox="0 5 200 10">
<use xlink:href="#sm_arrow"/>
<use xlink:href="#sm_arrow" transform="translate(0,20)" />
<use xlink:href="#sm_arrow" transform="translate(0,40)" />
</symbol>
<symbol id="arrows" viewBox="0 0 200 200">
<g id="small_arrows">
<use xlink:href="#triple_arrow" transform="translate(0,-90)" />
<use xlink:href="#triple_arrow" transform="translate(290,0) rotate(90)" />
<use xlink:href="#triple_arrow" transform="translate(200,290) rotate(180)" />
<use xlink:href="#triple_arrow" transform="translate(-90,200) rotate(-90)" />
</g>
<g id="long_arrows" transform="translate(60,60)">
<use xlink:href="#lg_arrow" transform="translate(80,80)" />
<use xlink:href="#lg_arrow" transform="translate(0,80) rotate(90)" />
<use xlink:href="#lg_arrow" transform="rotate(180)" />
<use xlink:href="#lg_arrow" transform="translate(80,0) rotate(-90)" />
</g>
</symbol>
<g id="background">
<rect width="200" height="200"/>
<rect x="60" y="60" rx="5" ry="5" width="80" height="80"/>
<ellipse cx="100" cy="100" rx="20" ry="40"/>
</g>
</defs>
<use xlink:href="#background"/>
<use xlink:href="#arrows"/>
</svg>
The styles were transferred to a CSS block or file:
polygon {
stroke-width: 1;
}
#triple_arrow use:nth-child(1) {
fill:black;
stroke:lime;
}
#triple_arrow use:nth-child(2) {
fill: red;
stroke: black;
}
#triple_arrow use:nth-child(3) {
fill: lime;
stroke: black;
}
#lg_arrow {
fill:yellow;
stroke:black;
}
#background rect:nth-child(1) {
fill:grey;
}
#background rect:nth-child(2) {
fill:black;
}
#background ellipse {
fill:white;
}

Embed a svg object with parameter

Who has an idea or a hint
I would like to embed a svg object inside die svg Tag and change this parameter
HTML/SVG (not going on)
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
</head>
<body>
<svg width="2000" height="2000">
<object type="image/svg+xml" data="lamp.svg" style="width: 450px; height:150px;">
<param name="color" value="yellow" />
</object>
</svg>
</body>
</html>
SVG File lamp.svg:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="40" height="40">
<title>lamp</title>
<circle cx="30" cy="30" r="15" fill="param(color)" stroke-width=""/>
</svg>
With the IMAGE TAG no tag parameter passing is possible.
<image x="0" y="0" width="20" height="20" xlink:href="lamp.svg"><param name="color" value="yellow" /></image>

Currently browsers don't support passing parameters this way, though there's an SVG Parameters spec being developed by W3C. The examples in the spec use a script to emulate support for the feature.
Note: the shim param.js goes in the SVG file, not the html file:
e.g.,
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink"
width="68" height="68">
<rect x="10" y="10" height="48" width="48" stroke="black" stroke-width="1" fill="param(color) red">
</rect>
<rect x="29" y="0" height="10" width="10" fill="black"></rect>
<text x="24" y="46" fill="param(text) black" style="font-size:32px;"
content-value="param(number) 1">1</text>
<script type="text/ecmascript" xlink:href="param.js" />
</svg>