local svg image not found when web page loaded - html
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!
Related
Starting a SVG animation with keyframes using "begin" property
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 !
SVG "use" doesn't show
I have and SVG icon I need to use in a several toolbars on a page. If I add the SVG code to the location in the toolbar, it works. However, since I need to use it many times I'm trying to define it one at the bottom of the page and then with "use" having it displayed in several places. So I define it: <svg> <defs> <g id="svgHelp" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none"> <path d="M1 12c0-6.075 4.925-11 11-11s11 4.925 11 11-4.925 11-11 11-11-4.925-11-11z"/> <path d="M11.792 14v-1c1.609 0 3-1.391 3-3s-1.391-3-3-3c-1.194 0-2.342.893-2.792 1.921"/> <path d="M12 17v1"/> </g> </defs> </svg> And then try to use it: <use xlink:href="#svgHelp" x="0" y="0" /> But it does not display. What am I missing here?
I believe <use> must be wrapped by <svg> <svg> <use xlink:href="#svgHelp" x="0" y="0" /> </svg>
self closing svg elements
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/
embeding SVG into css
i want to converse this code
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<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="0 0 44.2 42.7" enable-background="new 0 0 44.2 42.7" xml:space="preserve">
<g>
<g>
<path fill="#FFFFFF" d="M20.1,20.7c0.5-0.2,0.9-0.4,1.2-0.7c0.6-0.6,0.9-1.3,0.9-2.1c0-1.1-0.3-1.9-1-2.5c-0.7-0.7-1.6-1-2.6-1
h-6.3v13.6h6.3c1.3,0,2.2-0.3,2.9-1c0.8-0.8,1.2-1.8,1.2-2.9c0-1-0.3-1.7-1-2.4C21.3,21.2,20.8,20.9,20.1,20.7z M14.1,15.8h4.4
c0.5,0,0.9,0.2,1.2,0.5c0.4,0.4,0.6,0.9,0.6,1.5c0,0.7-0.2,1.2-0.6,1.7c-0.4,0.4-0.8,0.6-1.3,0.6h-4.3V15.8z M20,25.7
c-0.4,0.4-1,0.6-1.8,0.6h-4v-4.8h4c0.8,0,1.4,0.2,1.9,0.7c0.4,0.4,0.6,1,0.6,1.7C20.7,24.7,20.4,25.2,20,25.7z"/>
<path fill="#FFFFFF" d="M30.7,26.1c-0.3,0.3-0.8,0.5-1.6,0.5c-0.7,0-1.3-0.2-1.8-0.7c-0.5-0.5-0.8-1.3-0.8-2.5H33
c0-1.5-0.4-2.7-1.1-3.4c-0.8-0.8-1.7-1.2-2.9-1.2c-1.2,0-2.1,0.4-2.9,1.1c-0.9,0.9-1.3,2.1-1.3,3.5s0.4,2.6,1.3,3.4
c0.8,0.8,1.8,1.2,3.1,1.2c1.2,0,2.2-0.3,2.9-1c0.5-0.5,0.8-1.2,1-2.1h-1.7C31.3,25.3,31.1,25.7,30.7,26.1z M27.3,20.8
c0.4-0.4,1-0.6,1.6-0.6c0.7,0,1.2,0.2,1.6,0.6c0.4,0.4,0.6,0.9,0.6,1.4h-4.5C26.7,21.6,27,21.2,27.3,20.8z"/>
<path fill="#FFFFFF" d="M30.5,20.7c-0.4-0.4-0.9-0.6-1.6-0.6c-0.6,0-1.2,0.2-1.6,0.6c-0.4,0.4-0.6,0.8-0.7,1.3h4.5
C31.1,21.6,30.9,21.1,30.5,20.7z"/>
<path fill="#FFFFFF" d="M19.7,19.4c0.4-0.4,0.6-1,0.6-1.7c0-0.6-0.2-1.1-0.6-1.5c-0.3-0.3-0.7-0.5-1.2-0.5h-4.4V20h4.3
C18.9,20,19.3,19.8,19.7,19.4z"/>
<path fill="#FFFFFF" d="M18.1,21.5h-4v4.8h4c0.8,0,1.4-0.2,1.8-0.6c0.5-0.5,0.7-1.1,0.7-1.7c0-0.7-0.2-1.3-0.6-1.7
C19.6,21.7,18.9,21.5,18.1,21.5z"/>
<path fill="#FFFFFF" d="M22.1,3C12,3,3.9,11.2,3.9,21.3c0,10.1,8.2,18.3,18.3,18.3s18.2-8.2,18.2-18.3C40.4,11.2,32.2,3,22.1,3z
M25.5,17.2H32v0.7h-6.5V17.2z M21.4,26.9c-0.6,0.6-1.6,1-2.9,1h-6.3V14.3h6.3c1.1,0,1.9,0.3,2.6,1c0.6,0.6,1,1.5,1,2.5
c0,0.8-0.3,1.6-0.9,2.1c-0.3,0.3-0.7,0.6-1.2,0.7c0.6,0.2,1.1,0.5,1.5,0.9c0.6,0.6,1,1.4,1,2.4C22.6,25.1,22.2,26.1,21.4,26.9z
M32,27c-0.7,0.7-1.6,1-2.9,1c-1.3,0-2.3-0.4-3.1-1.2c-0.8-0.8-1.3-2-1.3-3.4s0.4-2.6,1.3-3.5c0.7-0.7,1.7-1.1,2.9-1.1
c1.1,0,2.1,0.4,2.9,1.2c0.7,0.7,1.1,1.9,1.1,3.4h-6.4c0,1.1,0.3,1.9,0.8,2.5c0.5,0.5,1.1,0.7,1.8,0.7c0.7,0,1.3-0.2,1.6-0.5
c0.4-0.4,0.6-0.8,0.6-1.3H33C32.8,25.8,32.5,26.5,32,27z"/>
<rect x="25.5" y="17.2" fill="#FFFFFF" width="6.5" height="0.7"/>
</g>
</g>
</svg>
to something like this
data:image/svg+xml;charset=utf-8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iMzJweCIgaGVpZ2h0PSIzMnB4IiB2aWV3Qm94PSIwIDAgMzIgMzIiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMyIDMyIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxwYXRoIGlkPSJkcmliYmJsZS1jaXJjbGUtaWNvbiIgZmlsbD0iI0ZGRkZGRiIgZD0iTTE3LjM2MywxNy42MDRjMC44MzQsMi4xOCwxLjQ0Nyw0LjQyLDEuODM4LDYuNzE1DQoJYy0wLjk5NiwwLjM4Ni0yLjA3MiwwLjYwNC0zLjIwMSwwLjYwNGMtMi4wNjQsMC0zLjk2Mi0wLjcxMS01LjQ3Ni0xLjg5NEMxMi4yOTcsMjAuMjUsMTQuNTU5LDE4LjQ0MSwxNy4zNjMsMTcuNjA0eiBNMTEuOTc1LDguMDQ5DQoJYy0yLjI5MSwxLjE2NS00LjAxLDMuMjg2LTQuNjMzLDUuODM4YzMuMDE4LTAuMDIxLDUuNjI5LTAuMzUyLDcuODE2LTAuOTk2QzE0LjIzNCwxMS4yMzIsMTMuMTczLDkuNjE3LDExLjk3NSw4LjA0OXogTTIxLjQzOCw4Ljk0Mw0KCUMxOS45MzIsNy43NzksMTguMDQ4LDcuMDc4LDE2LDcuMDc4Yy0wLjc1NiwwLTEuNDg3LDAuMTA1LTIuMTg4LDAuMjgzYzEuMTgsMS41ODUsMi4yMjUsMy4yMTksMy4xNCw0Ljg5NA0KCUMxOC44NTcsMTEuNDQ4LDIwLjM1NCwxMC4zNDEsMjEuNDM4LDguOTQzeiBNMTYuNjQ2LDE1Ljg2OGMtMC4xOTEtMC40MzItMC4zOTQtMC44NjEtMC42MDQtMS4yODkNCgljLTIuNTAzLDAuNzg3LTUuNDkyLDEuMTg1LTguOTU1LDEuMTljMCwwLjA3OC0wLjAxLDAuMTUzLTAuMDEsMC4yMzFjMCwyLjE2NiwwLjc3OCw0LjE1NCwyLjA2Niw1LjcwMQ0KCUMxMS4xLDE4Ljc2OCwxMy42MDYsMTYuODE4LDE2LjY0NiwxNS44Njh6IE0xOS4yMjUsMTcuMjA5YzAuNzU2LDIuMDIsMS4zMzQsNC4wOSwxLjcyOSw2LjIwN2MyLjAyNC0xLjM1NywzLjQ1OC0zLjUyMywzLjg1My02LjAzMQ0KCUMyMi43NzEsMTcuMDMyLDIwLjkxMiwxNi45NzEsMTkuMjI1LDE3LjIwOXogTTMyLDE2YzAsOC44MzYtNy4xNjQsMTYtMTYsMTZTMCwyNC44MzYsMCwxNlM3LjE2NCwwLDE2LDBTMzIsNy4xNjQsMzIsMTZ6IE0yNi44LDE2DQoJYzAtNS45NjUtNC44MzUtMTAuOC0xMC44LTEwLjhTNS4yLDEwLjAzNSw1LjIsMTZTMTAuMDM1LDI2LjgsMTYsMjYuOFMyNi44LDIxLjk2NSwyNi44LDE2eiBNMTcuODE0LDEzLjkxOQ0KCWMwLjI0MiwwLjUsMC40NzEsMS4wMDUsMC42ODgsMS41MTJjMS45NDEtMC4zMzUsNC4wNzUtMC4zMTQsNi4zOTUsMC4wNjZjLTAuMTEyLTEuOTk1LTAuODc1LTMuODE3LTIuMDktNS4yNTENCglDMjEuNTYyLDExLjc5NiwxOS44OTMsMTMuMDIsMTcuODE0LDEzLjkxOXoiLz4NCjwvc3ZnPg0K
to embed it like this
footer ul .ins{
background-image:url("data:image/svg+xml;
charset=utf-8;
base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iMzJweCIgaGVpZ2h0PSIzMnB4IiB2aWV3Qm94PSIyNDAgMjQwIDMyIDMyIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDI0MCAyNDAgMzIgMzIiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPHBhdGggaWQ9Imluc3RhZ3JhbS1jaXJjbGUtaWNvbiIgZmlsbD0iI0ZGRkZGRiIgZD0iTTI2My42MDQsMjQ5LjAxNXYxLjk2NmMwLDAuMzE1LTAuMjU2LDAuNTcxLTAuNTcxLDAuNTcxaC0xLjkyNA0KCWMtMC4zMTUsMC0wLjU3LTAuMjU1LTAuNTctMC41NzF2LTEuOTY2YzAtMC4zMTUsMC4yNTUtMC41NzEsMC41Ny0wLjU3MWgxLjkyNEMyNjMuMzQ4LDI0OC40NDQsMjYzLjYwNCwyNDguNywyNjMuNjA0LDI0OS4wMTV6DQoJIE0yNTYuMjMzLDI1OC43MDRjMS40NDgsMCwyLjYyMi0xLjE3NCwyLjYyMi0yLjYyMmMwLTEuNDQ4LTEuMTc0LTIuNjIxLTIuNjIyLTIuNjIxcy0yLjYyMiwxLjE3My0yLjYyMiwyLjYyMQ0KCUMyNTMuNjExLDI1Ny41MywyNTQuNzg1LDI1OC43MDQsMjU2LjIzMywyNTguNzA0eiBNMjcyLDI1NmMwLDguODM3LTcuMTYzLDE2LTE2LDE2Yy04LjgzNiwwLTE2LTcuMTYzLTE2LTE2YzAtOC44MzYsNy4xNjQtMTYsMTYtMTYNCglDMjY0LjgzNywyNDAsMjcyLDI0Ny4xNjQsMjcyLDI1NnogTTI2NS4yMywyNTMuNDE2aC01LjI1N2MwLjUzNiwwLjc1MiwwLjg1MiwxLjY3MiwwLjg1MiwyLjY2NmMwLDIuNTQzLTIuMDYyLDQuNjA0LTQuNjA0LDQuNjA0DQoJcy00LjYwNC0yLjA2Mi00LjYwNC00LjYwNGMwLTAuOTk0LDAuMzE2LTEuOTE0LDAuODUyLTIuNjY2aC01LjIzM3Y4LjA2OWMwLDEuOTY1LDEuNTk0LDMuNTU5LDMuNTU5LDMuNTU5aDEwLjg3Ng0KCWMxLjk2NiwwLDMuNTYtMS41OTQsMy41Ni0zLjU1OVYyNTMuNDE2eiBNMjU2LjIyMSwyNTkuNjI5YzEuOTU3LDAsMy41NDctMS41OTEsMy41NDctMy41NDdjMC0xLjA2Mi0wLjQ3LTIuMDE1LTEuMjEyLTIuNjY2DQoJYy0wLjI2LTAuMjI4LTAuNTU0LTAuNDE5LTAuODcyLTAuNTY0Yy0wLjQ0Ni0wLjIwMy0wLjk0MS0wLjMxNy0xLjQ2My0wLjMxN2MtMC41MjEsMC0xLjAxNywwLjExNC0xLjQ2MywwLjMxNw0KCWMtMC4zMTksMC4xNDUtMC42MTIsMC4zMzYtMC44NzMsMC41NjRjLTAuNzQyLDAuNjUtMS4yMTEsMS42MDQtMS4yMTEsMi42NjZDMjUyLjY3NCwyNTguMDM4LDI1NC4yNjYsMjU5LjYyOSwyNTYuMjIxLDI1OS42Mjl6DQoJIE0yNjUuMjMsMjUwLjUxNWMwLTEuOTY1LTEuNTk0LTMuNTU5LTMuNTYtMy41NTloLTkuNzI1djQuNDg3aC0wLjcyOXYtNC40ODdoLTAuNDIxYy0wLjAyOCwwLTAuMDU1LDAuMDAxLTAuMDgzLDAuMDAydjQuNDg1aC0wLjcyOQ0KCXYtNC4zOTNjLTAuMTc3LDAuMDQxLTAuMzQ5LDAuMDk1LTAuNTE0LDAuMTYydjQuMjNoLTAuNzI5di0zLjgzM2MtMC45MDksMC42NDUtMS41MDMsMS43MDUtMS41MDMsMi45MDR2Mi4zMzdoNS43MDUNCgljMC44MzUtMC44NDgsMS45OTYtMS4zNzQsMy4yOC0xLjM3NGMxLjI4NCwwLDIuNDQ1LDAuNTI2LDMuMjgsMS4zNzRoNS43MjlMMjY1LjIzLDI1MC41MTVMMjY1LjIzLDI1MC41MTV6Ii8+DQo8L3N2Zz4NCg==")
}
thank you
A couple of ways you can get the data url for this. One way is to use an online tool such as this: http://www.mobilefish.com/services/base64/base64.php Personally, though, my preference is to save the SVG in an app like Illustrator. I save it as a .svg file. Then place it into an image element like so: <img src="/i/logo.svg" alt="logo"> If you open the page on which that image appears in Chrome, right click on the image and Inspect element. In the inspector, right click on the image URL and choose Open Link in Resources Panel. In the resources panel, right click on the image and choose Copy Image as Data URL. Seems like a bit of a lengthy task, but I find that the most reliable way.
Multiple lines of curved text in SVG
Is there a way in SVG of drawing multiple lines of text within a single <text> element that follow the same path contour? Here is the closest I have been able to get: <?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" version="1.1"> <defs> <path id="text_0_path" d="M 100 150 A 100 100 0 1 1 300 150"/> </defs> <use xlink:href="#text_0_path" stroke="blue" fill="none"/> <text font-family="Arial" font-size="18px" text-anchor="middle"> <textPath xlink:href="#text_0_path" startOffset="50%"> <!-- 157.075 is the center of the length of an arc of radius 100 --> <tspan x="157.075">Here is a line</tspan> <tspan x="157.075" dy="20">Here is a line</tspan> <tspan x="157.075" dy="20">Here is a line</tspan> </textPath> </text> </svg> Here is the output (in Chrome): This is almost what I want. The problems: I would like each line of text centered at the top of the arc, not to start the text there. It seems like the text-anchor attribute is being forgotten when the x value is specified in a tspan along a path. (This is not the case with straight text; the text-anchor attribute is remembered.) Each successive line of text is crunched, as if following a concentric path. I would like each line of text to follow the same contour, as if the path were simply translated in the y direction by the height of the font. I know I could just create three separate <path> elements and associate them with three separate <text> (or <textPath>) elements, but it would be really nice to keep all the text logically together using <tspan> elements for later applications. Or is this supposed to work but there is a rendering bug in Chrome? (unlikely, IMO)
I can't tell if you want the text rendered on concentric circles or if you simply want it translated. If the former, then you may want to experiment with letter-spaccing attributes on your t-span elements. This will add tracking to your characters pushing them further apart. I tried the following, but alignment between lines is lost for some reason: <?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" version="1.1"> <defs> <path id="text_0_path" d="M 100 150 A 100 100 0 1 1 300 150"/> </defs> <use xlink:href="#text_0_path" stroke="blue" fill="none"/> <text font-family="Arial" font-size="18px" text-anchor="middle"> <textPath xlink:href="#text_0_path" startOffset="50%"> <!-- 157.075 is the center of the length of an arc of radius 100 --> <tspan x="157.075">Here is a line</tspan> <tspan x="157.075" dy="20" letter-spacing="2">Here is a line</tspan> <tspan x="157.075" dy="20" letter-spacing="4">Here is a line</tspan> </textPath> </text> </svg> However, if you want the latter (concentric circles), this appears to work in Safari and Chrome on the Mac: <?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" version="1.1"> <defs> <path id="text_0_path" d="M 100 150 A 100 100 0 1 1 300 150"/> </defs> <use xlink:href="#text_0_path" stroke="blue" fill="none"/> <g font-family="Arial" font-size="18px"> <text text-anchor="middle"> <textPath xlink:href="#text_0_path" startOffset="50%">Here is a line</textPath> </text> <text text-anchor="middle" transform="translate(0, 20)"> <textPath xlink:href="#text_0_path" startOffset="50%">Here is a line</textPath> </text> <text text-anchor="middle" transform="translate(0, 40)"> <textPath xlink:href="#text_0_path" startOffset="50%">Here is a line</textPath> </text> </g> </svg> I know you were shooting for tspans only, but as you said, it seemed to reset the startOffset values. HTH, Kevin