We Keep Coding

How to fit svg path into svg viewbox in React Native

I am trying to implement barcode scanner viewFinder and I want to use svg icon to make it look nice, but I have a problem with forcing the path element inside the svg to take up the full svg width and height. I am using react native and to generate icon i use SVGR https://react-svgr.com/playground/?native=true&typescript=true in the scan handler I set the dimensions of the svg like so:
const handleBarCodeScanned = ({ type, data, bounds }: BarCodeEvent) => {
if (!bounds) return;
const { origin, size } = bounds;
setX(origin.x);
setY(origin.y);
setWidth(size.width);
setHeight(size.height);
};
and the I ise them inside the svg which looks like so
import * as React from "react";
import Svg, { SvgProps, Path } from "react-native-svg";
export const ViewFinder = (props: SvgProps & { top: number; left: number }) => {
const { width, height, top, left } = props;
return (
<Svg
width={width}
height={height}
style={{
borderColor: "green",
borderWidth: 2,
position: "absolute",
left: 0,
top: 0,
width: "100%",
height: "100%",
}}
fill="none"
stroke="green"
preserveAspectRatio="none"
viewBox={`0 0 ${width} ${height}`}
>
<Path d="M6.13 1L6 16a2 2 0 0 0 2 2h15"></Path>
<Path d="M1 6.13L16 6a2 2 0 0 1 2 2v15"></Path>
</Svg>
);
};
original icon is a featerIcons crop icon https://feathericons.com/ and the original code of the icon is:
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-crop"><path d="M6.13 1L6 16a2 2 0 0 0 2 2h15"></path><path d="M1 6.13L16 6a2 2 0 0 1 2 2v15"></path></svg>
as you can see I set the border color and borderWidth on the svg itself, and it scales to fit the container so here everything seems to be ok. I have viewBox and preserveAspectRatio set up its just the inner path not scaling with the svg, and it is not just this icon I have tries several and the issue is still this same so there must be something wrong with my understanding of svg.
Thanks a lot for any help.

Normally a viewBox would be 4 fixed numbers, i.e. unrelated to width and height. That should give you the result you want.
Your content doesn't change in size so your viewBox shouldn't change either.

Too many re-renders, trying to change an svg in React, how to fix this

I'm trying to change the color of a SVG based on the tempature, I keep getting the too many re-renders errors. I'm wondering what is the right way to get this code working, i just can't figure it out ?
My code (im trying first to change the id name, to see if its works)
export default function Svg({ data }) {
const [colorTemp, setColorTemp] = useState('red');
console.log(data);
if (data > 20) {
setColorTemp('blue');
}
return (
<svg
id={colorTemp}
enable-background="new 0 0 379.181 379.181"
height="512"
viewBox="0 0 379.181 379.181"

In this case you do not want to be using state as it will trigger a re-render each time it is changed. Because the value is based only on the data prop passed do a simple check like so:
export default function Svg({ data }) {
let colorTemp = 'red';
if(data > 20) {
colorTemp = 'blue'
}
return (
<svg
id={colorTemp}
enable-background="new 0 0 379.181 379.181"
height="512"
viewBox="0 0 379.181 379.181"
// ...

Try to use useEffect hook and set it to take effect when data changes:
export default function Svg({ data }) {
const [colorTemp, setColorTemp] = useState('red');
console.log(data);
useEffect(() => {
data > 20 ? setColorTemp('blue') : setColorTemp('red')
}, [data])
return (
<svg
id={colorTemp}
enable-background="new 0 0 379.181 379.181"
height="512"
viewBox="0 0 379.181 379.181"

Fabricjs svg parsing error

guys, i've got a very mysterious problem here.
I've got an svg <svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='263.342' height='132.29' viewBox='0 0 263.342 132.29'><path fill='#FFC55D' d='M148.718 39.53S152.442 0 199.442 0v57.604l-26.236-18.628-16.908 18.628-.467 42.678s-.99 18.658-20.113 18.658'/><path fill='#FEDBC8' d='M63.44 132.29c-44 0-46.084-38.09-45.903-44.62-1.45 0-11.837-1.268-11.837-9.974 0-13.785 11.74-11.97 11.74-11.97V55.567l-.644-24.077H63.44v100.8zM63.44 132.29c43 0 45.76-38.09 45.58-44.62 1.45 0 11.5-1.268 11.5-9.974 0-13.785-12.08-11.97-12.08-11.97V55.567l.995-24.077H63.44v100.8z'/><path fill='#1CA97E' d='M46.18 70.078c0 3.405-2.76 6.167-6.167 6.167-3.406 0-6.167-2.762-6.167-6.167 0-3.406 2.76-6.167 6.167-6.167 3.406 0 6.167 2.762 6.167 6.168M80.642 70.078c0 3.405 2.76 6.167 6.167 6.167 3.405 0 6.166-2.762 6.166-6.167 0-3.406-2.76-6.167-6.167-6.167s-6.168 2.762-6.168 6.168'/><path fill='#F37885' d='M49.263 99.49c0 8 6.356 14.196 14.196 14.196s14.196-6.195 14.196-14.195H49.263zM63.335 113.688c7.84 0 14.32-6.196 14.32-14.196H63.44'/><path fill='#78492F' d='M18.44 67.9V31.627s-11 1.995-11 7.98V61.37s4 6.53 11 6.53'/><path fill='#78492F' d='M74.44 9.49H14.62s2.54 13 8.888 13H.11s-2.72 14 18.863 14H74.44v-27zM108.44 31.626V20.562c0-5.985-4.88-10.07-8.21-11.07H71.21c-3.33 1-7.77 5.085-7.77 11.07v15.93h45V67.9s11-1.995 11-7.98V38.157s-5-6.53-11-6.53'/><path fill='#FEDBC8' d='M199.44 132.29c-42 0-44.34-36.73-44.164-43.028-1.398 0-11.287-1.224-11.287-9.62 0-13.293 11.45-11.544 11.45-11.544v-9.794l-.775-17.812h44.776v91.798z'/><path fill='#82A0D7' d='M183 72.296c0 3.284-2.663 5.946-5.947 5.946s-5.947-2.662-5.947-5.946 2.663-5.947 5.947-5.947S183 69.01 183 72.295'/><path fill='#F37885' d='M185.974 100.49c0 8 6.13 13.69 13.69 13.69s13.69-5.69 13.69-13.69h-27.38z'/><path fill='#FFC55D' d='M250.282 39.53S246.442 0 199.442 0v57.49h43.377l.466 42.736s.933 18.687 20.056 18.687M199.44 57.603V.233s-48.974-3.266-48.974 39.88c0 30.275 4.956 27.518 4.956 27.518l.32-10.494s16.66-2.798 16.66-14.925c5.863 7.695-1.96 15.393 27.04 15.393'/><path fill='#FEDBC8' d='M199.44 132.29c42 0 44.232-36.73 44.058-43.028 1.398 0 11.34-1.224 11.34-9.62 0-13.293-11.396-11.544-11.396-11.544v-9.794l.558-.813h-44.56v74.8z'/><path fill='#82A0D7' d='M216.232 72.296c0 3.284 2.663 5.946 5.947 5.946s5.946-2.662 5.946-5.946-2.663-5.947-5.947-5.947-5.948 2.662-5.948 5.946'/><path fill='#F37885' d='M199.44 114.18c7.563 0 13.913-5.688 13.913-13.688H199.44'/></svg>
And some code, which renders this svg on my canvas, using fabricjs:
fabric.loadSVGFromString(str, function(objects, options) {
var obj = fabric.util.groupSVGElements(objects, options);
obj.lockUniScaling = true;
obj.scaleToWidth(200);
canvas.add(obj).renderAll();
});
So i got this:
Instead of this:
P.S. Background color is ok – canvas' color.
Help guys

so this svg works fine.
you probably used an old version of fabricjs when trying to parse it. that comes out is an old "a" command drawing bug.
if you copy paste this svg in the fabricjs.com/kitchensink that is a general demo/tester you will see it working good.
so please download latest version of library and you should be fine

Is there in Jquery or Dojo or plain JavaScript way to convert div to image?

Is there in Jquery or Dojo or pure JavaScript way to convert div to image ? Extension of image is arbitrary.

You could create an empty div and create a class with the background-image property set to your image. Then, using jQuery or Dojo, add the class to your div.
.myImage {
background-image: url(image.png);
background-repeat: no-repeat;
}
<div id="myDiv"></div>
$('#myDiv').addClass('myImage');

Yes, there is, but it's tricky and maybe impossible to get it to render exactly as it appears on the page unless the div element and its appearance as possibly defined in CSS are defined in a manner than can fully stand-alone from the page.
Embed the desired HTML into SVG as a foreign object.
Draw the image. (These two steps are summarized here https://developer.mozilla.org/en-US/docs/HTML/Canvas/Drawing_DOM_objects_into_a_canvas?redirectlocale=en-US&redirectslug=Web%2FHTML%2FCanvas%2FDrawing_DOM_objects_into_a_canvas )
Obtain the canvas data using getImageData()
Encode the data into the desired image format (or send the stream of data to the server encoded as base64 (step 3 and 4 can be done as one step by using toDataURL)
An example image format easy to work with on one's own is the Unix PNM (PBM, PGM, and PPM) formats which can be sent as ASCII data.
P2
# foo.pgm
18 7
9
0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0
0 3 3 3 3 0 0 6 6 6 6 0 0 9 9 9 9 0
0 3 0 0 0 0 0 6 0 0 6 0 0 9 0 0 9 0
0 3 3 3 0 0 0 6 0 0 6 0 0 9 0 0 9 0
0 3 0 0 0 0 0 6 0 0 6 0 0 9 0 0 9 0
0 3 0 0 0 0 0 6 6 6 6 0 0 9 9 9 9 0
0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0
(Enlarged 20x: http://www.codelib.net/html/foo.png )
Stealing from https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement to show you an example of using toDataURL to output PNG image data:
function test() {
var canvas = document.getElementById("canvas");
var url = canvas.toDataURL();
var newImg = document.createElement("img");
newImg.src = url;
document.body.appendChild(newImg);
}
Another way is to build upon the work done by html2canvas:
create screenshot of webpage using html2canvas (unable to initialize properly)
The accepted answer there shows how to screenshot the HTML body element, but it could easily be modified to "screenshot" the contents of a div by modifying the jQuery selector on the first line of the code.

From Javascript array to an image of some kind

Ok, so I have the following array of data:
shipGrid = [
['0','0','0','0','0','0','0','0','0','0'],
['0','0','0','0','0','0','0','0','0','0'],
['0','0','1','0','0','0','0','1','0','0'],
['0','0','0','0','0','0','0','0','0','0'],
['0','0','0','0','1','1','0','0','0','0'],
['0','0','0','0','0','0','0','0','0','0'],
['0','0','1','0','0','0','0','1','0','0'],
['0','0','0','1','1','1','0','0','0','0'],
['0','0','0','0','0','0','0','0','0','0'],
['0','0','0','0','0','0','0','0','0','0']];
Which I have translated into this clickable group of <li>'s:
Is it possible to convert this array of <li>'s into an image of somekind?
It doesn't have to be just a PNG, GIF or JPG - it can be a SVG or Vector based thing.
I'm a bit stumped, I'd like to do it without a server side language - so I thought maybe a SVG library or would work well...?
Cheers.
edit: This needs to be viewable in the browser itself.

Since you're mentioning SVG I guess that you could accept a solution that would only work in modern browsers. If so, you should defenitely take a look at the HTML 5 <canvas> element. Note however, that the canvas element will not be supported in Internet Explorer until version 9. ExplorerCanvas is an open source project that tries to fill in that gap, but I have not tried it.
<!DOCTYPE html>
<html>
<head>
<title>From JavaScript array to canvas</title>
<style>
body {
background-color: #eee;
}
</style>
</head>
<body>
<canvas id="image"></canvas>
<script>
var imageArray = [
[0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0],
[0,0,1,0,0,0,0,1,0,0],
[0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,1,1,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0],
[0,0,1,0,0,0,0,1,0,0],
[0,0,0,1,1,1,1,0,0,0],
[0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0]
];
var imageCanvas = document.getElementById('image');
// getContext will be supported in Internet Explorer 9.
if (imageCanvas.getContext) {
imageCanvas.height = imageArray.length;
imageCanvas.width = imageArray[0].length;
var imageContext = imageCanvas.getContext("2d");
imageContext.fillStyle = "#fff";
imageContext.fillRect(0, 0, imageCanvas.width,
imageCanvas.height);
imageContext.fillStyle = "#000";
for (var x = 0; x < imageCanvas.width; x++) {
for (var y = 0; y < imageCanvas.height; y++) {
if (imageArray[y][x] === 1) {
imageContext.fillRect(x, y, 1, 1);
}
}
}
}
</script>
</body>
</html>
The code above has only been tested in Google Chrome.
Dive Into HTML5 has a nice chapter on the canvas element. Other resources are Mozilla Developer Network's Canvas tutorial. You could also take a look at Bill Mill's canvas tutorial.

A simple way of doing this would be to save it into Portable Bitmap Format (PBM), which it just a simple ASCII file
The above example might look sonmething like the following in the contents this ASCII file
P1
# This is a smiley
10 10
0 0 0 0 0 0 0 0 0 0
0 0 0 0 0 0 0 0 0 0
0 0 1 0 0 0 0 1 0 0
0 0 0 0 0 0 0 0 0 0
0 0 0 0 1 1 0 0 0 0
0 0 0 0 0 0 0 0 0 0
0 0 1 0 0 0 0 1 0 0
0 0 0 1 1 1 1 0 0 0
0 0 0 0 0 0 0 0 0 0
0 0 0 0 0 0 0 0 0 0
It's pretty trivial to convert tour array into a map like the above.
If you're saving this from JavaScript then the user's browser security settings may prevent you from doing this. See the following link: http://www.c-point.com/JavaScript/articles/file_access_with_JavaScript.htm
Edit:
Yeah, this image type won't display in the browser. Check out the following link for supported image types by browser:
http://en.wikipedia.org/wiki/Comparison_of_web_browsers#Image_format_support

Javascript can't convert HTML into images by itself, you will need Ajax and a server side plugin to do this for you.
I would tackle this problem by sending the shipGrid data to the server, which interprets the sent data and renders the image in the desired style.
Without knowing what server side languages you have available to you we can't assist further, but any image plugin should have extensive documentation and examples.
Edit
Forgot about SVG's, you might be able to get JS to dynamically render an SVG image for you, take a look at this tetris example:
http://croczilla.com/bits_and_pieces/svg/samples/svgtetris/svgtetris.svg
Take a look at the source, should give you something to work by.