My SVG looks different on different platforms. Why so?
Examples-
On my laptop
On my mobile(text running out of box):
Not just text running out of boxes, also arrow positions shift a bit. I make them using diagrams.net if it matters.
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="294px" height="93px" viewBox="-0.5 -0.5 294 93" content="<mxfile host="app.diagrams.net" modified="2021-06-15T10:21:25.327Z" agent="5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.101 Safari/537.36 Edg/91.0.864.48" etag="-FsMRlwHQoiKKWVryYAU" version="14.7.7" type="device"><diagram id="LL04G3attlTuYx5v-QkI" name="Page-1">7VVbb5swFP41SNsDEZhA0scuJdlLpamdtGcHn4AVg6ltStivnw3mlhC1e5w0KSL2dy4+N53PCXb55SBwmT1zAsxBHrk4wZODkO97SP8ZpOmQyH/ogFRQYpVG4JX+Bgt6Fq0oATlTVJwzRcs5mPCigETNMCwEr+dqJ87mr5Y4hRvgNcHsFv1Fico6dBt6I/4daJqpIWEryXGvbAGZYcLrCRTETrATnKvulF92wEzx+rp0dvs70iEwAYX6jIHwefQitgdoNs+N+yPZePHZtV7eMatswg6KmPb37cS1WxSl5jzHPKkaW57oreK9wJVt8x61gh+Vl1HYe8mUKrXwEP/U3xd4q0Cq3rMOe+nBo7hG7igS+r4Y2BEn51TwqiBuwhkXXXwiPX5BYeiYiu309+r81VyMb6/N64RzyprOUnvGedkKg2Ct//XcSc6wvBEMDhdMKkFBZ+YVUN+3y3nBZYkTGKJhtAA3s9NmokHI1Hka66QH66UefFSvfyLhe0lp42Ixq0nr9as48EM/XHRjETOpstXf619d1yuChVoR0EXbq0pxQTGTRgTHVmeYzS6Em5Fty/2/Ax914AQqyVyCFZ7J/r641yiaBYXahQBmL5o064wqeG3TDp5qTWPtBORM33yTU7+3zSXVdZfWTp5NuP1FCX4eKAINyK5LXL8abOLHKPaGeKabu1/DIBRcJpDd5AfgOSjRaBUrDXqaaeZ0WY8chbYPK7Tu4GxCUdvNKrT8aLkxHdyP9KEPlkH668hUrWzC90H8Bw==</diagram></mxfile>"><defs/><g><rect x="1" y="1" width="289.24" height="87.5" fill="#000000" stroke="#000000" stroke-width="2" pointer-events="all" transform="translate(2,3)" opacity="0.25"/><rect x="1" y="1" width="289.24" height="87.5" fill="#ffffff" stroke="#7ea6e0" stroke-width="2" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 287px; height: 1px; padding-top: 45px; margin-left: 2px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; "><font><font style="font-size: 16px">http GET Request</font><br /></font><div style="background-color: rgb(255 , 255 , 255) ; font-family: "consolas" , "courier new" , monospace ; line-height: 22px ; font-size: 14px"><div style="font-family: "consolas" , "courier new" , monospace ; line-height: 22px"><span style="color: #a31515">"https://www.dart.dev/tutorials/web/</span></div><div style="font-family: "consolas" , "courier new" , monospace ; line-height: 22px"><span style="color: #a31515">fetch-data"</span></div></div></div></div></div></foreignObject><text x="146" y="48" fill="#000000" font-family="Helvetica" font-size="12px" text-anchor="middle">http GET Request...</text></switch></g></g><switch><g requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"/><a transform="translate(0,-5)" xlink:href="https://www.diagrams.net/doc/faq/svg-export-text-problems" target="_blank"><text text-anchor="middle" font-size="10px" x="50%" y="100%">Viewer does not support full SVG 1.1</text></a></switch></svg>
What should I do to make sure it looks uniform everywhere?
As #robert-longson said in the comments, using more widely distributed and web safe fonts like Arial, Helvetica, etc solved the issue.
Related
I try to use hover for button element and for SVG within button. But in here piece of code https://codepen.io/asssel/pen/wvrojOd It doesn't work for SVG. Help me how to implement it.
.tag {
width: 120px;
padding: 6px 12px;
border: 1px solid #1F1F1F;
border-radius: 18px;
cursor: pointer;
color: #1F1F1F;
background-color: white;
&_label {
font-size: 12px;
line-height: 12px;
letter-spacing: 1.2px;
text-transform: uppercase;
}
&_remove {
border: none;
background-color: transparent;
}
&:hover, &_icon path {
background-color: #1F1F1F;
color: white;
stroke: white;
}
}
<div class='tag'>
<span class='tag_label'>default tag</span>
<button class='tag_remove'>
<svg class='tag_icon' width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M8.5 1.5L1.5 8.5M8.5 8.5L1.5 1.5" stroke="#404040" stroke-width="2" stroke-linecap="square"/>
</svg>
</button>
</div>
First of all I changed your CSS to plain CSS to make it work in the snippet.
I guess that the main problem is the hover effect. To change the stroke of the <path> your CSS selector need to start from the element that is hovered. So, replace &_icon path with &:hover &_icon path.
And then you also make sure that you use fill and stroke properties for SVG elements.
.tag {
width: 120px;
padding: 6px 12px;
border: 1px solid #1F1F1F;
border-radius: 18px;
cursor: pointer;
color: #1F1F1F;
background-color: white;
display: flex;
align-items: center;
}
.tag_label {
font-size: 12px;
letter-spacing: 1.2px;
text-transform: uppercase;
white-space: nowrap;
}
.tag_icon path {
stroke: #1F1F1F;
}
.tag_remove {
border: none;
background-color: transparent;
}
.tag:hover,
.tag:hover .tag_icon path {
background-color: #1F1F1F;
color: white;
stroke: white;
}
<div class='tag'>
<span class='tag_label'>default tag</span>
<button class='tag_remove'>
<svg class='tag_icon' width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M8.5 1.5L1.5 8.5M8.5 8.5L1.5 1.5" stroke-width="2" stroke-linecap="square"/>
</svg>
</button>
</div>
I understand that there is a different render process, but why is the stroke so funky on rounded rectangles compared to a rounded div with a border?
body {
background: #1a1a1a;
display: flex;
justify-content: center;
padding-top: 50px;
}
.svg-square {
fill: #75604A;
stroke: white;
stroke-width: 1px;
}
.div-square {
background-color: #75604A;
margin-left: 10px;
width: 60px;
height: 60px;
border: 1px solid white;
border-radius: 10px;
}
span {
display: block;
margin: 20px;
color: white;
}
<span>svg</span>
<svg width="60" height="60">
<rect class="svg-square" width="60" height="60" rx="10" />
</svg>
<div class="div-square"></div>
<span>div</span>
FIDDLE: https://codepen.io/kirkbross/pen/gEGGvx
It seems like it's a half pixel stroke on the svg and even when I increase it to 2, the sides seem thinner than the top and bottom.
I want to understand the physics here. This example is an svg with a stroke of 1. These corners seem janky compared to a div with a border.
Well part of it is that you're cutting off half the stroke-width because your rect is exactly the size of your svg element. Look at:
<rect x="1" y="1" class="svg-square" width="58" height="58" rx="10" />
Still not as good at rounded corners as CSS drawing - but much more reasonable.
I'm trying to mask a div with an SVG 'frame'. Despite positioning the SVG absolutely and setting height/width to 100%, there's still slivers of the parent div visible around the bottom and right edges.
html
<div class="container">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="-144 2 502 609" style="enable-background:new -144 2
502 609;" xml:space="preserve" preserveAspectRatio="none">
<style type="text/css"></style>
<path class="st0" d="M-144,2v608h501.2V2H-144z M354.5,608.5l-
496.2-12.2C-147,201.8-62.3,4.5,112.5,4.5S367.8,205.8,354.5,608.5z"
/>
</svg>
</div>
css
html,
body {
height: 100%;
width: 100%;
margin:0;
padding:0;
}
.container {
width: 50%;
height: 50%;
top: 25%;
margin:auto;
background: pink;
position: relative;
}
svg {
position: absolute;
top:0;
left:0;
height: 100%;
width: 100%;
}
.st0{
fill: white;
}
https://jsfiddle.net/samseurynck/b2x58ahc/
I'd like the white SVG shape to completely mask out the pink div behind it, with no slivers of the div showing (on the bottom and right sides) like it is now. The slivers seem to scale up with the browser. I'm curious if this is even possible with SVG if the way I've tried it isn't working.
I've made a few changes to the path. While the viewBox="-144 2 502 609"the path goes to 501.2 instead of 502 (in x) and to 608.5 instead of 609 (in y). I've changed those numbers in your path.
html,
body {
height: 100%;
width: 100%;
margin:0;
padding:0;
}
.container {
width: 50%;
height: 50%;
top: 25%;
margin:auto;
background: pink;
position: relative;
}
svg {
position: absolute;
top:0;
left:0;
height: 100%;
width: 100%;
}
.st0{
fill: white;
}
<div class="container">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="-144 2 502 609" style="enable-background:new -144 2 502 609;" xml:space="preserve" preserveAspectRatio="none">
<style type="text/css">
</style>
<path class="st0" d="M-144,2v609h502V2H-144z M354.5,609l-496.2-12.2C-147,201.8-62.3,4.5,112.5,4.5S367.8,205.8,354.5,609z"
/>
</svg>
</div>
hi guys i need some help i need to create a tooltip with an image inside it however this is for an svg map so i cant use divs like in css and html.I have managed to create an image tooltip .However only one image can appear when i hover on all elements how can i make different images appear for different svg elements ? this is the code i have used for my tooltip:
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" onload="init(evt)" width="380" height="100">
<style>
.caption{
font-size: 14px;
font-family: Georgia, serif;
}
.tooltip{
font-size: 12px;
}
.tooltip_bg{
fill: white;
stroke: black;
stroke-width: 1;
opacity: 0.85;
}
</style>
<script type="text/ecmascript">
<![CDATA[
function init(evt)
{
if ( window.svgDocument == null )
{
svgDocument = evt.target.ownerDocument;
}
tooltip = svgDocument.getElementById('tooltip');
tooltip_bg = svgDocument.getElementById('tooltip_bg');
}
function ShowTooltip(evt, mouseovertext)
{
tooltip.setAttributeNS(null,"x",evt.clientX+11);
tooltip.setAttributeNS(null,"y",evt.clientY+27);
tooltip.setAttributeNS(null,"visibility","visible");
length = tooltip.getComputedTextLength();
tooltip_bg.setAttributeNS(null,"width",length+8);
tooltip_bg.setAttributeNS(null,"x",evt.clientX+8);
tooltip_bg.setAttributeNS(null,"y",evt.clientY+14);
tooltip_bg.setAttributeNS(null,"visibility","visibile");
}
function HideTooltip(evt)
{
tooltip.setAttributeNS(null,"visibility","hidden");
tooltip_bg.setAttributeNS(null,"visibility","hidden");
}
]]>
</script>
<text class="caption" x="10" y="35">Mouseover a square</text>
<text class="caption" x="10" y="50">to display a tooltip</text>
<rect id="rect1" x="160" y="10" width="60" height="60" fill="blue"
onmousemove="ShowTooltip(evt)"
onmouseout="HideTooltip(evt)"/>
<rect id="rect2" x="240" y="10" width="60" height="60" fill="green"
onmousemove="ShowTooltip(evt)"
onmouseout="HideTooltip(evt)"/>
<rect class="tooltip_bg" id="tooltip_bg"
x="0" y="0" rx="4" ry="4"
width="55" height="17" visibility="hidden"/>
<image xlink:href="Blooper-icon.png" class="tooltip" id="tooltip"x="0" y="0"height="50px"width="50px"visibility="hidden"/>
</svg>
in HTML
<div class="svgTooltip"></div>
<svg>
<path class="tempClass" .......>
</path>
</svg>
in CSS
.svgTooltip {
pointer-events: none;
position: absolute;
font-size: 15px;
text-align: center;
background: white;
padding-bottom: 5px;
padding-left: 5px;
padding-right: 5px;
z-index: 5;
height: 30px;
line-height: 30px;
margin: 0 auto;
color: #21669e;
border-radius: 5px;
box-shadow: 0 0 0 1px rgb(122, 92, 92);
display: none;
}
.svgTooltip::after {
content: "";
position: absolute;
left: 50%;
top: 100%;
width: 0;
height: 0;
margin-left: -10px;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid rgb(122, 92, 92);
}
.active {
display: block;
}
in JS
$(function() {
$tooltip = $(".svgTooltip");
$(".tempClass").hover(
function() {
$tooltip.addClass("active");
$tooltip.html($(this).attr("title"));
},
function() {
$tooltip.removeClass("active");
}
);
});
$(document).on("mousemove", function(e) {
$tooltip.css({
left: e.pageX - 30,
top: e.pageY - 70
});
});
I have an SVG within a web page, it consists of images + text
<object data="/infographic/timeline.svg" type="image/svg+xml">
<img src="/infographic/timeline.svg" alt="Timeline">
</object>
All the images are responsive, but the text isn't, so the text becomes really, REALLY small.
snippet of SVG (its massive)
<defs>
<style>
.cls-1 {
font-size: 60.014px;
}
.cls-1, .cls-10 {
opacity: 0.69;
}
.cls-1, .cls-10, .cls-4, .cls-5, .cls-7, .cls-8, .cls-9 {
fill: #ffffff;
}
.cls-1, .cls-10, .cls-3, .cls-4, .cls-5, .cls-6, .cls-7, .cls-9 {
text-anchor: middle;
}
.cls-1, .cls-3, .cls-6 {
font-family: "Roboto";
}
.cls-2 {
font-size: 32.014px;
}
.cls-3 {
font-size: 14.089px;
}
.cls-3, .cls-6 {
fill: #db7426;
}
.cls-4, .cls-6 {
font-size: 32px!important;
}
.cls-10, .cls-4, .cls-5, .cls-7, .cls-8, .cls-9 {
font-family: Roboto;
}
.cls-5 {
font-size: 24px;
}
.cls-5, .cls-8, .cls-9 {
font-weight: 400;
}
.cls-6 {
font-weight: 600;
}
.cls-10, .cls-7 {
font-size: 18.75px;
font-weight: 300;
}
.cls-7 {
opacity: 0.4;
}
.cls-8, .cls-9 {
font-size: 22px;
}
</style>
</defs>
<text id="Who_are_you_what_do_you_do_what_s_your_why_What_s_been_keepi" data-name="Who are you, what do you do, what’s your why? What’s been keepi" class="cls-8" x="397.706" y="535.325">Who are you, what do you do, what’s your why?<tspan x="397.706" dy="26.4">What’s been keeping you lying awake at night. </tspan></text>
Is there anyway I can get the text size to increase as the SVG/screen width gets smaller?
Any help would be greatly appreciated.
It's not possible with pure SVG (at least not yet). The only solution would be to either:
inline the SVG and manipulate the size of the text with javascript.
inline the SVG and control the size of the text with media queries (see below).
Add CSS to the SVG and use media queries there (see below).
use media queries to switch SVGs when the page gets small
Example of option 2: Using media queries with inlined SVGs
text {
font-size: 10px;
}
#media (max-width: 400px) {
text {
font-size: 20px;
}
}
<svg viewBox="0 0 100 100" width="100%" height="100%">
<circle cx="50" cy="50" r="50" fill="orange"/>
<text x="50" y="60" text-anchor="middle">Testing</text>
</svg>
Example of option 3: Using media queries in CSS in the SVGs
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100%" height="100%">
<style>
text {
font-size: 10px;
}
#media (max-width: 400px) {
text {
font-size: 20px;
}
}
</style>
<circle cx="50" cy="50" r="50" fill="orange"/>
<text x="50" y="60" text-anchor="middle">Testing</text>
</svg>
This is possible using the foreignObject svg element in a html context and some adjustment of the viewBow.
On this demos, the text stay selectable:
.demo {
overflow: auto;
resize: both;
border:1px black solid;
width: 230px;
height: 130px
}
.svgtext {
font-size: 28rem;
height:100%;
width:100%
}
<div class="demo">
<svg x="0" y="30" viewBox="0 0 100 100" width="100%" height="100%">
<foreignObject x="12" y="23" height="100%" width="100%">
<div class"svgtext">
Hello world!
</div>
</foreignObject>
</svg>
</div>
Use preserveAspectRatio to control the resizing behavior:
.demo {
overflow: auto;
resize: both;
border:1px black solid;
width: 230px;
height: 130px
}
.svgtext {
font-size: 28rem;
height:100%;
width:100%
}
<div class="demo">
<svg preserveAspectRatio="none" x="0" y="30" viewBox="0 0 100 100" width="100%" height="100%">
<foreignObject x="12" y="23" height="100%" width="100%">
<div class"svgtext">
Hello world!
</div>
</foreignObject>
</svg>
</div>