I have a very simple SVG which gets rendered differently between Firefox and Chrome and I have no idea why. Any suggestions? I would not want to use any CSS to specially style things to get them in sync but have a simple stand-alone SVG.
<?xml version="1.0" encoding="utf-8" ?>
<svg baseProfile="tiny" height="400.0" version="1.2" width="400.0" xmlns="http://www.w3.org/2000/svg">
<rect fill="#fff" fill-opacity="0" stroke="#000" height="90.0" rx="5.0" ry="5.0" stroke-width="3" width="350.0" x="0" y="0"/>
<text font-size="18.0" stroke="#000" text-anchor="start" x="5.0" y="51.0">func: foo_bar_longer</text>
<text font-size="18.0" stroke="#000" text-anchor="end" x="345.0" y="51.0">class: bar_foo_longer</text>
</svg>
Firefox 67 on Linux:
Chromium 75.0.3770.90:
It seems setting font_family="Arial,Helvetica,sans-serif" on all text elements solved the problem. Browsers do not have the same default font.
I have an SVG element that is composed of a shape and text. This element is replicated several times inside the SVG file and I wanted to take advantage of the symbol and use tags.
But I need to be able to pass values to update the text nodes inside the symbol as each symbol will have it's own value.
Is there a way to do this without Javascript?
<svg xmlns="http://www.w3.org/2000/svg" id="Layer_1" data-name="Layer 1" viewBox="0 0 800 800">
<defs>
<g id="Initials">
<circle id="bgColor" cx="200" cy="200" r="80" class="cls-9"/>
<text id="label" fill="white" font-size="50" transform="translate(170, 220)">
10
</text>
</g>
</defs>
<use href="#Initials" />
<use href="#Initials" x="200" y="0" />
</svg>
I have been trying to add an svg image to my django website for awhile now. However, I keep getting this error:
GET http://localhost:8000/images/enter.svg 404 (Not Found)
This is what I wrote
<img src='/images/enter.svg'>
and my folder structure is as such
index.html
- images
-- enter.svg
I've been googling around but I can't find a solution. I hear people copying and pasting the 'data' of the svg instead, but I haven't been able to find an example. Just in case it's actually useful, here's the data of the svg image I'm trying to attach to my page:
<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.0//EN' 'http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd'>
<svg fill-opacity="1" xmlns:xlink="http://www.w3.org/1999/xlink" color-rendering="auto" color-interpolation="auto" text-rendering="auto" stroke="black" stroke-linecap="square" stroke-miterlimit="10" shape-rendering="auto" stroke-opacity="1" fill="black" stroke-dasharray="none" font-weight="normal" stroke-width="1" xmlns="http://www.w3.org/2000/svg" font-family="'Dialog'" font-style="normal" stroke-linejoin="miter" font-size="12" stroke-dashoffset="0" image-rendering="auto">
<!--Unicode Character 'DOWNWARDS ARROW WITH CORNER LEFTWARDS' (U+21B5)-->
<defs id="genericDefs" />
<g>
<g>
<path d="M159.3281 330.8906 L76.6406 330.8906 Q92.5312 348.75 99.4219 368.8594 L89.2969 368.8594 Q69.6094 340.1719 34.5938 327.375 L34.5938 320.4844 Q69.6094 307.6875 89.2969 279 L99.4219 279 Q92.5312 299.25 76.6406 317.1094 L145.4062 317.1094 L145.4062 215.7188 L159.3281 215.7188 L159.3281 330.8906 Z" stroke="none" />
</g>
</g>
</svg>
Hi your svg code didnt seem to work so i think if you put this piece of code in wherever you want you svg placed it should work:
<svg width="124.73px" height="153.14px" viewBox="0 0 124.73 153.14">
<g>
<g>
<path d="M124.73,115.17H42.05c10.59,11.91,18.19,24.56,22.78,37.97H54.7C41.58,134.02,23.34,120.19,0,111.66v-6.89
c23.34-8.53,41.58-22.36,54.7-41.48h10.12c-4.59,13.5-12.19,26.2-22.78,38.11h68.77V0h13.92V115.17z"/>
</g>
</g>
</svg>
It ofcourse can be turned into an svg file and then linked into your code as you were trying. But you could also just put the code above into your code. example:
<html>
<body>
<h1> some content or whatever </h1>
<svg width="124.73px" height="153.14px" viewBox="0 0 124.73 153.14">
<g>
<g>
<path d="M124.73,115.17H42.05c10.59,11.91,18.19,24.56,22.78,37.97H54.7C41.58,134.02,23.34,120.19,0,111.66v-6.89
c23.34-8.53,41.58-22.36,54.7-41.48h10.12c-4.59,13.5-12.19,26.2-22.78,38.11h68.77V0h13.92V115.17z"/>
</g>
</g>
</svg>
</body>
</html>
like this it should show up on your page without having the linking problem. You can style your svg like this aswell now by giving your path an id.
https://css-tricks.com/lodge/svg/ there are plenty tutorials on this page that helped me a lot with svg.
Hope this works!
I'm actually learning SVG in order to import a vector animation I did in Flash inside a website, then integrate some "interactivity" (with the SVG property begin="mouseover").
So first, here is a very simple example of SVG animation I made with the help of the Flash plugin called "Flash2SVG" : https://codepen.io/Rojiraan/pen/owboXr
(StackOverflow want some code when using a Codepen.io link, the problem is that my SVG is way too long, so I did an ultra conversion of my HTML code)
<div class="svg-container">
<svg version="1.1" class="svg-content" viewBox="0 0 550 400" preserveAspectRatio="xMinYMin meet">
<g id="SEQUENCE_No1" overflow="visible">
<g id="THE_RED_RECTANGLE" transform="translate(71 68.05)">
<g>
<g id="Layer11_0_FILL">
<path fill="#F30" stroke="none" d="M408 263.95L408 0 0 0 0 263.95 408 263.95Z"/>
</g>
</g>
</g>
<g display="none">
<g>
<g id="Layer10_0_FILL">
<path fill="#6CF" stroke="none" d="some numbers..."/>
</g>
</g>
<animate attributeName="display" repeatCount="indefinite" dur="3.333s" keyTimes="0;.9;1" values="none;inline;inline"/>
</g>
<g display="none">
<g>
<g id="Layer9_0_FILL">
<path fill="#6CF" stroke="none" d="some numbers..."/>
</g>
</g>
<animate attributeName="display" repeatCount="indefinite" dur="3.333s" keyTimes="0;.8;.9;1" values="none;inline;none;none"/>
</g>
<!-- Et cetera... -->
</svg>
</div>
What I want to do is to start the animation (with the little blue points) when I'm hovering the red rectangle. The thing is I don't really know where to put my "begin" property, I tried various thing without success.
Thanks a lot for reading & for the help !
I recently had an svg element that I created, and it was working locally with the self-closing tags like this:
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" style="height: 25px; width: 300px; display: inline-block;">
<circle cx="10" cy="10" r="4" stroke="black" stroke-width="1" fill="none" />
<line x1="14" y1="10" x2="286" y2="10" stroke-width="2" stroke="black" />
<circle cx="290" cy="10" r="4" stroke="black" stroke-width="1" fill="none" />
</svg>
but when rendered on the production server it came out with everything nested. The first circle was correctly nested in the svg element, but the line was nested within the first circle, and the second circle was nested within the line. The ending closing tag lines looked like: </circle></line></circle></svg>
I had to change the svg elements to use closing tags like so:
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" style="height: 25px; width: 300px; display: inline-block;">
<circle cx="10" cy="10" r="4" stroke="black" stroke-width="1" fill="none" ></circle>
<line x1="14" y1="10" x2="286" y2="10" stroke-width="2" stroke="black" ></line>
<circle cx="290" cy="10" r="4" stroke="black" stroke-width="1" fill="none" ></circle>
</svg>
Everywhere i look it suggests that closing tags on svg elements are optional. What gives?
There is nothing wrong with your initial markup (as you can see: http://jsfiddle.net/6b0fv1a2/), so that makes me believe that it's your server's mime types.
Apache:
"Though the SVG MIME Type has been included by default in the list of supported MIME Types in the Apache Web server since version 1.3.x, older versions may need to be updated."
.htaccess
Perhaps the easiest way to set the correct MIME Type is to use an ".htaccess" file. This is a configuration file that is often hidden. If your server does not have such a file, create a file and name it ".htaccess", and associate the SVG file extensions with the correct MIME Type; if the file already exists, you can simply add the correct entries to it. The particular lines you should add are:
AddType image/svg+xml svg
AddType image/svg+xml svgz
Read more (and other servers): http://www.w3.org/services/svg-server/