I have a problem. In my project I use MaterialPrime lib and Material Design Lite. On my login page I use the m:button element to submit form (as I understand Ajax request happens here). Then redirect to panel page where I include resources, but I receive error for PrimeFaces.ajax (ajax property is null). But using h:comandButton solves this problem. Is there some fix?
Maybe attribute for m:button not to do ajax request, or another button tag? I need this button for page style.
This is login page.
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:mp="http://primefaces.org/ui/material"
xmlns:p="http://primefaces.org/ui">
<h:head>
<title>Welcome to Joy</title>
<h:outputStylesheet library="css" name="general.css" />
</h:head>
<h:body>
<ui:debug hotkey="x" />
<div class="center">
<h:form prependId="true">
<div class="row">
<mp:input icon="mdi-action-account-circle" id="login_field" label="Login" value="#{userBean.dtoUser.login}">
<f:validator validatorId="notNullValidator" />
<f:validateBean binding="#{loginValidator}" />
<f:attribute name="passwordValue" value="#{passwordValue}" />
</mp:input>
<mp:input icon="mdi-action-https" id="password_field" label="Password" value="#{userBean.dtoUser.password}"
binding="#{passwordValue}" required="true" />
<mp:button icon="mdi-content-forward" value="Login" action="#{userBean.login}" />
<mp:button immediate="true" icon="mdi-social-person-add" value="Sign Up" flat="true" action="registration" />
</div>
</h:form>
</div>
</h:body>
</html>
This is page after accepting login
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core" xmlns:mp="http://primefaces.org/ui/material" xmlns:p="http://primefaces.org/ui"
xmlns:xlink="http://www.w3.org/1999/xlink" lang="en">
<h:head>
<title><ui:insert name="title" /></title>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="description" content="A front-end template that helps you build fast, modern mobile web apps." />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- Add to homescreen for Chrome on Android -->
<meta name="mobile-web-app-capable" content="yes" />
<link rel="icon" sizes="192x192" href="images/touch/chrome-touch-icon-192x192.png" />
<!-- Add to homescreen for Safari on iOS -->
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="apple-mobile-web-app-title" content="Material Design Lite" />
<link rel="apple-touch-icon-precomposed" href="apple-touch-icon-precomposed.png" />
<!-- Tile icon for Win8 (144x144 + tile color) -->
<meta name="msapplication-TileImage" content="images/touch/ms-touch-icon-144x144-precomposed.png" />
<meta name="msapplication-TileColor" content="#3372DF" />
<!-- SEO: If your mobile URL is different from the desktop URL, add a canonical link to the desktop page https://developers.google.com/webmasters/smartphone-sites/feature-phones -->
<!--
<link rel="canonical" href="http://www.example.com/">
-->
<link href="https://fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&lang=en"
rel="stylesheet" />
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
<h:outputStylesheet library="css" name="material.min.css" />
<h:outputStylesheet library="css" name="styles.css" />
<h:outputScript library="js" name="material.min.js" />
</h:head>
<h:body>
<div class="demo-layout mdl-layout mdl-js-layout mdl-layout--fixed-drawer mdl-layout--fixed-header">
<div class="demo-drawer mdl-layout__drawer mdl-color--blue-grey-900 mdl-color-text--blue-grey-50">
<header class="demo-drawer-header">
<h:graphicImage name="images/user.jpg" styleClass="demo-avatar" />
<div class="demo-avatar-dropdown">
<span><h:outputText value="#{userBean.user.login}" /> </span>
<div class="mdl-layout-spacer"></div>
<button id="accbtn" class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon">
<i class="material-icons" role="presentation">arrow_drop_down</i> <span class="visuallyhidden">Accounts</span>
</button>
<ul class="mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect" for="accbtn">
<li class="mdl-menu__item">hello#example.com</li>
<li class="mdl-menu__item">info#example.com</li>
<li class="mdl-menu__item"><i class="material-icons">add</i>Add another account...</li>
</ul>
</div>
</header>
</div>
<main class="mdl-layout__content mdl-color--grey-100">
<div class="mdl-grid demo-content">
<div class="demo-charts mdl-color--white mdl-shadow--2dp mdl-cell mdl-cell--12-col mdl-grid">
<svg fill="currentColor" width="200px" height="200px" viewBox="0 0 1 1"
class="demo-chart mdl-cell mdl-cell--4-col mdl-cell--3-col-desktop">
<use xlink:href="#piechart" mask="url(#piemask)" /> -->
<text x="0.5" y="0.5" font-family="Roboto" font-size="0.3" fill="#888" text-anchor="middle" dy="0.1">82<tspan
font-size="0.2" dy="-0.07">%</tspan></text>
</svg>
<svg fill="currentColor" width="200px" height="200px" viewBox="0 0 1 1"
class="demo-chart mdl-cell mdl-cell--4-col mdl-cell--3-col-desktop">
<use xlink:href="#piechart" mask="url(#piemask)" />
<text x="0.5" y="0.5" font-family="Roboto" font-size="0.3" fill="#888" text-anchor="middle" dy="0.1">82<tspan
dy="-0.07" font-size="0.2">%</tspan></text>
</svg>
<svg fill="currentColor" width="200px" height="200px" viewBox="0 0 1 1"
class="demo-chart mdl-cell mdl-cell--4-col mdl-cell--3-col-desktop">
<use xlink:href="#piechart" mask="url(#piemask)" />
<text x="0.5" y="0.5" font-family="Roboto" font-size="0.3" fill="#888" text-anchor="middle" dy="0.1">82<tspan
dy="-0.07" font-size="0.2">%</tspan></text>
</svg>
<svg fill="currentColor" width="200px" height="200px" viewBox="0 0 1 1"
class="demo-chart mdl-cell mdl-cell--4-col mdl-cell--3-col-desktop">
<use xlink:href="#piechart" mask="url(#piemask)" />
<text x="0.5" y="0.5" font-family="Roboto" font-size="0.3" fill="#888" text-anchor="middle" dy="0.1">82<tspan
dy="-0.07" font-size="0.2">%</tspan></text>
</svg>
</div>
<div class="demo-graphs mdl-shadow--2dp mdl-color--white mdl-cell mdl-cell--8-col">
<svg fill="currentColor" viewBox="0 0 500 250" class="demo-graph">
<use xlink:href="#chart" />
</svg>
<svg fill="currentColor" viewBox="0 0 500 250" class="demo-graph">
<use xlink:href="#chart" />
</svg>
</div>
<div class="demo-cards mdl-cell mdl-cell--4-col mdl-cell--8-col-tablet mdl-grid mdl-grid--no-spacing">
<div class="demo-updates mdl-card mdl-shadow--2dp mdl-cell mdl-cell--4-col mdl-cell--4-col-tablet mdl-cell--12-col-desktop">
<div class="mdl-card__title mdl-card--expand mdl-color--teal-300">
<h2 class="mdl-card__title-text">Updates</h2>
</div>
<div class="mdl-card__supporting-text mdl-color-text--grey-600">Non dolore elit adipisicing ea reprehenderit consectetur
culpa.</div>
<div class="mdl-card__actions mdl-card--border">
Read More
</div>
</div>
<div class="demo-separator mdl-cell--1-col"></div>
<div
class="demo-options mdl-card mdl-color--deep-purple-500 mdl-shadow--2dp mdl-cell mdl-cell--4-col mdl-cell--3-col-tablet mdl-cell--12-col-desktop">
<div class="mdl-card__supporting-text mdl-color-text--blue-grey-50">
<h3>View options</h3>
<ul>
<li><label for="chkbox1" class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect"> <input type="checkbox"
id="chkbox1" class="mdl-checkbox__input" /> <span class="mdl-checkbox__label">Click per object</span>
</label></li>
<li><label for="chkbox2" class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect"> <input type="checkbox"
id="chkbox2" class="mdl-checkbox__input" /> <span class="mdl-checkbox__label">Views per object</span>
</label></li>
<li><label for="chkbox3" class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect"> <input type="checkbox"
id="chkbox3" class="mdl-checkbox__input" /> <span class="mdl-checkbox__label">Objects selected</span>
</label></li>
<li><label for="chkbox4" class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect"> <input type="checkbox"
id="chkbox4" class="mdl-checkbox__input" /> <span class="mdl-checkbox__label">Objects viewed</span>
</label></li>
</ul>
</div>
<div class="mdl-card__actions mdl-card--border">
Change location
<div class="mdl-layout-spacer"></div>
<i class="material-icons">location_on</i>
</div>
</div>
</div>
</div>
</main>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"
style="position: fixed; left: -1000px; height: -1000px;">
<defs>
<mask id="piemask" maskContentUnits="objectBoundingBox">
<circle cx="0.5" cy="0.5" r="0.49" fill="white" />
<circle cx="0.5" cy="0.5" r="0.40" fill="black" />
</mask>
<g id="piechart">
<circle cx="0.5" cy="0.5" r="0.5" />
<path d="M 0.5 0.5 0.5 0 A 0.5 0.5 0 0 1 0.95 0.28 z" stroke="none" fill="rgba(255, 255, 255, 0.75)" />
</g>
</defs>
</svg>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 500 250"
style="position: fixed; left: -1000px; height: -1000px;">
<defs>
<g id="chart">
<g id="Gridlines">
<line fill="#888888" stroke="#888888" stroke-miterlimit="10" x1="0" y1="27.3" x2="468.3" y2="27.3" />
<line fill="#888888" stroke="#888888" stroke-miterlimit="10" x1="0" y1="66.7" x2="468.3" y2="66.7" />
<line fill="#888888" stroke="#888888" stroke-miterlimit="10" x1="0" y1="105.3" x2="468.3" y2="105.3" />
<line fill="#888888" stroke="#888888" stroke-miterlimit="10" x1="0" y1="144.7" x2="468.3" y2="144.7" />
<line fill="#888888" stroke="#888888" stroke-miterlimit="10" x1="0" y1="184.3" x2="468.3" y2="184.3" />
</g>
<g id="Numbers">
<text transform="matrix(1 0 0 1 485 29.3333)" fill="#888888" font-family="'Roboto'" font-size="9">500</text>
<text transform="matrix(1 0 0 1 485 69)" fill="#888888" font-family="'Roboto'" font-size="9">400</text>
<text transform="matrix(1 0 0 1 485 109.3333)" fill="#888888" font-family="'Roboto'" font-size="9">300</text>
<text transform="matrix(1 0 0 1 485 149)" fill="#888888" font-family="'Roboto'" font-size="9">200</text>
<text transform="matrix(1 0 0 1 485 188.3333)" fill="#888888" font-family="'Roboto'" font-size="9">100</text>
<text transform="matrix(1 0 0 1 0 249.0003)" fill="#888888" font-family="'Roboto'" font-size="9">1</text>
<text transform="matrix(1 0 0 1 78 249.0003)" fill="#888888" font-family="'Roboto'" font-size="9">2</text>
<text transform="matrix(1 0 0 1 154.6667 249.0003)" fill="#888888" font-family="'Roboto'" font-size="9">3</text>
<text transform="matrix(1 0 0 1 232.1667 249.0003)" fill="#888888" font-family="'Roboto'" font-size="9">4</text>
<text transform="matrix(1 0 0 1 309 249.0003)" fill="#888888" font-family="'Roboto'" font-size="9">5</text>
<text transform="matrix(1 0 0 1 386.6667 249.0003)" fill="#888888" font-family="'Roboto'" font-size="9">6</text>
<text transform="matrix(1 0 0 1 464.3333 249.0003)" fill="#888888" font-family="'Roboto'" font-size="9">7</text>
</g>
<g id="Layer_5">
<polygon opacity="0.36" stroke-miterlimit="10"
points="0,223.3 48,138.5 154.7,169 211,88.5
294.5,80.5 380,165.2 437,75.5 469.5,223.3 " />
</g>
<g id="Layer_4">
<polygon stroke-miterlimit="10"
points="469.3,222.7 1,222.7 48.7,166.7 155.7,188.3 212,132.7
296.7,128 380.7,184.3 436.7,125 " />
</g>
</g>
</defs>
</svg>
</div>
</h:body>
</html>
Related
I read this Pocket Guide to SVG today and learned a lot from it, but... it does not cover animation. I need some guidance on how to do a simple animation. I dont need any transitions between frames, I just want to define shapes for frame one, shapes for frame two, etc.
https://svgpocketguide.com/book/
<!-- https://svgpocketguide.com/book/#section-4 -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" width="1080" height="1080">
<!-- the doctype and svg need to be like this to render in Firefox -->
<rect width="1080" height="1080" fill="white"/>
<!-- delay frames by waiting 0.5 seconds between frames -->
<animation frame 1>
<line x1="75" y1="75" x2="10" y2="50" stroke="hsl(0,82%,56%)" stroke-width="3"/>
<line x1="75" y1="75" x2="175" y2="475" stroke="hsl(236,82%,56%)" stroke-width="3"/>
<circle cx="10" cy="50" r="5" fill="black" />
<circle cx="75" cy="75" r="5" fill="black" />
<circle cx="175" cy="475" r="5" fill="black" />
</animation frame 1>
<animation frame 2>
<line x1="75" y1="75" x2="10" y2="50" stroke="hsl(0,82%,56%)" stroke-width="3"/>
<line x1="75" y1="75" x2="175" y2="475" stroke="hsl(236,82%,56%)" stroke-width="3"/>
<circle cx="10" cy="50" r="5" fill="black" />
<circle cx="75" cy="75" r="5" fill="black" />
<circle cx="175" cy="475" r="5" fill="black" />
</animation frame 2>
</svg>
<!-- https://svgpocketguide.com/book/#section-4 -->
<!-- https://oak.is/thinking/animated-svgs/ -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" width="1080" height="1080">
<rect width="1080" height="1080" fill="white"/>
<line x1="400" y1="400" x2="10" y2="515" stroke="hsl(250,82%,56%)" stroke-width="3">
<animate
attributeName="x1"
dur="0.5s"
values="50;100;200;350;400"
calcMode="discrete"
repeatCount="1"
/>
<animate
attributeName="y1"
dur="0.5s"
values="50;100;200;350;400"
calcMode="discrete"
repeatCount="1"
/>
<animate
attributeName="stroke"
dur="0.5s"
values="hsl(50,82%,56%);hsl(100,82%,56%);hsl(150,82%,56%);hsl(200,82%,56%);hsl(250,82%,56%)"
calcMode="discrete"
repeatCount="1"
/>
</line>
<circle cx="50" cy="50" r="5" fill="black" />
<circle cx="100" cy="100" r="5" fill="black" />
<circle cx="200" cy="200" r="5" fill="black" />
<circle cx="350" cy="350" r="5" fill="black" />
<circle cx="400" cy="400" r="5" fill="black" />
</svg>
This question shows a method for frame-based animation in an SVG. It uses CSS animation, but you could achieve the same thing with SMIL. However, the CSS way is a little cleaner IMO.
SIMPLE – Animate Multiple SVGs in Sequence (like a looping GIF)
Here's another answer, that may help: SVG frame-based animation
I'm new to D3 and I need help with one task. When you click a button only text is overwritten but I want to remove all the children of the group with certain id and fill it with children of #refresh.
<?xml version="1.0"?>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=9" />
<style>
body {
background-color: #000000;
}</style>
</head>
<body>
<button onclick="refreshSvgElement('#c3a4ca3d-da2d-4b94-9a35-1088ba0cac19')">Change</button>
<svg id="refresh">
<text class="text" x="0.40576159954071" y="51.4495124816895" fill="#E0E0E0" font-family="Calibri" font-size="55.4" transform="matrix(1,0,0,1,200,200)">BLUE</text>
</svg>
<svg id="main_window" position="fixed" width="100%" height="100%" viewBox="0 0 8074 4098">
<g>
<g id="c3a4ca3d-da2d-4b94-9a35-1088ba0cac19">
<text class="text" x="0.40576159954071" y="51.4495124816895" fill="#E0E0E0" font-family="Calibri" font-size="55.4" transform="matrix(1,0,0,1,200,200)">RED</text>
</g>
</g>
</svg>
</body>
</html>
<script src="https://d3js.org/d3.v3.js"> </script>
<script>
function refreshSvgElement(id) {
var refreshElement = d3.select("#refresh");
var selection = d3.select(id)
.select("text")
<!-- .remove() -->
<!-- .append("text") -->
.text(refreshElement.text());
}
</script>
This is how I would do it. Store selection as a var, then select all current text and use .remove(), then append new text.
<?xml version="1.0"?>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=9" />
<style>
body {
background-color: white;
}</style>
</head>
<body>
<button onclick="refreshSvgElement('#c3a4ca3d-da2d-4b94-9a35-1088ba0cac19')">Change</button>
<svg id="refresh">
<text class="text" x="0.40576159954071" y="51.4495124816895" fill="#E0E0E0" font-family="Calibri" font-size="55.4" transform="matrix(1,0,0,1,200,200)">BLUE</text>
</svg>
<svg id="main_window" position="fixed" width="100%" height="100%" viewBox="0 0 8074 4098">
<g>
<g id="c3a4ca3d-da2d-4b94-9a35-1088ba0cac19">
<text class="text" x="0.40576159954071" y="51.4495124816895" fill="#E0E0E0" font-family="Calibri" font-size="55.4" transform="matrix(1,0,0,1,200,200)">RED</text>
</g>
</g>
</svg>
</body>
</html>
<script src="https://d3js.org/d3.v3.js"> </script>
<script>
function refreshSvgElement(id) {
var refreshElement = d3.select("#refresh");
console.log(refreshElement.text())
var selection = d3.select(id)
selection.selectAll("text").remove();
selection.append("text").text(refreshElement.text()).attr("x", "0.5").attr("y", "50");
}
</script>
I use saveSvgAsPng to get svg`s dataUri. Then I converted the dataUri to .svg by Java.The original picture had foreginObject tag.When I save it to .svg,and open it with chrome,the foreignObject tag do not show.This is my .svg tag
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1477" height="1033" class=".save" style="-webkit-tap-highlight-color:rgba(0,0,0,0)" id="saveImg" viewBox="-201.48349917081265 -185.1995003306789 1477 1033" preserveASpecRatio="none" version="1.1">
<g>
<g class="textGroup">
<text>This is test</text>
</g>
<g>
<foreignObject x="200" y="50" width="200" height="200">
<div>
<p style="color:rgb(0,0,0)">this is P</p>
</div>
</foreignObject>
</g>
</g>
</svg>
As you know,Directly with chrome open. svg do not have <html>and <body>
i use innerHTML to add svg element,it works fine in chrome but in firefox it can not display; thanks so much for any ansower
<!DOCTYPE html>
<html>
<head>
<title>SVGInnerHTML demo</title>
<meta charset="utf-8" />
<script src="svginnerhtml.js"></script>
<script>
alter = function () {
var svg = document.getElementById('container');
svg.innerHTML = '<rect width="100" height="60" fill="green" />'
+ '<circle cx="10" cy="19" r="20" fill="blue"></circle>'
+ '<text x="15" y="20" fill="white">hello world</text>'
+ '<g transform="translate(0, 70)"><rect width="100" height="20" fill="yellow" /></g>';
}
</script>
</head>
<body>
<svg id="container" width="100px" height="100px" http://www.w3.org/2000/svg>
</svg>
<p>
<button onclick="alter()">set .innerHTML</button>
<button onclick="alert(document.getElementById('container').innerHTML)">get .innerHTML</button>
</p>
</body>
</html>
A workaround is to add the innerHTML code as HTML, and not SVG. You can do that simply by using a <div> (instead of <svg>) in your HTML code as the placeholder, and insert the full SVG via innerHTML.
Replace:
<svg id="container" width="100px" height="100px">
</svg>
with
<div id="container" style="width: 100px; height: 100px">
</div>
And wrap your innerHTML string within an <svg> element:
var svg = document.getElementById('container');
svg.innerHTML = '<svg><rect width="100" height="60" fill="green" />'
+ '<circle cx="10" cy="19" r="20" fill="blue"></circle>'
+ '<text x="15" y="20" fill="white">hello world</text>'
+ '<g transform="translate(0, 70)">'
+ '<rect width="100" height="20" fill="yellow" /></g></svg>';
This should work in both Chrome and Firefox. Here's a JSFiddle.
I've been using the jQuery.svg plugin to do some SVG rendering and it works perfectly but I also want to have the server render some SVG into the page and I can't get that to work. How do I add some SVG like below into the page so that Firefox will render it?
<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:svg="http://www.w3.org/2000/svg" >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<div class="map editable" id="map_1"><svg height="600" version="1.1" width="600" xmlns="http://www.w3.org/2000/svg"><image height="600" href="/system/graphics/1/original/floor-plan-large.gif" width="500" x="0" y="0" /><circle cx="300" cy="580" fill="red" r="5" stroke-width="2" stroke="red" /><circle cx="300" cy="400" fill="red" r="5" stroke-width="2" stroke="red" /><circle cx="260" cy="400" fill="red" r="5" stroke-width="2" stroke="red" /><circle cx="260" cy="340" fill="red" r="5" stroke-width="2" stroke="red" /><circle cx="140" cy="340" fill="red" r="5" stroke-width="2" stroke="red" /><polyline fill="none" points="300,580 300,400 260,400 260,340 140,340" stroke-width="3" stroke="blue" /></svg></div>
<svg version="1.1" baseProfile="full" width="300px" height="200px" xmlns="http://www.w3.org/2000/svg">
<circle cx="150px" cy="100px" r="50px" fill="#ff0000" stroke="#000000" stroke-width="5px"/>
</svg>
<svg:svg version="1.1" baseProfile="full" width="300px" height="200px">
<svg:circle cx="150px" cy="100px" r="50px" fill="#ff0000" stroke="#000000" stroke-width="5px"/>
</svg:svg>
</body>
</html>
Do I need a meta tag saying that there is SVG content in the page or define the SVG namespace somehow?
See this link (SVG in HTML introduction # Mozilla Developer Center).
An inline SVG example can be seen here.
In 2020, using SVG in html or xhtml is now possible in all browsers.
Example of HTML / SVG(2.0) code that I use
<?xml version="1.0" encoding="UTF-8" ?>
<html xmlns:svg="http://www.w3.org/2000/svg">
<head> <title>SVG within XHTML Demo</title> </head>
<body>
<p>
<b>Electricity Plan</b>
</p>
<svg xmlns='http://www.w3.org/2000/svg' version='2.0' width='8000px' height='6000px'>
<defs>
<g id="prise">
<line x1="0" y1="0" x2="20" y2="0" stroke="blue"/>
<line x1="20" y1="-15" x2="20" y2="15" stroke="blue"/>
<path d="m40,-20 a20,20 0 0,0 0,40" fill="none" stroke="blue"/>
<line x1="40" y1="-20" x2="40" y2="-28" stroke="blue"/>
<line x1="40" y1="20" x2="40" y2="28" stroke="blue"/>
</g>
</defs>
<line x1='100' y1='50' x2='140' y2='50' stroke='blue'/>
<use href='#prise' x='140' y='50'/>
</svg>
</body>
</html>
What is your doctype? Make sure it is the same as the example, i.e. XHTML, not HTML 4.01 TRANSITIONAL.
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Here's an example of building inline SVGs dynamically with JavaScript.