I am using loadTexture (THREE.ImageUtils.loadTexture('/images/areaYellow.svg')) for loading svg images
but when i zoom in image is getting blurred is there any way to load the image without blur. i am using version 73 . svgloader is started supporting from version 83. i need solution for version 73 or less.
Thanks for reading.
Try setting the width and the height of the SVG, Chrome will render it sharply.
For Example:
<svg id="Layer_1" data-name="Layer 1"
xmlns="http://www.w3.org/2000/svg" width="2048" height="1024" viewBox="-2 -40 2048 1024">
Related
I got an interesting problem (I hope!)
I have noticed that there are two "types" of SVGs
First we have the conventional SVG file with and tags for example:
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 841.89 1190.55" style="enable-background:new 0 0 841.89 1190.55;" xml:space="preserve">
<g id="Background">
<rect id="Color1" class="st3" width="840.94" height="1190.55"/>
<g id="Texture" class="st4">
<path class="st5" d="M843.67,410.13c-73.29 ...
Secondly we have embedded tags in the image, not sure what to call them, so I've just named them "fake SVG", an example:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="3718" height="4899" viewBox="0 0 3718 4899">
<image id="Lager_1" data-name="Lager 1" width="185.9" height="244.95000000000002" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUh ...
My question is: Is there is any smooth way to convert a conventional SVG into a "fake" SVG? (please tell me if they have a real name). Also keep in mind that I would like to keep the groupings so each <g> should convert to a <image> tag
My thoughts: I am thinking about loading the conventional SVG into a <canvas> tag, it seems to be able to understand the <g> groupings in the conventional SVG well and consistently, and from there, somehow, convert those groups individually into base64 PNG URI, and reconstruct it into a fake SVG, perhaps there should be some library out there that can help out, does anyone have any ideas?
I'm not sure if this will exactly answer what you are trying to do, but you can do this:
<image id="something" href='data:image/svg+xml;utf8,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" .../>' />
Where you can just embed the original SVG as a string in the href when the encoding is set to data:image/svg+xml;utf8.
This will render the SVG in an <image> tag, but not in Base64 (I could not get this working, but there may be a way).
Source: https://css-tricks.com/probably-dont-base64-svg/
It is possible to convert an inline SVG with tags in the DOM to an image data-url. You just need to turn it into one like this:
imageTag.src = 'data:image/svg+xml,' + window.escape(svgTag.outerHTML);
The imageTag version can not have external links embedded in the SVG. It also needs width and height attributes on the SVG tag otherwise it will not show in some browsers. You could also draw this image to a canvas to rasterize the image, but as the comment mentioned that would only make it uglier if scaled.
If you want to convert it to a SVG file you should add this as a first line and then add the outerHTML of the svgTag.
<?xml version="1.0" encoding="UTF-8"?>
You can save the file with the .svg extension
I have a page displaying a d3 graph. This page also supports PDF exporting, and I am using the pdfkit library with the SVG-to-PDFKit extension. The issue I am having is that the graph on the page is very large to fill the width of the page, but this makes it too large when generating it to PDF. I have spent a lot of time researching how to resize the SVG's content (not just the view the SVG resides in) and there doesn't seem to be an already created function in the SVG-to-PDFKit library.
I found an answer that makes sense, but only occasionally works whenever chrome tools is up:
How can I resize an SVG?
If there is a better solution, I would love to know. My main issue is that the graph has to be resized after it is generated on the page, so that it doesn't skew the graph on the page, but only alters the graph on the PDF.
The code I have that occasionally works is:
var chartSVG = document.getElementById('chartSVG');
chartSVG.setAttribute("style", "viewBox: 0 0 32 32;");
SVGtoPDF(doc, chartSVG, 20, 170);
Is there possibly another attribute out there that would be better for the scenario? And does the line of code look like it's written correctly? I don't understand why it will only work when Chrome tools are up. Thanks in advance.
You definitely can resize SVG with setAttribute as well as with style property or via css:
var red = document.getElementById('red');
red.setAttribute('height', '50');
var green = document.getElementById('green');
green.style.width = '100px';
#blue {width:60px}
<svg id="red" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="49" fill="red"/></svg>
<svg id="green" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="49" fill="green"/></svg>
<svg id="blue" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="49" fill="blue"/></svg>
I am drawing a simple two rectangle svg as follows:
<svg width="72px" height="72px" viewBox="0 0 72 72" xmlns="http://www.w3.org/2000/svg">
<rect stroke-dashoffset="0" x="2.4px" y="2.4px"></rect>
<rect ng-class="$ctrl.expiryClass"
x="2.4px" y="2.4px"
stroke-dasharray={{$ctrl.dashlength}}
stroke-dashoffset={{$ctrl.offset}}></rect>
</svg>
This works well in chrome and looks like this:
However, the svg is not showing up in FireFox and I am only seeing the purple 2h box.
Any idea whats going on?
I expect you are setting the rectangle's width and height using CSS. Correct?
If so, that's an SVG 2 thing that currently only works in Chrome. You'll need to use regular width and height attributes if you want this to be cross-browser compatible.
<rect stroke-dashoffset="0" x="2.4px" y="2.4px" width="100px" height="100px"/>
I am trying to show base64 encoded SVG image in an image tag .
<img width="150" height="150" class="thumbnail-image" src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTM2NiIgaGVpZ2h0PSI3NjgiIGNsYXNzPSJvdmVybGF5IG1haW4tdHJlZS1zdmctYm94IiBjcm9zc29yaWdpbj0iYW5vbnltb3VzIiBpZD0ic3ZnIiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGcgaWQ9InN2Z0dyb3VwIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg2ODMsMjg0KSI+PHBhdGggY2xhc3M9Imxpbmsgc2luZ2xlUGFyZW50IGlwLWFuaW1hdGlvbiIgc3Ryb2tlLXdpZHRoPSIxLjVweCIgc3Ryb2tlPSIjMDNBOUY0IiBmaWxsPSJub25lIiBkPSJNLTI2LDRDLTE0Nyw0IC0xNDcsMjAgLTI2OCwyMCIgbWFya2VyLXN0YXJ0PSJ1cmwoI2Fycm93aGVhZFJhZGlhbFN0YXJ0LXJvb3QtZW0tc2VydmVyLTEpIiBtYXJrZXItZW5kPSJ1cmwoI2Fycm93aGVhZFJhZGlhbEVuZC1yb290LWVtLXNlcnZlci0xKSIgdGFyZ2V0aWQ9InNlcnZlci0xIiBzb3VyY2VpZD0icm9vdC1lbSIgc3R5bGU9InN0cm9rZS1kYXNoYXJyYXk6IDQ7IGFuaW1hdGlvbi1kaXJlY3Rpb246IHJldmVyc2U7Ii8+PHBhdGggY2xhc3M9Imxpbmsgc2luZ2xlUGFyZW50IGlwLWFuaW1hdGlvbiIgc3Ryb2tlLXdpZHRoPSIxLjVweCIgc3Ryb2tlPSIjMDNBOUY0IiBmaWxsPSJub25lIiBkPSJNLTI2OCwyMEMtMTQ3LDIwIC0xNDcsMTk2IC0yNS45OTk5OTk5OTk5OTk5OSwxOTYiIG1hcmtlci1zdGFydD0idXJsKCNhcnJvd2hlYWRSYWRpYWxTdGFydC1zZXJ2ZXItMS1jbGllbnQtMTI2KSIgbWFya2VyLWVuZD0idXJsKCNhcnJvd2hlYWRSYWRpYWxFbmQtc2VydmVyLTEtY2xpZW50LTEyNikiIHRhcmdldGlkPSJjbGllbnQtMTI2IiBzb3VyY2VpZD0ic2VydmVyLTEiIHN0eWxlPSJzdHJva2UtZGFzaGFycmF5OiA0OyIvPjxnIGNsYXNzPSJub2RlIG5vZGUtZWxlbWVudCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMCwwKXJvdGF0ZSg5MCkiIGNvb3JkPSIxODA6MCIgbmFtZT0iRWNvc3lzdGVtIE1hbmFnZXIiIGlkPSJub2RlLXJvb3QtZW0iPjx0ZXh0IHg9IjM2IiB5PSIzNiIgZHk9Ii4zNWVtIiBjbGFzcz0ibm9kZVRleHQiIGNpaWQ9InJvb3QtZW0iIHRleHQtYW5jaG9yPSJlbmQiIHRpdGxlPSJFY29zeXN0ZW0gTWFuYWdlciIgdHJhbnNmb3JtPSJyb3RhdGUoMTgwKSIgZmlsbD0iIzJkNjA4MyIgc3R5bGU9ImZvbnQtc2l6ZTogMTBweDsgZmlsbC1vcGFjaXR5OiAxOyI+RWNvc3lzdGVtIE1hbmFnZXI8L3RleHQ+PGNpcmNsZSByPSIyNiIgY2lpZD0icm9vdC1lbSIgZmlsbD0iI0IzRDRGQyIgc3Ryb2tlLXdpZHRoPSI1IiBjbGFzcz0ibm9kZS1jaXJjbGUiIHN0cm9rZT0iIzAzQTlGNCIvPjxpbWFnZSB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeGxpbms6aHJlZj0iaW1hZ2VzL2VtLWljb24ucG5nIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIiBjaWlkPSJyb290LWVtIiB0cmFuc2Zvcm09InJvdGF0ZSgxODApIiBjbGFzcz0iYmx1ZXByaW50LWljbyIgeD0iLTEwcHgiIHk9Ii0xMHB4IiB3aWR0aD0iMjBweCIgaGVpZ2h0PSIyMHB4Ii8+PC9nPjxnIGNsYXNzPSJub2RlIG5vZGUtZWxlbWVudCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTI5NCwxNikiIGNvb3JkPSItMjk0OjE2IiBpcGFkZHJlc3M9IjEyNy4wLjAuMSIgbmFtZT0iMTI3LjAuMC4xIiBpZD0ibm9kZS1zZXJ2ZXItMSI+PHRleHQgeD0iMjAiIHk9IjI2IiBkeT0iLjM1ZW0iIGNsYXNzPSJub2RlVGV4dCIgY2lpZD0ic2VydmVyLTEiIHRleHQtYW5jaG9yPSJlbmQiIHRpdGxlPSIxMjcuMC4wLjEiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDApIiBmaWxsPSIjMmQ2MDgzIiBzdHlsZT0iZm9udC1zaXplOiAxMHB4OyBmaWxsLW9wYWNpdHk6IDE7Ij4xMjcuMC4wLjE8L3RleHQ+PGNpcmNsZSByPSIyMCIgY2lpZD0ic2VydmVyLTEiIGZpbGw9IiNCM0Q0RkMiIHN0cm9rZS13aWR0aD0iMS41IiBjbGFzcz0ibm9kZS1jaXJjbGUiIHN0cm9rZT0iIzAzQTlGNCIvPjxpbWFnZSB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeGxpbms6aHJlZj0iaW1hZ2VzL3NlcnZlci1pY29uLnBuZyIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSIgY2lpZD0ic2VydmVyLTEiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDApIiBjbGFzcz0iYmx1ZXByaW50LWljbyIgeD0iLTEwcHgiIHk9Ii0xMHB4IiB3aWR0aD0iMjBweCIgaGVpZ2h0PSIyMHB4Ii8+PC9nPjxnIGNsYXNzPSJub2RlIG5vZGUtZWxlbWVudCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMS4xNzU2NjA5MjcxODE0NTllLTE0LDE5Milyb3RhdGUoOTApIiBjb29yZD0iMTgwOjE5MiIgaXBhZGRyZXNzPSIxOTIuMTY4LjQ4LjMwIiBuYW1lPSJhbmphbmEiIGlkPSJub2RlLWNsaWVudC0xMjYiPjx0ZXh0IHg9Ii0xNCIgeT0iMjYiIGR5PSIuMzVlbSIgY2xhc3M9Im5vZGVUZXh0IiBjaWlkPSJjbGllbnQtMTI2IiB0ZXh0LWFuY2hvcj0ic3RhcnQiIHRpdGxlPSJhbmphbmEiIHRyYW5zZm9ybT0icm90YXRlKDE4MCkiIGZpbGw9IiMyZDYwODMiIHN0eWxlPSJmb250LXNpemU6IDEwcHg7IGZpbGwtb3BhY2l0eTogMTsiPmFuamFuYTwvdGV4dD48Y2lyY2xlIHI9IjIwIiBjaWlkPSJjbGllbnQtMTI2IiBmaWxsPSIjQjNENEZDIiBzdHJva2Utd2lkdGg9IjEuNSIgY2xhc3M9Im5vZGUtY2lyY2xlIiBzdHJva2U9IiMwM0E5RjQiLz48aW1hZ2UgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHhsaW5rOmhyZWY9ImltYWdlcy9hZ2VudC1pY29uLnBuZyIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSIgY2lpZD0iY2xpZW50LTEyNiIgdHJhbnNmb3JtPSJyb3RhdGUoMTgwKSIgY2xhc3M9ImJsdWVwcmludC1pY28iIHg9Ii0xMHB4IiB5PSItMTBweCIgd2lkdGg9IjIwcHgiIGhlaWdodD0iMjBweCIvPjwvZz48L2c+PGRlZnM+PG1hcmtlciBpZD0iYXJyb3doZWFkUmFkaWFsRW5kLXJvb3QtZW0tc2VydmVyLTEiIHZpZXdCb3g9IjAgLTUgMTAgMTAiIHJlZlg9IjAiIHJlZlk9IjAiIG1hcmtlcldpZHRoPSI2IiBtYXJrZXJIZWlnaHQ9IjYiIG9yaWVudD0iYXV0byIgZmlsbD0iIzAzQTlGNCI+PHBhdGggZD0iTTAsLTVMMTAsMEwwLDUiLz48L21hcmtlcj48bWFya2VyIGlkPSJhcnJvd2hlYWRSYWRpYWxFbmQtc2VydmVyLTEtY2xpZW50LTEyNiIgdmlld0JveD0iMCAtNSAxMCAxMCIgcmVmWD0iMCIgcmVmWT0iMCIgbWFya2VyV2lkdGg9IjYiIG1hcmtlckhlaWdodD0iNiIgb3JpZW50PSJhdXRvIiBmaWxsPSIjMDNBOUY0Ij48cGF0aCBkPSJNMCwtNUwxMCwwTDAsNSIvPjwvbWFya2VyPjwvZGVmcz48ZGVmcz48bWFya2VyIGlkPSJhcnJvd2hlYWRSYWRpYWxTdGFydC1yb290LWVtLXNlcnZlci0xIiB2aWV3Qm94PSIwIC01IDEwIDEwIiByZWZYPSIwIiByZWZZPSIwIiBtYXJrZXJXaWR0aD0iNiIgbWFya2VySGVpZ2h0PSI2IiBvcmllbnQ9ImF1dG8iIGZpbGw9IiMwM0E5RjQiPjxwYXRoIGQ9Ik0wLDBMMTAsLTVMMTAsNVoiLz48L21hcmtlcj48bWFya2VyIGlkPSJhcnJvd2hlYWRSYWRpYWxTdGFydC1zZXJ2ZXItMS1jbGllbnQtMTI2IiB2aWV3Qm94PSIwIC01IDEwIDEwIiByZWZYPSIwIiByZWZZPSIwIiBtYXJrZXJXaWR0aD0iNiIgbWFya2VySGVpZ2h0PSI2IiBvcmllbnQ9ImF1dG8iIGZpbGw9IiMwM0E5RjQiPjxwYXRoIGQ9Ik0wLDBMMTAsLTVMMTAsNVoiLz48L21hcmtlcj48L2RlZnM+PC9zdmc+">
jsFiddle Link
My image tag size is fixed and small (150*150) where as my svg size can vary(currently 1366*768).
In all other browsers svg image is scaled to image tag dimensions.
In IE image itself is not showing up.
If I increase image tag dimensions say 1000*1000 it is showing.
What I should be doing to show the image in IE like in other bowsers?
You should add viewBox="0 0 [width] [height]" to the <svg /> root element to make it scale.
Here's your fiddle with viewBox="0 0 1366 768":
https://jsfiddle.net/xdcqagL4/1/
BTW you can also look into the preserveAspectRatio attribute which allows you control how the image is scaled.
Here's a great write-up on the SVG coordinate system: https://sarasoueidan.com/blog/svg-coordinate-systems/
I'm working with animated SVGs / Snap.svg for the first time, so please forgive my lack of knowledge on this subject.
I made a series of 3 animated SVG "frames" (400x300px), each nested within a larger SVG (1200x300px) to contain them all. A div element with a clip style property hides the other two "frames" when they're not ready to be shown.
Using Snap.svg, each frame is supposed to "slide" into view using translate after a certain amount of time, and within each frame are some animated elements.
Long story short: the animation looks perfect in Firefox, but it looks awful in Chrome/Webkit. In Chrome, it looks like each of the frames are just being stacked on top of each other instead of side-by-side.
In addition, two of the elements (the cow circle joules and the graph circle graph) are rendering in the upper-left corner instead of using their translate property to position them in the center-right area.
You can see the animation in Plunker. Please try it out in both browsers to see what I mean.
http://plnkr.co/UhTy83
Firefox GIF screen capture:
Chrome GIF screen capture:
Thanks Ian in the comments to my question! Swapping out the <svg> tags for <g> (group) tags fixed this problem. It's interesting to me that Firefox allows you to transform <svg> elements but Webkit does not.
Before:
<svg class="slides" width="1200" height="300">
<svg class="slide1" width="400" height="300"></svg>
<svg class="slide2" width="400" height="300"></svg>
<svg class="slide3" width="400" height="300"></svg>
</svg>
After:
<svg class="slides" width="1200" height="300">
<g class="slide1"></g>
<g class="slide2"></g>
<g class="slide3"></g>
</svg>