News Articles SVG

Build a re-usable SVG icon library with React and TypeScript.

Icon library representation on a grid of 7 x 3. Scalable Vector Graphics (SVGs) are commonly used for web applications due to their innate ability to augment after creation. Vector graphics are written in XML format providing tremendous advantages for quality, scale and compression over traditional raster image formats such as .png or .jpg. In addition, we can […]

Link in custom area inside svg image does not work

I want to create some links and hover effects inside a svg image. So, I created some custom transparent areas inside one svg image, in an online images editor, in order to do that. But when I try to apply some links in those custom areas, as show below, it does not work. How can […]

Control the order of visibility of the multiple paths of SVG element

i was searching a way to show an image in html with rounded dashed border like example below such that number of dashes and their individual colors can be controlled, the similar example can be observed in WhatsApp application status tab where number of dashes changes according to the number of statuses uploaded by user. […]

Day 16: Icon buttons should be labelled with aria-label

TL;DR Use aria-label to give accessible names to icon buttons. Browsers may fail to recognize an icon image’s own accessible name as its parent <button> element’s accessible name. Introduction My Ideal Map App, a web app I’m building, has four icon buttons on its main screen: My Ideal Map App’s main screen (screenshot by the […]

SVG icon disappears when collapsing a sidebar

When I collapse my sidebar I want the text to hide and keep the SVG visible. It works as expected but for some reason when the sidebar is collapsed, the SVG of ‘Projects’ disappears (the other svg’s are displayed as expected) What I’ve tried: CSS (truncated) Added a rule to don’t show the Projects text […]

Vue.js | Change Fill of a SVG via routerlink

the idea is, that I want to change the color of a SVG which is displayed on the header depending on the site you are on. So if I’m f. e. on "home", I want to have it displayed blue and if I am on "contact" i want to have it green. Header, HTML <router-link […]

Scale SVG to height of an adjacent element

I’m trying to scale an SVG with a fixed aspect ratio to match the height of an adjacent element (a div containing a range of different elements). For demonstration purposes, here I have simply set the height of the SVG (#triangle) to 10rem, which just happens to match the height of the div (#text) on […]

Render icons from an SVG file on HTML page

I have an icons.svg file that seems to contain assets that I need to use in my Angular app. The file looks something like this (note, the … means omitted data due to security reasons): <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><path d="…" id="o"/></defs><symbol id="icon-add-member-contain-heavy" viewBox="0 0 64 64"><path d="B0 … 4A3q"/></symbol><symbol id="icon-add-member-contain-light" viewBox="0 0 64 64"><path d="A5 … […]

SVG error while using JavaScript near operator "&&" [duplicate]

I have a simple SVG (embed HTML into SVG) <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 480 50" width="480px" height="50px"> <!– Common use case: embed HTML text into SVG –> <foreignObject x="0" y="0" width="100%" height="100%"> <h1 xmlns="http://www.w3.org/1999/xhtml"> Hello </h1> <script xmlns="http://www.w3.org/1999/xhtml"> var me=1,u=1; if(me != 0 && u != 0){ console.log("Me and U"); } else{ console.log("Only me"); […]

How to make svg sprite a regular picture?

I have such a picture for the background. It should be made normal and put in background <svg class=”iphone-background__img” viewBox=”0 0 991 828″ fill=”none” xmlns=”http://www.w3.org/2000/svg”> <g filter=”url(#filter0_f_479_2171)”> <path d=”M726.689 447.055C636.6 301.175 399.748 283.135 292.584 292.35C204.911 229.864 267.12 198.986 369.452 84.6792C471.785 -29.6278 716.462 36.8959 857.979 37.8365C999.495 38.777 1120.33 339.695 1101.17 471.585C1082.02 603.476 839.301 629.405 726.689 447.055Z” […]

Center one Svg layer into another Svg

I am trying to do probably some easy task: wrapp one svg layer into another and center it. In this case it is a simple arrow (well, a svg path) which should be nested in rectangle (a square shape in this particular matter). The thing is, I am completely new to this svg subject, so […]

Next.js + Framer Motion scroll progress animation

So I want to create a viewport scroll progress circle with Framer Motion in a Next.js app (using tailwind as css). I used the example code from Framer Motion: https://codesandbox.io/s/framer-motion-viewport-scroll-and-svg-path-animation-mwi35?from-embed=&file=/src/Example.tsx:686-1070 The code I have down here displays the circle, but when I enable strokeDasharray or pathLength (in the style attribute) it disappears. And on scroll […]

Loading multiple small images with JavaScript

I’m working on a GBA Pokemon Fire Red "clone" made with JavaScript, I’m planning on using original assets. The maps are made out of 16x16px blocks (left) which are made out of four 8x8px tiles (right) so loading a map will result in a lot of images being loaded. As I’m using Vue I want […]

How to access SVG file from my CSS folder using a local URL on Mac? [closed]

How do I get the SVG image to display using the URL? I feel like the command is correct. Source: CSS – Stack Overflow

Changing width and heigh of svg file

I was given a link to the animated blobby button in codepen and I am supposed to change the text and the font-size of the text inside it. I have tried applying width and height to the HTML svg tag, but it’s not working. Also, when I copied the button with changed text and put […]

CSS : Scale and rotate in place multiple SVG backgrounds image on one element – possible without JS?

My end-goal is to reproduce this cool sparkle effect by Josh W Comeau : He achieve this by inserting an element for each sparkle with javascript. I want to do this effect in a web app where I do not have this possibility, I can only use CSS. My idea is to use several background […]

Trouble while using .svg file in React.js code

I am trying to use illustration in my react project (https://storyset.com/illustration/market-launch/pana/animate) [illustration image which I trying to use in my code https://i.stack.imgur.com/AQr8P.png I choose SVG and CSS I got long coded .svg file, Can anyone help me, how can I use that file of SVG in my react code .svg file which I trying to […]

d3.timeParse() Issue with date, month & year

I’m trying to create x and y scales for eur/usd (y-axis) and time (x-axis). I have tried to modify my d3.timeParse() to get this to work but i’m having issues. I have also added an image example of what the JSON data looks like. I have tried to match the timeParse() inputs to the JSON […]

Sitemap | Terms | Privacy | Cookies | Advertising

Senior Software Developer

Creator of @LzoMedia I am a backend software developer based in London who likes beautiful code and has an adherence to standards & love's open-source.