I created a very small True Type font with a simple square as the only glyph at char code 0xe000. It is included both as a standard glyph and as an SVG in the 'SVG ' table, as defined in the SVG Glyphs in OpenType Specification
The problem is that the SVG glyph is rendered about 2% smaller on Firefox than the TrueType glyph, although it should have the same size. The size of the TrueType glyph is the correct one.
Here is a JSFiddle (font size 240px with the background set to cyan) and this is the output on Firefox (left) and on Chrome (identical on IE11 and Edge14)
I have tried the same with other, more complex shapes. Each time the SVG is a little bit smaller than the standard glyph.
Does anybody know if this is the indended or specified behaviour (embedded SVG must be 2% larger to render the same size)? Or is this simply a bug in Firefox and I should issue a bug report? Or am I doing something wrong?
Detailed Information about the SVG and the Font
This is the SVG:
<svg id="glyph2" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1024" height="1024"><g fill="#000000" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal"><g><path d="M256,-640l512,0l0,512l-512,0z"/></g></g></svg>
The glyph data in the font#s "glyf" table looks like this:
Here is the data from the font's "hhea" table:
The test font can be donwloaded from http://s000.tinyupload.com/?file_id=45977357366223472123
Related
Saving over the top of the existing logo.svg within a custom Drupal theme I am building. The logo does not show on the page (Firefox) and shows extremely large on Safari.
When "inspecting element" I can see that if I add width="" (and apply any number) - then the logo will appear in Firefox, and resize in Safari.
But I do not know how to apply a width to the site_logo within the Drupal theme files. Where would I do this, or alternatively how else would I fix this issue.
The site is in Drupal 8. I've tried moving the branding block into different sections (Nav, sidebar, Content, etc.) but it doesn't rectify the incorrect width issues.
Consider that SVG images not always have height and width dimensions in their markup, and that adding an SVG file with no dimensions set could affect the styling of your theme.
So open your SVG file in a text editor and ensure to set width, height and/or viewBox according your needs. Or try editing it with some vector image editing tool like Adobe Illustrator or Sketch or Inkscape.
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
width="100" height="50"
viewBox="0 0 200 100">
<rect x="20" y="20" width="160" height="60"
fill="limegreen" stroke="black" stroke-width="2px" />
</svg>
Filling and stroking a circle with the same color and a stroke-width exceeding a certain size, produces a strange transparent region “between” the two paint regions. What is going on?
This is happening in both Chrome and Firefox, so it may be to spec, but I couldn’t find any language in the spec about this behavior.
Fiddle
<svg viewBox="0 0 300 300">
<circle cx="100" cy="100" r="8"
stroke="#000" stroke-width="40"
fill="#000"/>
</svg>
Produces this rendering:
As Robert Longson noted, the issue shows up when a stroke overlaps itself in such a way that it creates a donut-hole when you convert the stroke outline to a separate path (depending on the winding-order / fill-rule calculations).
The gap between the fill and stroke in your particular example is caused by the "inside" edge of the stroke extending across the entire fill region and out the other side.
It gets really weird when you have dashed strokes, as shown in the examples from Tavmjong Bah's discussion article.
This is, unfortunately, neither according to the SVG spec nor against the spec. Instead, the spec at this point of time has left the matter undefined.
SVG working group discussion is here.
At this point, WebKit, Blink, and Firefox on Mac/Android draw strokes with cut-outs, using the Skia graphics library or Apple's CoreGraphics.
IE/Edge and Firefox on Windows/Linux just draw the total stroke, without cut-outs, as do Inkscape and Illustrator and most PDF-rendering software (the PDF spec itself is non-committal).
Everyone I've discussed this with agrees that the cut-outs are a sub-optimal result. But with so many browsers using rendering engines that do it this way, the SVG working group wasn't willing to make the more-intuitive stroke behavior a strict requirement. So instead, the SVG 2 spec has a warning-to-authors with a sample figure:
At this point, the best prospect for making a change would be to file issues (or contribute code) on the Skia library. If it was changed, that puts pressure on Apple to update to match, and the SVG spec would be able to make it official.
I found that adding stroke-linecap="round" style="stroke-dasharray: 1000" fixes the issue by introducing virtual dashes
<svg viewBox="0 0 300 300">
<circle cx="100" cy="100" r="8"
stroke="#000" stroke-width="40"
fill="#0F0" stroke-linecap="round" style="stroke-dasharray: 1000" />
</svg>
It's an artifact because the stroke width is so big it crosses the centre of the circle. It shouldn't happen but it's easily avoided by increasing r and decreasing the stroke-width.
I'm trying to have a SVG path scale to fit the entire container element, without stretching or being trimmed. The SVG is the one below. As you can see, it's a simple border.
<svg preserveAspectRatio="none" viewBox="0 0 370 80" height="100%" width="100%">
<path vector-effect="non-scaling-stroke" d="M359,70C359,70,300,70,185,70C84,70,9,70,9,70C9,70,9,60,9,40C9,24,9,10,9,10C9,10,84,10,185,10C300,10,359,10,359,10C359,10,359,24,359,40C359,60,359,70,359,70C359,70,359,70,359,70"/>
</svg>
Then I have an element that could have different sizes, because it's responsive and because I use it in various cases where width or height can be different. I can't succeed in having the SVG that expands its path by always staying inside the viewport, but scaling without preserving aspect ratio. It doesn't seem a difficult logical thing to do, but I tried various options without success.
EDIT
I was able to scale this SVG, by setting whatever dimensions I wanted. Why does the first not work, but this works instead?
<svg preserveAspectRatio="none" viewBox="0 0 404 77" height="100%" width="100%">
<path vector-effect="non-scaling-stroke" d="m0,0l404,0l0,77l-404,0l0,-77z"/>
</svg>
The short answer is no. What you want to do (as I understand it) is not possible. In SVG you can scale to fit the container (using constant aspect ratio), or you can stretch (ignoring aspect ratio).
There is no way currently to keep some parts of the SVG static and stretch other parts. Unless, of course, you use Javascript to manipulate the contents of the SVG.
What you may want to do is consider using an SVG as the source image for a CSS border-image (see http://www.w3.org/TR/css3-background/#border-images). Perhaps that is the sort of thing you were after?
I have a simple cut-out rectangle with text in the middle.
<svg>
<defs>
<mask id="mytext">
<rect width='100%' height='100%' fill='white'/>
<text>Welcome</text>
</mask>
</defs>
<rect width='100%' height='100%' fill='blue' mask="url(#mytext)"/>
</svg>
However when viewing from a retina display the text edges become pixelated.
It does't happen if I only use text without masking it, but as soon the mask is used it breaks everything out.
EDIT: By Retina Display I mean, iOS and OSX both latest versions. All Browsers. I believe it might be a pixel density issue.
The interesting is while having
<text fill='url(#mypattern)'>Welcome</text>
The text is rendered sharply perfect. The problem lies only with masks being applied.
Here it is a jsfiddle sample (please make sure to test on your retina display enabled device).
And here is a screenshot displaying the difference on iPhone (note that the edges of the text below and how pixelated it looks).
I have SVG file with element <path d="..." />
I'm converted that file to SVG font:
<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
<font id="somefont" horiz-adv-x="1000">
<font-face font-family="somefont" units-per-em="1000"/>
<glyph unicode="a" d="..."/>
</font>
</defs>
</svg>
Attribute d isn't changed, but font is mirrored by x axis.
Why that happens and how to fix it?
"Unlike standard graphics in SVG, where the initial coordinate system has the y-axis pointing downward (see The initial coordinate system), the design grid for SVG fonts, along with the initial coordinate system for the glyphs, has the y-axis pointing upward for consistency with accepted industry practice for many popular font formats."
Source: http://www.w3.org/TR/SVG/fonts.html
Can be converted to right glyphs with that script:
#!/usr/bin/env fontforge
Open("source.svg")
Generate("converted.svg")