For a while I thought there was something wrong with my code, but it looks like there is an issue with the svg files on libre maps.
I've been trying to use their svg files with jvectormaps but they wouldn't work no matter what. Then I tried to use object and the img tag to just embed them, and they still won't work so obviously there's something wrong with these svg files. I tried a few things such as removing the xml tag, and updating the doctype, but still no luck.
This is one of the files I'm having an issue with.
http://libremap.org/data/boundary/2000/sub_county/svg/cs42_d00.svg
Yes. There is a problem with their SVGs. The root <svg> element should have an xmlns attribute, but it doesn't.
Eg. the map you linked to starts with:
<svg width="100%" height="100%" preserveAspectRatio="xMidYMax"
viewBox="2.682664 439.717923 49.914144 29.355176">
it should be:
<svg xmlns="http://www.w3.org/2000/svg"
width="100%" height="100%" preserveAspectRatio="xMidYMax"
viewBox="2.682664 439.717923 49.914144 29.355176">
Standalone SVGs must have the namespace attribute. You should probably report it as a bug to them.
In the meantime, you can download the SVG and correct it yourself. Then use your local copy.
Update
There is another issue with the SVG. It has fill set to none and stroke-width set to 0 (see line 8). So nothing will display by default. If you change either of those (see line 8), it will display.
<g id="Unknown_Area_Type_cs42_d00_e00" style="fill:grey;stroke:rgb(255,0,0);
stroke-width:0.01;stroke-linecap:round">
Perhaps it was intended that you use CSS to style the map. Having something like the following should also work:
g#Unknown_Area_Type_cs42_d00_e00 *
{
fill: grey;
stroke:rgb(255,0,0);
stroke-width:0.01;
}
Related
I have an svg in a file that represents a workflow - ie a bunch of boxes with lines between them - so say I have four rectangles.
In the app I have a mode - and I want appropriate rectangle to highlight based on the mode. So I want to do a css like:
#workflow rect {background-color:white}
.mode_1 #workflow rect:nth-child(1) {fill:red}
.mode_2 #workflow rect:nth-child(2) {fill:orange}
.mode_3 #workflow rect:nth-child(2) {fill:yellow}
// etc
And it works fine if I have inline svg. However, the workflow diagram is moderately complicated and long. I need to be able to store and edit it in a separate file so I can use an svg editor etc - and I can't find any way of styling it from the parent page. I've tried:
<img src="workflow.svg"/>
the browser doesn't see it as pieces at all
<object data="workflow.svg"/>
it's like an iframe, and it doesn't respond to the page's css
<svg>
<use xlink:href="workflow.svg#diagram">
</svg>
the svg appears as some sort of "shadow object" - and still doesn't respond to css.
I'm on the same domain - so cross site issues shouldn't be a problem.
I can get the effect I want by using javascript, or using multiple svg files - but is there any way to do it with just css and svg?
You'll have use different svg images. As far as I can tell, you can't use css to adjust it. You would have to edit the file itself.
not really what I was looking for, but I thought of a javascript hack to get me there... its ugly but it works - here's a simple example:
<body>
<svg_embed href="workflow.svg"/>
</body>
<script>
$("svg_embed").each( (index, element) =>
fetch( $(element).attr( "href" ) )
.then( response => response.text())
.then( xml => { $(element).html( xml )}))
</script>
so this reads and embeds the svg - thus making it fully css-able.
I'm trying to override an icon in an angularjs component that I have no control over. It's a stepper library called md-steppers. I was able to change the current step icon in chrome. Here is how I did it.
/* ... */
&.md-active md-step-label-wrapper {
font-weight: bolder;
display: flex;
&:before {
font-family: 'Material Icons';
content: '\E150';
color: white;
}
}
/* ... */
As you can see I'm altering the icon by loading the font Material Icons and then changing the content.
This solution is working great in Chrome. I'm having a few problems in firefox, however. The icons does not seem to be rendering properly when I'm at 100% ( or less ) zoom. Everything above that seems fine.
You can compare the image above with the result on Chrome ( both at 100% zoom )
The result on Firefox seams a little bit Blurrier and not well formed.
I'm aware that this might be a bug in Firefox itself as it has been reported before. I saw a few workaround that revolve around the mask css property but I'm not sure it can apply to me, since i'm not using mask at all. This is assuming the icons are rendered as SVG.
I've already look up CSS - Using SVG mask not displaying correctly in Firefox and Firefox not rendering svg properly on the topics but I could not make it work.
Am I missing something here and what can I do to correct this ?
Here is a Jsfiddle with the problem occurring.
The problem seams to be present in the iframe, in chrome as well.
Disclaimer: I can't verify that any of the solutions I've written below work as I can't replicate the issue on my device in the JSFiddle you provided.
It displays fine for me in Firefox and Chrome. FWIW: I'm using a Mac
Mini on MacOS 10.14.6 with a 4K display # 1920 x 1080 (i.e. HiDPI).
The same browser (i.e. Firefox) may handle fonts differently on
depending on operating system and hardware setup.
Solution
The demo link for md-steppers uses SVG data in the CSS:
.md-step.md-complete md-step-label-wrapper::before {
content: '\7';
background: #106cc8 url('data:image/svg+xml;utf8,<svg fill="rgba(255,255,255,0.87)" height="16" viewBox="0 0 24 24" width="16" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h24v24H0z" fill="none"/><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>') no-repeat center center; }
See Line 398
I would probably try using this same method and avoid using the icon font if you think this is where the issue is arising from. If you also have the same issue in Firefox at the md-steppers demo link above then I guess the issue is bigger than just icon fonts and is also affecting SVGs. You can scroll down further to: Other Possible Fixes.
The Material Design icons can be downloaded in SVG format from here.
Use the search filter in the sidebar and type in edit for the icon you want, then press the [Download] SVG 24 button in the bottom left corner.
The icon you download will be the default black colour so there are some changes you will need to make in order to make it suitable for you to use.
Open up the downloaded SVG in a code editor and refer to the way the SVG is formatted in the CSS for the md-steppers demo. Change the height and width properties, and also add the fill property to the <svg> tag, so it should look something like:
<svg xmlns="http://www.w3.org/2000/svg" height="16" viewBox="0 0 24 24" width="16" fill="rgba(255,255,255,0.87)"><path ...leave as is... /><path ...leave as is... /></svg>
Copy the SVG code as a single line and use it in a similar way that it's used in the md-steppers demo CSS:
.md-step.md-active md-step-label-wrapper::before, .md-step.md-success md-step-label-wrapper::before {
content: '\7';
background: #106cc8 url('data:image/svg+xml;utf8,<svg fill="rgba(255,255,255,0.87)" xmlns="http://www.w3.org/2000/svg" height="16" viewBox="0 0 24 24" width="16"><path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"/><path d="M0 0h24v24H0z" fill="none"/></svg>') no-repeat center center;
}
JSFiddle: https://jsfiddle.net/wx0brdjL/
Alternatively, you can save the SVG after you modify the width/height/fill to a file, then reference it in your CSS like:
background-image: url('edit-24px.svg');
Other Possible Fixes:
If using the SVG above is still causing things to blur on Firefox, or if you want to stick with using the icon font, there are a few things to try which might fix the way that the icon font renders on your device:
Option 1
Applying transform: translateZ(0) to either &.md-active md-step-label-wrapper or &:before.
Option 2
Applying the font-smoothing (see Firefox specific vendor prefix) or text-rendering CSS properties. Keeping in mind that changes here might affect the way it renders on someone else's device.
Option 3
I just came across this open issue on the Material Design Icons Github where a user recommends using this CSS hack: transform: rotate(0.03deg)
I can't reproduce this issue with the jsfiddle you supplied (all icons look okay for me). But I have had similar issues myself with other font-icons.
I think the issue comes from the font-weight: bolder; you've added to the parent element in your code. The browser now also wants to make the icon bolder, but since there isn't a "bolder"-version of the icon the browser tries to do it by itself and thereby making the icon look weird.
Your fiddle doesn't have the font-weight: bolder;, so im thinking your issue might have something to do with that. Try and remove it and see if the issue still persists.
Is it possible to use SVG Defs outside of the SVG Tag. Something like this:
<defs>
// defs code goes here
</defs>
<svg>
// svg code goes here
</svg>
If so -- how can I associate the defs tag with the particular svg tag that I want to target?
YES
At least outside THAT svg element, which, i think, is what you're going after?!
IT ONLY NEEDS TO BE INSIDE any SVG TAGS
but those don't have to be more than <svg style="display:none;"><defs>...</defs></svg>
(It doesn't matter if it's defined afterwards or before and can even be written outside the body (although i'm not sure that'd be valid html).)
I must be doing something wrong. The image was exported from illustrator as an SVG and (I'm not sure whether this is relevant or not) it does have some pixel data in it.
Here's my JSFiddle example.
Note that going directly to the image, it shows up just fine:
http://ykcreations.com/tv.svg
Edit: This does not work in Chrome or Safari but DOES in Firefox. Webkit issue?
There is a problem with your source SVG. See this updated Fiddle pointing to a different SVG file that works correctly: http://jsfiddle.net/wdW2K/2/
.tv {
background: url("http://phrogz.net/svg/800x800.svg");
width: 400px; height: 400px;
}
Edit: Specifically, the problem appears to be that WebKit does not support <image> in an SVG used as a background. Modifying your file minimally to change the <image> to reference a local (non-data-uri) file, and adding a <circle/>, I was able to see both the image and circle when viewing the SVG directly in Chrome, but when used as a background image only the circle was visible.
This bug smells relevant.
It has to do with your image, try plugging the following into your CSS:
.tv
{
background-image: url("http://croczilla.com/bits_and_pieces/svg/samples/butterfly/butterfly.svg");
width: 400px;
height: 400px;
}
Perhaps your SVG is actually an SVGZ? SVGZ files are the compressed versions of SVG files. Usually you have to configure your server to handle that, but FF may just be able to deal with the compressed versions.
EDIT
See Phrogz's answer below (possibly above by the time you read this); it covers this and gives a better explanation.
Another possible cause is serving the SVG with the wrong MIME type. Setting it to 'image/svg+xml' may fix the issue.
In Rails, this can be done by adding the following to config/intializers/mime_types.rb:
Mime::Type.register 'image/svg+xml', :svg
I had a simmilar problem with rendering svg as background image in Chrome, but everything was fine in Firefox. I found out that there was a syntax error inside my svg files exported from Adobe:
wrong xlink attribute:
xlink:href="data:img/png;base64
correct xlink attribute:
xlink:href="data:image/png;base64
Article bellow:
Link to article from css-trick that helped me
I have an SVG file, which I would like to view in Internet Explorer.
IE uses VML for vector-files, but I can't find ANY kind of converter between those two formats anywhere! (not in Inkscape, Illustrator, OpenOffice Draw.....how is this possible !)
I took a look at Raphael, but Raphael can't read existing files.
I found http://vectorconverter.sourceforge.net/index.html
but I can't understand how to use it... any help ?
Try this - SVG path to VML Path. It basically transforms SVG path into VML path that can be used in v:shape.However you still have to transform SVG's path into v:shape manually. The vector converter that you have tried is web based and uses XSLT templates to do the transformation, while the library that i'm suggesting can do it with pure javascript and single line of code. Hope this helps.
You can try this online converter : http://www.irunmywebsite.com/raphael/SVGTOHTML_LIVE.php
You can choose between shapes converted as JSON which are managed by Raphael. Or an inline and faster wrapping with Raphael.
I personally prefer the JSON method. You can put the content on an external file and ajax drawings at will. You will next draw the shapes with either of the following methods :
Raphael(json); //create a new paper with the shapes
Or if you want to draw on an existing paper :
function drawJson(items, paper) {
var set = paper.set(),
l = items.length;
for (i = 0; i < l; i++) {
set.push(paper[items[i].type]().attr(items[i]));
}
return set;
}
You can put the last function in a Raphael plugin.
Note : You can save some kb by removing some spaces inside the converted paths. For example with ant :
<replaceregexp match="\s?([CML])\s?" replace="\1" flags="g" file="drawings.json"/>
LibreOffice can read VML imported from a Word doc. You can also download and tweak the SVG=>VML XSLT and test it in IE like this:
<?xml version="1.0" encoding="utf-8"?><?xml-stylesheet type="text/xsl" media="application/xml" charset="UTF-8" href="svg2vml.xml"?>
<svg>
<rect x="25" y="25" width="150" height="200" style="stroke:#AABBFF; stroke-width:1; fill:#AABBFF"/>
<ellipse cx="100" cy="120" rx="50" ry="75" style="stroke:#FF0000; stroke-width:4; fill:#AABBFF"/>
</svg>