Converting styled SVG markup to images

Combine SVG images and character in a new SVG image, style and save as a PNG image with needed dimensions

When it is necessary to create an original icon with some particular meaning, building it of standard symbols and free SVG images can be an option. No special tools, hard to use SVG editors, are necessary for combining characters and SVG images in an SVG markup. With the browser DevTools you can conveniently resize, position, rotate or color any component of an SVG image. When it is ready, the image can be saved as PNG or JPEG image of any needed size.

For example, I need to create an icon for a browser extension that reversibly hides images. I had a quick idea to wrap the standard Prohibited sign 🛇 around some SVG image symbolizing images.

I used Google Search to learn that a camera is often used to symbolize images. I downloaded an SVG outline of a camera:

An SVG image can be embedded into a SVG markup using g element. I placed the SVG with a camera and a text element with 🛇 into a parent SVG element:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 307 307">

    <g class='camera'>
        <svg width="250" height="200"  >
             <path d="m231,26l-66,0c-6,-8 -13,-26 -19,-26l-41,0c-7,1…