Wanting to make a logo, I started playing with SVG, and stuck trying to figure out how to use a Google Fonts family in a mask definition. If you want to reproduce, try loading the following .svg contents up in Google Chrome 85. The font loads fine for the second text element, but the first one (used in #mask) fails and defaults to serif.
<svg version="1.1" baseProfile="full" width="256" height="256" xmlns="http://www.w3.org/2000/svg">
<defs>
<style type="text/css">
#import url('https://fonts.googleapis.com/css?family=Dancing+Script:400');
</style>
<mask id="mask">
<rect x="0" y="0" width="256" height="256" stroke-width="0" fill="white" />
<text font-size="128" x="50%" y="50%" dominant-baseline="middle" text-anchor="middle" fill="black" style="font-family: 'Dancing Script';">T</text>
</mask>
</defs>
<circle cx="128" cy="128" r="128" stroke-width="0" fill="red" mask="url(#mask)" />
<text font-size="128" x="50%" y="50%" dominant-baseline="middle" text-anchor="middle" fill="black" style="font-family: 'Dancing Script';">T</text>
</svg>
It looks like this,
So yea. I mean, am I not supposed to refer to external font families in other definitions or something? Any way to get around this?
Related
I have a text that I want to adjust it to the size of svg container and position it in the middle (horizontally and vertically). I am looking for relative way, not absolute. So far I have tried putting the text inside svg and adjust it with viewBox attribute and also the transform: scale function.
Is there any standard way to do this?
UPDATE:
With the help of commentators I was able to put the text in the middle of the svg container. Thank you!
However, I am still unable to put multiline text in the middle. The second code snippet is the farthest I came to the solution.
Working code for one line text:
<svg width="890" height="500"overflow="hidden;">
<g>
<rect x="0" y="0" width="542" height="495" fill="#6fdd6f"></rect>
<svg x="0" y="0" width="542" height="495" viewBox="0 0 100 100">
<text alignment-baseline="middle" dominant-baseline="middle" text-anchor="middle" x="50%" y="50%">TXT</text>
</svg>
</g>
</svg>
Code with multiline that needs to be adjusted to center:
<svg width="890" height="500"overflow="hidden;">
<g>
<rect x="0" y="0" width="542" height="495" fill="#6fdd6f"></rect>
<svg x="0" y="0" width="542" height="495" viewBox="0 0 100 100">
<text alignment-baseline="middle" dominant-baseline="middle" text-anchor="middle" >
<tspan x="50%" y="50%">TXT</tspan>
<tspan dy="1em" x="50%" y="50%">more TXT</tspan>
<tspan dy="2em" x="50%" y="50%">end of TXT</tspan>
</text>
</svg>
</g>
</svg>
Here's a link to my codepen: https://codepen.io/Bryandbronstein/pen/QVaQpa
So basically what I have is an svg circle set as a clipPath element to cut my image into a circle. Then I want to curve my text around the circle, rather than it being in a straight line on top of my circular image, like this:
image with curved text
The thing is, I have this image to show off as my example because this code works in Firefox, but no other browser I could test. What gives?
Here's my code:
<svg height="300" width="350">
<defs>
<clipPath id="circleView">
<circle id="curve" cx="150" cy="180" r="110" fill="transparent" />
</clipPath>
</defs>
<text x="390" y="-20" width="100">
<textpath id="homepageText" xlink:href="#curve">
My Homepage!
</textpath>
</text>
<image width="300" height="410" xlink:href="meee.jpg" clip-path="url(#circleView)" />
</svg>
Just to clarify, I have moderate experience in HTML and CSS but very little in SVG. Thank you!
Use path insted of circle, and text-anchor + startOffset to center the text:
<svg x="0px" y="0px" width="350" height="300" viewBox="0 0 350 300">
<defs>
<path id="curve" d="M40,180c0-60.751,49.248-110,110-110c60.751,0,110,49.249,110,110"/>
</defs>
<text fill="black" class="curved-text">
<textPath xlink:href="#curve" text-anchor="middle" startOffset="50%">My homepage!</textPath>
</text>
</svg>
Working Codepen.
Using svg path tag we can achieve curved text. Below is the modification to your code. Corrected x and y for text tag and have added path with id "forText.
<svg height="300" width="350">
<defs>
<clipPath id="circleView">
<circle id="curve" cx="150" cy="180" r="110" fill="transparent" />
</clipPath>
</defs>
<path id="forText" d="M32,110, C25,90, 180,-39,290,130" stroke="" fill="none"/>
<text x="0" y="35" width="100">
<textpath xlink:href="#forText">
My Homepage!
</textpath>
</text>
<image width="300" height="410" xlink:href="meee.jpg" clip-path="url(#circleView)" />
</svg>
I would like to write multiple lines in this circles without css, but only if it's needed style tag.
Here's the code:
<svg height="300" width="300">
<circle cx="150" cy="150" r="120" stroke="red" stroke-width=4 fill="#ffffff" />
<text x="50%" y="50%" text-anchor="middle" stroke="#000000" stroke-width="1px" dy=".3em">My code<br/>isn't good</text>
</svg>
Thank you!
this is the best i was able to do. It works but its hardcoded which obviously is not ideal. I looked at this other post btw, might be of some help: How to linebreak an svg text within javascript?
<svg height="300" width="300">
<circle cx="150" cy="150" r="120" stroke="red" stroke-width=4 fill="#ffffff" />
<text text-anchor="middle" stroke="#000000" stroke-width="1px" dy=".3em">
<tspan x="50%" y="40%" dy="1.2em">very long text</tspan>
<tspan x="50%" y="50%" dy="1.2em">I would like to linebreak</tspan>
</text>
</svg>
I have a SVG canvas which user can select and resize some <image> elements inside. And I use preserveAspectRatio="xMidYMid meet" attribute value to keep the original aspect ratio. The original image sources are mostly 256x256px size. On Firefox and IE-11, when I resize <image> elements to a smaller size than their original size, they look very pixelated. On Chrome they look pretty smooth. I wonder if there are any css or svg features which could help me to make them look smoother on Firefox and IE too.
Thank you.
EDIT: Adding sample..
https://jsfiddle.net/p8km6nhc/7/
<svg viewBox="-170 -87 1678 869" style="width: 100%; height: 100%; overflow: hidden; left: 0px; top: -0.800003px;" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
<defs>
<filter id="varlikItemShadow1">
<feGaussianBlur stdDeviation="3" in="SourceGraphic"></feGaussianBlur>
<feOffset dy="1" dx="1"></feOffset>
<feMerge>
<feMergeNode></feMergeNode>
<feMergeNode in="SourceGraphic"></feMergeNode>
</feMerge>
</filter>
</defs>
<g>
<g transform="matrix(1,0,0,1,0,0)">
<g transform="matrix(1,0,0,1,158,256)">
<g title="" data-original-title="" data-rounded="yes">
<text style="font:0px arial;" x="0" y="1" stroke="none" transform="matrix(1,0,0,1,0,0)" fill="#ffffff" fill-opacity="0.111111">[[VarlikId=3999]]</text>
<rect filter="url(#varlikItemShadow1" stroke="#2b5987" stroke-width="2" fill-opacity="0.9" fill="#ffe8f6" ry="10" rx="10" y="0" x="0" height="140" width="1270"></rect>
<path d="M0 0 L 1268 0 1268 138 0 138Z" stroke="none" stroke-width="0" fill="none" fill-opacity="0" transform="matrix(1,0,0,1,0,0)"></path>
<image image-rendering="optimizeQuality" preserveAspectRatio="xMidYMid meet" x="14" y="14" width="1242px" height="66px" xlink:href="https://deviantshare.azurewebsites.net/img/test.png"></image>
<text style="font:32px arial;" x="0" y="30" stroke="none" transform="matrix(1,0,0,1,591,94)" fill="#2b5987">3. Kat</text>
</g>
</g>
</g>
</g>
</svg>
RESULT :
As it clearly looks like an issue with Firefox and IE rendering, thought of trying a workaround to come over this.
Instead of using <image> element of SVG, tried using <img> tag of HTML and embedded it using <foreignObject> element of SVG.
Instead of :
<image image-rendering="optimizeQuality" preserveAspectRatio="xMidYMid meet"
x="14" y="14" width="1242px" height="66px"
xlink:href="https://deviantshare.azurewebsites.net/img/test.png"></image>
Used:
<foreignObject x="600" y="14" width="100" height="100">
<body>
<img src="https://deviantshare.azurewebsites.net/img/test.png"
type="image/svg+xml" width="66px" height="66px">
</body>
</foreignObject>
But one pending issue is IE doesn't support foreignObject yet!
Codepen.io working example
I want to use a SVG file as background image (css).
Here is my SVG:
<?xml version="1.0"?>
<svg width="428" height="100" xmlns="http://www.w3.org/2000/svg">
<!-- Created with Method Draw - http://github.com/duopixel/Method-Draw/ -->
<g>
<title>background</title>
<rect fill="none" id="canvas_background" height="102" width="430" y="-1" x="-1"/>
<g display="none" overflow="visible" y="0" x="0" height="100%" width="100%" id="canvasGrid">
<rect fill="url(#gridpattern)" stroke-width="0" y="1" x="1" height="400" width="580"/>
</g>
</g>
<g>
<title>Layer 1</title>
<text stroke="#000" transform="matrix(1.22606 0 0 1.22606 -24.7533 -46.6879)" opacity="0.3" font-style="italic" xml:space="preserve" text-anchor="left" font-family="Helvetica, Arial, sans-serif" font-size="24" id="svg_1" y="87.150366" x="22.228393" stroke-width="0" fill="#000000">Hello world!</text>
</g>
</svg>
I encoded it with http://b64.io and used it like this:
#new-hello-world {
background-image: url(…);
background-repeat: no-repeat;
}
Now my problem is that the SVG is not responsive. How can I solve this?
Any help would be greatly appreciated.
EDIT:
I already tried to make the svg width and height 100% but that did not work.
Give the <svg> element a viewBox attribute e.g. viewBox = "0 0 428 100" although chipChocolate.py's suggestion of viewBox="0 0 580 400" might work better depending on exactly what you want to see.