Consider an SVG image with text. Is it possible to embed it into an HTML document using an image tag (or any other) and keep the text as text, so it can be selected or searched for e.g. using "control+find"?
A plain image tag does not achieve this:
<image src="https://www.w3.org/TR/SVG11/images/text/toap04.svg"></image>
You have a couple of options when embedding an SVG with selectable text.
Inline SVG
You can embed an inline SVG in an HTML document using the <svg> tag.
<svg width="453px" height="136px" viewBox="0 0 1000 300">
<defs>
<path id="MyPath" d="M 100 125
C 150 125 250 175 300 175
C 350 175 450 125 500 125
C 550 125 650 175 700 175
C 750 175 850 125 900 125" />
</defs>
<use xlink:href="#MyPath" fill="none" stroke="red" />
<text font-family="Verdana" font-size="60" fill="blue" letter-spacing="2">
<textPath xlink:href="#MyPath">
Choose shame or get war
</textPath>
</text>
<rect x="1" y="1" width="998" height="298" fill="none" stroke="blue" stroke-width="2" />
</svg>
<object> tag
You can also use the <object> tag when linking to an external SVG.
<object data="https://www.w3.org/TR/SVG11/images/text/toap04.svg" width="453" height="136"></object>
You can load any external file, and inline it, with the <load-file> (native javascript) Web Component.
Loads of options, unlicensed and only 8 lines of code:
Dev.To blog post <load-file> Web Component
<script src="https://load-file.github.io/element.js"></script>
<load-file replaceWith src="https://www.w3.org/TR/SVG11/images/text/toap04.svg"></load-file>
<style>
svg{ background:lightgreen }
rect { stroke:green; stroke-width:60; rx:60 }
</style>
Related
I have this Simple SVG with text inside, on chrome and Safari its working fine, but on FIREFOX the last alphabet of the text is not showing at all. (in this case 'l' from 'atul' is not showing on firefox.)
<svg viewBox="0 0 100 100" height="250" width="250">
<path id="p1" d="M50 10 a 40 40 1 1 0 1 0" pathLength="1.99" style="fill: red;"></path>
<text font-size="6" text-anchor="middle">
<textPath href="#p1" startOffset="1" side="center" style="letter-spacing:1px;font-weight:600;text-transform:uppercase; dominant-baseline: ideographic;">Atul</textPath>
</text>
</svg>
just copy and paste this svg in your HTML and try to render it in Firefox.
I want to understand the problem along with solution if anyone can explain please.
Thanks in advance.
The issue is that there's trailing whitespace after the </textPath> Firefox stops the textPath processing one character too soon when it encounters that whitespace.
This is fixed in bug 1809688. It's currently scheduled to be fixed in Firefox 111, but you can try it in a nightly already.
I'm not able to explain this, but here I have three different SVG elements. The first two are modified versions of the code that I copied from your snippet. They both have the issue. And the last one is an edited version of the example on MDN. So, example 2 and 3 are how I would write the code -- using SVG attributes for most of the styling, but most importantly the pathLength should have a larger value to avoid any rendering problems.
Even though I removed all the attributes and styling possible from example 1 it still has the issue. And as I see it example 2 and 3 are exactly the same code (except from the ids referring to the paths), so I'm not able to explain the difference.
If anyone can spots the difference please comment.
Well, try to rewrite your code... 🙂
<svg viewBox="0 0 100 100" width="200" height="200">
<path id="p1" fill="none" d="M50 10 a 40 40 1 1 0 1 0 z"/>
<text>
<textPath href="#p1">Atul</textPath>
</text>
</svg>
<svg viewBox="0 0 100 100" width="200" height="200">
<path id="p2" fill="red" d="M50 10 a 40 40 1 1 0 1 0 z"
pathLength="100"/>
<text font-size="6" font-weight="600" text-anchor="middle"
dominant-baseline="ideographic"
style="text-transform: uppercase;letter-spacing:1px;">
<textPath href="#p2" startOffset="50">Atul</textPath>
</text>
</svg>
<svg viewBox="0 0 100 100" width="200" height="200">
<path id="p3" fill="red" d="M50 10 a 40 40 1 1 0 1 0 z"
pathLength="100"/>
<text font-size="6" font-weight="600" text-anchor="middle"
dominant-baseline="ideographic"
style="text-transform: uppercase;letter-spacing:1px;">
<textPath href="#p3" startOffset="50">Atul</textPath>
</text>
</svg>
Hopefully someone out there knows about SVG files. I'm just running through a Mozilla tutorial about SVG graphics and one of the exercises is reviewing this code:
<?xml version="1.0" standalone="no"?>
<svg width="200" height="280" xmlns="http://www/w3.org/2000/svg" version="1.1">
<polyline points="40 60 80 20 120 60" stroke="black" stroke-width="20"
stroke-linecap="butt" fill="none" stroke-linejoin="miter"/>
<polyline points="40 160 80 120 120 160" stroke="black" stroke-width="20"
stroke-linecap="round" fill="none" stroke-linejoin="round"/>
<polyline points="40 260 80 220 120 260" stroke="black" stroke-width="20"
stroke-linecap="square" fill="none" stroke-linejoin="bevel"/>
</svg>
It's supposed to create a graphic of three angles pointing upward.
I have 8 other SVG files which convert to Inkscape without any problem. But the graphic from the code above will not convert over to Inkscape, and Inkscape gives me this error: "Failed to load the requested file"
Is there something I'm missing? I've tried to change all the parameters in the code thinking maybe the graphic is too big but it still doesn't work.
Well, I answered my own question. I converted the SVG file to an HTML, and I opened the file in my browser and the graphic is displayed!
In SVG there are different commands used such as move pen, draw line, draw curve and so on like so:
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
<path d="M10 10 H 90 V 90 H 10 L 10 10"/>
</svg>
Is there a command that lifts the pen and then sets the pen down again? As an example, is there a single value of SVG path data that would draw parallel lines that do not intersect inside a single path element?
More info on SVG on MDN.
Thanks to #RobertLongson for pointing this out.
I can use move more than once. In this case it is in the middle of the statement.
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
<path d="M10 10 H 90 M 10 90 H 90" stroke="red"
stroke-width="3" fill="none"/>
</svg>
I am new to svgs. How can i make 4 triangles attached with border inside a rectangle? See the Attached image.
Thanks in Advance.
You can do something like :
<polygon points="34.2,87.4 12.3,65.5 12.3,34.5 34.2,12.6 65.2,12.6 87.1,34.5 87.1,65.5 65.2,87.4" fill="hsl(216,80%,50%)"/>
https://codepen.io/anon/pen/pWyxLX //octogone only
https://codepen.io/anon/pen/ZXWVKo //using 4 triangles
Here is a sample SVG that looks like your requested shape.
Explaining every element is beyond the scope of a Stack Overflow answer, but there are plenty of books and web tutorials to explain the various features of SVGs. Plus you can always read the SVG specification.
<svg width="200" height="200" viewBox="0 0 100 100">
<!-- The rect around the outside -->
<!-- 80 width and high, centred in the middle -->
<rect x="10" y="10" width="80" height="80"
fill="none" stroke="black" stroke-width="2" />
<!-- Now add triangles in the corners -->
<!-- You could use paths or polygons ->
<!-- I'll use both for comparison purposes -->
<polygon points="10,10, 40,10, 10,30"
fill="black"/>
<polygon points="90,10, 60,10, 90,30"
fill="black"/>
<!-- The final two corners we will use a <path> -->
<!-- And use a variety of path commands for fun -->
<path d="M 10,90 L 40,90 L 10,70 Z"
fill="black"/>
<path d="M 60,90 H 90 V 70 Z"
fill="black"/>
</svg>
I have a svg with multiple lines inside a path.
<path stroke-width="13" stroke="black" fill="orange" d="M 100 100 L 300 100 Z L200 300 z"/>
Because of the stroke-width the lines intersect
Is there any way of making the path continuous without altering the "d" attribute?
Edit:
I am interested in how you can control the joins of multiple objects inside the same path while having a stroke-width defined.
If I would change the "d" attribute and remove the middle Z so that the lines form a triangle the stroke problem would disappear
That's one hell of an overhang for two lines that meet at a point. (Are you using Firefox by any chance? I saw something very similar recently.)
If you want a neat join between two disjoint line segments, your best bet would be to draw them with rounded end caps by adding stroke-linejoin="round" and stroke-linecap="round" to the path element.
And if my suspicion is correct, you can fix the overhang problem by changing fill="orange" to fill="none". Try this:
<svg viewBox="50 50 400 400" width="350" height="350">
<path stroke-width="13"
stroke="black"
fill="none"
stroke-linejoin="round"
stroke-linecap="round"
d="M 100 100 L 300 100 Z L200 300 z"
/>
</svg>