DEV Community: Julia Shlykova

SVG animation. Introduction

Julia Shlykova — Thu, 02 Apr 2026 15:39:39 +0000

There are multiple ways to make your SVG animated:

SVG/SMIL
CSS animation
JavaScript

SVG/SMIL

SMIL stands for Synchronized Multimedia Integration Language, that is an XML-based language. It allows to animate various attributes directly inside the SVG element. So, it has an advantage - the animation is preserved even if the SVG is embedded in <img>.

There are multiple talks that SMIL is obsolete and won't be supported in future. However, according to caniuse SVG SMIL is still fully supported by major browsers.

SMIL defined various animation elements, that can be used directly inside SVG elements: animate, set, animatemotion, animatecolor etc. We can change shape of SVG elements using it.

Here, the example of what can be achieved using SMIL:

To read more in detail how to use SVG/SMIL visit this wonderful article from css-tricks.com.

CSS

It's preferable to use CSS to animate SVG if the animation is simple and requires only presentation attributes, transform property or other CSS properties:

JavaScript

JavaScript can manipulate DOM elements so it's a powerful tool in the world of the SVG animation. Especially with method animate:

Cheat Sheet for Git

Julia Shlykova — Sun, 12 Oct 2025 07:51:18 +0000

if you have just installed git on your machine, first you need to specify your identity (your username and email):

$ git config --global user.name "Jane Doe"
$ git config --global user.email janedoe@example.com

to connect your account on github to your local machine follow this guidance
You have created a repository on github and want to work on the local machine:

git clone <repository_url HTTPS or SSH>

Show the url that Git has stored:

git remote -v

origin is the default name Git gives to the url that Git cloned from

Create a branch and switch to it:

git checkout -b <new_branch>

Get the latest update from the main branch:

git checkout main
git pull origin main
git checkout <new_branch>
git merge main

git pull = git fetch && git merge. git fetch updates local reference to the origin/main; git merge origin/main merges origin/main into main.

git pull --rebase = git fetch && git rebase.

push local branch to the remote and set the upstream

git push --set-upstream origin <new_branch>

we can use -u instead of --set-upstream

Check what upstream is assigned to the local branch:

git branch -vv

Delete remote branch that is upstream:

git push origin :<new_branch>

notice the colon!

Delete branch locally:

git checkout main
git branch -d <new_branch>

Delete local references to deleted branches:

git remote prune origin

Remove git commit which has not been pushed:

git reset HEAD~1

Create local branch from an existing remote branch:

git checkout --track origin/<REMOTE_BRANCH_NAME>

--track allows to set upstream and sets the same name.

Modify the last unpushed commit:

git commit --amend

Discard all uncommited changes:

git restore .

rebase vs merge

These commands integrate changes from one branch into another one in different ways.

git checkout feature
git merge main

merge adds whole history of commits from main to feature.

git checkout feature
git rebase main

This maves the starting commit of feature on the top of main last commit. If we check history of commits now, hashes of commits will be different from the original ones.

squash merge

We can squash all commits from the feature branch into 1 commit:

git checkout main
git merge --squash feature
git commit

Interactive rebase

git checkout feature
git rebase -i main

Since rebase creates new commits, we can change them to clean up a messsy history. It will open a list of the commits that are about to be moved:

pick 33d5b7a Message for commit #1
fixup 9480b3d Message for commit #2
pick 5c67e61 Message for commit #3

fixup unites #2 commit with #1 commit with the message of #1 commit.

Cleanup

We don't necessarily need another branch to use interactive rebase:

git checkout feature
git rebase -i HEAD~3

HEAD~3 indicates the last 3 commits.

Conflicts with rebase

In case of the conflicts. We have three options:

git rebase --abort - undo the rebase. The branche's state returns to the state before git rebase was called.
git rebase --skip - skip the commit. The changes made in the problematic commit won't be included.
Resolve convlicts manually and run git rebase --continue

Important notes of rebase

Much cleaner commit history. In case of git merge there is a commit about merging.
Since rebase changes history of commits don't use it on public branches, that are used by other people.

JavaScript Proxy objects

Julia Shlykova — Wed, 09 Jul 2025 10:32:27 +0000

The Proxy object is used in place of the original object. It is used to create some kind of filter of the object: it can determine what kind of values can be set, what properties can be deleted, whether can we even get some value or they are restricted.

Basic structure

To create proxy we use syntaxis: Proxy(target, handler):

target - the original object, we want to proxy;
handler - an object consisted of traps, that determine which operations are intercepted and how to redefine them.

Let's look at the example with empty handler (all operations are implemented on the original object):

const target = {
  name: "Mary",
  status: "Online"
};

const handler = {};

const proxy = new Proxy(target, handler);

proxy.name = "Ann";

console.log(proxy.name); // Ann

for (let key in proxy) {
  console.log(key); // name status
}

proxy.name = sets value on target;
proxy.name returns value from target;
Iteration of keys in proxy returns keys from target.

Without handler, proxy just transfers all operations on target.

Handler

The most used traps in handler:

get - reading properties in target;
set - setting values to properties in target;
deleteProperty - controling deletion of properties

Trap "get"

The get trap takes the following arguments:

target - the same target from Proxy argument;
prop - the property;
receiver - this value. Usually it's either the proxy or an object that inherits from the proxy

Let's create some simple handler:

const target = {
  name: "Mary",
  status: "Online"
};

const handler = {
  get(target, prop) {
    if (prop in target) {
      return target[prop];
    } else {
      return "no info";
    }
  }
};

const proxy = new Proxy(target, handler);

console.log(proxy.name); // Ann
console.log(proxy.contact); // no info

Trap "set"

This trap is useful when we want some validation before setting values. It takes the same arguments as get plus value:

target - the same target from Proxy argument;
prop - the property;
value - the value to set for the property;
receiver - this value. Usually it's either the proxy or an object that inherits from the proxy

const object = {
  name: "Mary",
  status: "Online"
};

const handler = {
  set(target, prop, value) {
    if (prop in target && typeof value === 'string') {
      target[prop] = value;
      return true;
    } else {
      return false;
    }
  }
};

const proxy = new Proxy(object, handler);

proxy.name = "Ann";
proxy.status = false; // can't set since the value type is boolean

console.log(proxy.name); // Ann
console.log(proxy.status); // Online

set has to return true if we write the value and false if there is an error;

Trap "deleteProperty"

Let's say we don't want the password to be accessed anyhow in our object:

const user = {
  name: "Mary",
  _password: "******"
};

const handler = {
  get(target, prop) {
    if (prop === "_password") {
      throw new Error("Access denied")
    } else {
      return target[prop];
    }
  },
  set(target, prop, value) {
    if (prop === "_password") {
      throw new Error("Access denied")
    } else {
      target[prop] = value;
      return true;
    }
  },
  deleteProperty(target, prop) {
    if (prop === "_password") {
      throw new Error("Access denied")
    } else {
      delete target[prop];
      return true;
    }
  }
}

const proxyUser = new Proxy(user, handler);

try {
  console.log(proxyUser._password);
} catch(e) {
  console.log(e.message);
}

// Access denied

Private properties

Let's say we have some method that reaches the private property:

const user = {
  name: "Mary",
  _password: "******",
    getPassword() {
        return this._password;
    }
};

const handler = {
  get(target, prop) {
    if (prop.startsWith("_")) {
      throw new Error("Access denied")
    } 
        return target[prop];
  }
}

const proxyUser = new Proxy(user, handler);

try {
  console.log(proxyUser.getPassword());
} catch(e) {
  console.log(e.message);
}

// "Access denied"

Here, we will get error and denied access.

What if we want our method to work? We have to bind this not to the proxy but to the target. Then the method will be called upon the target, not proxy:

const handler = {
  get(target, prop) {
    if (prop.startsWith("_")) {
      throw new Error("Access denied")
    } 
    const value = target[prop];
    return (typeof value === 'function') ? value.bind(target) : value;
  }
}

Now upon calling proxyUser.getPassword() we will get "******".

Introduction to TypeScript. Setup

Julia Shlykova — Fri, 20 Jun 2025 22:52:21 +0000

TypeScript is a superset of JavaScript, that means JavaScirpt code is valid code in Typescript.

Differences between JavaScript and TypeScript

So, what does TypeScript add to JavaScript, that makes it so useful?

We know that JavaScript is a dynamic typing language, that allows us not to bother by explicitely declaring variables types and a variable can change its type at runtime.

Why would we not want that? Let's look at a JavaScript example:

function f() {

}

console.log(f + 1); //'function f(){}1'

Logically, we would expect an error to occur when we try to use addition on functions. However, JavaScript runtime implicitely converts both data types into String and does string concatenation.

TypeScript adds static typing to JavaScript. That means TypeScript also needs a compiler to check variable types before running a program, but after compilation we get the same old JavaScirpt code.

Let's return to the example and rewrite it in TypeScript:

function f():void {

}

console.log(f + 1);

At the compilation time it will show us an error Operator '+' cannot be applied to types '() => void' and 'number'. Good to know!

Plain TypeScript setup

Let's try to use TypeScript for a project created from scratch using npm.

Create an empty folder "typescript-practice".
Inside the folder run npm init -y.
Install typescript npm i -D typescript.
Create typescript configuration file npx tsc --init.

Create a new file script.ts:

//script.ts
const str: string = 'hello';
console.log(str);

We know that to execute JavaScript code we can use node script.js command. However, for TypeScript we should first compile it:
- run command tsc. It creates a new file script.js.
- execute this file by node script.js.

We can create a script for these two commands inside package.json:

...
  "scripts": {
    "dev": "tsc && node script.js"
  },
...

TypeScript setup with Vite bundler

You almost never have to make project from scratch, much more often you use some kind of bundler. Let's see how to setup typescript with vite:

Go to a directory where you want to create a project.
Run npm init vite@latest typescript-vite-practice -- --template vanilla-ts.
- vanilla-ts template tells vite that we don't use any framework like react, vue etc.
Open the project in a code editor and run npm install.
Run npm run dev and open the link in the browser.

TypeScript compiler

It works fine but pay attention to the fact that Vite doesn't perform type checking. We have to take care of it by the IDE and build process. We can run in CLI tsc command, that stands for "TypeScript Compiler".

TypeScript configuration file (tsconfig.json)

Inside the configuration file there are multiple properties, but we look at the most valuable ones for us:

"include" - specifies directory for files that need to be compiled. Usually, it looks like this: "include": ["./src"].

CompilerOptions

"target" - specifies the version of JavaScript code you want as output;
"module" - how modules are imported and exported;
"rootDir" - where to start looking for the TypeScript code;
"allowJs" - whether to allow project to have JavaScript files;
"strict" - not allow to compile the code if there are any TypeScript errors that are being strictly checked;

SVG dimension attributes and adaptive icons

Julia Shlykova — Wed, 30 Apr 2025 07:00:00 +0000

SVG viewport, viewbox and preserveAspectRatio
- preserveAspectRatio
Adaptive icons or logos
- Image sprites
- Defining media queries inside SVG

SVG viewport, viewbox and preserveAspectRatio

SVG viewport is a "window" through which we can see an svg element. It is defined by the width and height attributes of the SVG element. We can specify a length unit with the following units: em, ex, px, pt, pc, cm, mm, in, %. By default the used length units are px.

The important detail to remember is that SVG viewport is not browser viewport. The browser viewport refers to the part of the browser window, which shows the part of the document a user sees.

The viewBox for the outermost svg element defines the rectangle in user space that is mapped to the borders of the SVG viewport. The viewBox value is a sequence of four numbers: min-x, min-y (define the origin of coordinates _), width and height (_specifies viewBox size). All elements inside the svg element are drawn in the viewBox coordinate system.

Let's look at how SVG reacts to a change of min-x. We create a simple circle and change only viewBox:

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
 <circle cx="50" cy="50" r="40" />
</svg>

If SVG attributes viewbox and width are ommited, the SVG element will be rendered with a width of 300px. For height the value is 150px. In case, viewbox is specified, default values of these dimension attributes are auto (100%).

preserveAspectRatio

If we have the same aspect ratio for both viewBox and viewport, viewBox coordinate system just stretches to fill the viewport area. What happens if the aspect ratio is different? How can we specify position and scale? Here comes the preserveAspectRatio attribute.
Let's look at different preserveAspectRatio values for the base example:

<?xml version="1.0" encoding="UTF-8"?>
<svg
 xmlns="http://www.w3.org/2000/svg"
 viewBox="0 0 100 100"
 width="200"
 height="100"
 style="background-color: gray"
>
 <circle cx="50" cy="50" r="40" fill="burlywood" />
</svg>

Here, we have different aspect ratio for viewBox (1:1) and for viewport (2:1). That's why a circle doesn't fit in viewport. We don't see preserveAspectRatio attribute in this example, but without specifying it looks like this: preserveAspectRatio="xMidYMid meet"

The preserveAspectRatio attribute's value consists of two parameters:

align:
- none - fit inside the viewport without maintaining the aspect ratio:
- combination of xMin/xMid/xMax and yMin/yMid/yMax:
meetOrSlice:
- meet (default) - the entire viewBox should be visible inside the viewport;
- slice - the viewBox fills the entire viewport:

Adaptive icons or logos

It's cool if we provide simplified versions of icons on smaller viewport sizes.

Image sprites

The technique is to group different small images into a single file (the user downloads only that file from the server). Then, relative to the viewport size, we display only the part we need with the help of CSS.

Let's look at our composite image:

The plan is to display the rightmost icon on small screens and the leftmost on large ones.

Defining media queries inside SVG

Since SVG can contain its own CSS rules, we can achieve the same result by applying different display properties to correponding SVG elements:

SVG essentials. Embedded image and filter effects

Julia Shlykova — Wed, 16 Apr 2025 03:00:00 +0000

What if we need a shadow for the shape in SVG? If we use CSS box-shadow on SVG elements, it won't have any effect.
As you may know, we have filter and backdrop-filter properties in CSS, and they are actually a subset of SVG filters! We can use SVG filters externally by using this property like this: filter: url(#filterId).

Embedded image
Basic structure of SVG filter
Filter primitives
- Filter primitive attributes
- feDisplacementMap
- feDropShadow
- feGaussianBlur
- feMorphology

Embedded image

If we embed an image inside SVG, we will be able to clip, mask and apply filter on it.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
 <image
  x="5"
  y="5"
  width="90"
  height="90"
  href="https://picsum.photos/id/33/400"
 />
</svg>

Basic structure of SVG filter

Let's look at how to apply a filter effect on some SVG shape (for example circle):

<svg xmlns="..." viewBox="...">
 <defs>
  <filter id="filterId">
   <!--Filter Primitives-->
  </filter>
 </defs>
 <circle filter="url(#filterId)" />
</svg>

The filter effect can consist of multiple filter primitives. All filter primitives names start with fe, which stands for "filter effect".

Filter primitives

We won't discuss every filter primitive, only stopping at the most needed ones. The full list can be found here.

Filter primitive attributes

All filter primitives can have the following attributes:

x, y (default 0, 0) are the minimum coordinates for the subregion of the filter primitive;
width, height define dimensions for the subregion of the filter primitive;
result="<filter-primitive-reference>" assigns a name for the filter primitive, which can be referenced by an in attribute on another filter primitive.

Most filter primitives can take other ones as input with the following attribute:

in="<filter-primitive-reference>". If no value is specified, in takes SourceGraphic (original image) as one.

feDisplacementMap

This effect allows us to change the texture of the image by taking it from another image or effect.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
 <defs>
  <filter id="morph">
   <feTurbulence baseFrequency="0.05" numOctaves="2" result="turbulence" />
   <feDisplacementMap in="SourceGraphic" in2="turbulence" scale="20" />
  </filter>
 </defs>
 <image width="180" href="https://picsum.photos/id/33/200" filter="url(#morph)" />
</svg>

Here, we used another filter effect feTurbulence to get the texture.

scale (default 0) defines the amount of displacement;
in="SourceGraphic" specifies what image needs to be changed;
in2 is used to displace the pixels in the image from the in attribute.

feDropShadow

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
 <defs>
  <filter id="shadow">
   <feDropShadow />
  </filter>
 </defs>
 <polygon 
  points="10,50 40,60 50,90 60,60 90,50 60,40 50,10 40,40" 
  fill="teal" 
  filter="url(#shadow)"
 />
</svg>

dx, dy (default is 2) set offset of the drop shadow;
stdDeviation (default is 2) sets blur of the drop shadow.

feGaussianBlur

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
 <defs>
  <filter id="blur">
   <feGaussianBlur stdDeviation="1" />
  </filter>
 </defs>
 <image
  href="https://picsum.photos/id/33/100"
  filter="url(#blur)"
 />
</svg>

stdDeviation (default 0) defines the amount of blur. It can be equal to two numbers for x and y axes.

We can achieve the same output by defining a filter in SVG and applying it in CSS:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="0" height="0">
 <defs>
  <filter id="blur">
   <feGaussianBlur stdDeviation="2" />
  </filter>
 </defs>
</svg>

 <img src="https://picsum.photos/id/33/100" />

/* style.css */
img {
 filter: url(#blur);
}

feMorphology

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400">
 <defs>
  <filter id="morph">
   <feMorphology operator="dilate" radius="10" />
  </filter>
 </defs>
 <image href="https://picsum.photos/id/33/400" filter="url(#morph)" />
</svg>

operator takes values:
- erode (default) makes the source graphic thinner;
- dilate makes it fatter.
radius (default 0) regulates the impact of the operator. It can be equal to two numbers for x and y axes.

feTurbulence

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
 <defs>
  <filter id="morph">
   <feTurbulence baseFrequency="0.05" numOctaves="2" />
  </filter>
 </defs>
 <image href="https://picsum.photos/id/33/200" filter="url(#morph)" />
</svg>

type:
- turbulence (default) performs turbulence function;
- fractalNoise performs noise function.
baseFrequency (default 0) specifies frequency for the noise function. It can take two values for x and y axes.
numOctaves (default 1) is the parameter for the noise function. The higher the value is, the more noise you get.

SVG essentials. Gradients and patterns

Julia Shlykova — Thu, 10 Apr 2025 07:35:23 +0000

Gradient in SVG

Each gradient must have id attribute for future reference.
Color transitions are defined by a series of color stops.

Linear gradient

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
 <defs>
  <linearGradient id="vivid">
   <stop offset="0" stop-color="black" />
   <stop offset="1" stop-color="orange" />
  </linearGradient>
 </defs>
 <rect x="10" y="10" width="80" height="80" fill="url(#vivid)" />
</svg>

stop element sets color at certain positions using:
- offset defines the position;
- stop-color defines color;
- stop-opacity defines opacity.

We can apply the gradient also to a stroke:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
 <defs>
  <linearGradient id="vivid">
   <stop offset="0" stop-color="green" />
   <stop offset="1" stop-color="yellow" />
  </linearGradient>
 </defs>
 <rect
  x="10"
  y="10"
  width="80"
  height="80"
  rx="10" fill="none"
  stroke="url(#vivid)"
  stroke-width="10"
 />
</svg>

Since we refer to gradient later, it should be defined inside defs element.

Gradient vector

The gradient vector sets boundaries for gradient stops.

x1, y1 (default 0) define starting point for a gradient vector;
x2, y2 (default 1) define the ending point for a gradient vector.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
 <defs>
  <linearGradient id="vivid" x2="0.2">
   <stop offset="0" stop-color="darkred" />
   <stop offset="1" stop-color="darksalmon" />
  </linearGradient>
 </defs>
 <rect x="10" y="10" width="80" height="80" fill="url(#vivid)" />
</svg>

Our gradient ends at 20% of the rectangle, the rest is filled with the last gradient stop color.

We can even change the direction of the gradient using this vector:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
 <defs>
  <linearGradient id="diag" x1="0" y1="0" x2="1" y2="1">
   <stop offset="0" stop-color="turquoise" />
   <stop offset="1" stop-color="black" />
  </linearGradient>
 </defs>
<rect width="90" height="90" x="5" y="5" fill="url(#diag)" />
</svg>

Important: x1, y1, x2, y2 are not presentation attributes and they are not overridden by CSS styles.

Radial gradient

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
 <defs>
  <radialGradient id="glare" cx="0.7" cy="0.2" r="0.7">
   <stop offset="0" stop-color="powderblue" />
   <stop offset="1" stop-color="steelblue" />
  </radialGradient>
 </defs>
 <ellipse  cx="50" cy="50" rx="50" ry="25" fill="url(#glare)" />
</svg>

cx, cy, r set the end circle for the radial gradient (default values are 0.5). The 100% gradient stop is at the perimeter of the end circle.
fx(default is cx), fy(default is cy), fr(default is 0) set the start circle. The 0% gradient stop is at the perimeter of the start circle. See an example below:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
 <defs>
  <radialGradient id="moon" fx="0.6" fr="0.4">
   <stop offset="0" stop-color="black" />
   <stop offset="1" stop-color="mintcream" />
  </radialGradient>
 </defs>
 <circle  cx="50" cy="50" r="50" fill="url(#moon)" />
</svg>

Here, we have black circle with the center at (60%, 50%) and radius 40%. After the ending of that circle, the gradient starts.

Gradient attributes

spreadMethod

If the gradient doesn't fill the whole shape, we can define how the rest of it is filled by spreadMethod that takes the following values:

pad (default) fills the remainder with the stop color.
reflect

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
 <defs>
  <linearGradient id="vivid" x2="0.1" spreadMethod="reflect">
   <stop offset="0" stop-color="darkslateblue" />
   <stop offset="1" stop-color="floralwhite" />
  </linearGradient>
 </defs>
 <rect x="10" y="10" width="80" height="80" fill="url(#vivid)" />
</svg>

repeat

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
 <defs>
  <radialGradient id="rose" r="0.1" spreadMethod="repeat">
   <stop offset="0" stop-color="maroon" />
   <stop offset="1" stop-color="salmon" />
  </radialGradient>
 </defs>
 <circle  cx="50" cy="50" r="50" fill="url(#rose)" />
</svg>

href

This attribute comes in handy when we want to use some template gradient:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 100">
 <defs>
  <linearGradient id="template" x2="0.5" spreadMethod="reflect">
   <stop offset="0" stop-color="teal" />
   <stop offset="1" stop-color="floralwhite" />
  </linearGradient>
  <linearGradient id="vivid1" href="#template">
  </linearGradient>
  <linearGradient id="vivid2" href="#template" y2="0.5">
  </linearGradient>
 </defs>
 <rect x="10" y="10" width="80" height="80" fill="url(#vivid1)" />
 <rect x="110" y="10" width="80" height="80" fill="url(#vivid2)" />
</svg>

Pattern in SVG

Patterns consist of pre-defined graphic objects that are replicated to fill areas.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <defs>
    <pattern
     id="grid"
     x="0" y="0" width="0.1" height="0.1"
     viewBox="0 0 10 10"
    >
     <rect width="7" height="7" fill="darkgreen" />
    </pattern> 
  </defs>
  <circle cx="10" cy="10" r="10" fill="url(#grid)" />
  <circle cx="60" cy="40" r="40" fill="url(#grid)" />   
</svg>

Each pattern tile takes occupies 10% of the object width and height. Since each tile contains one rectangle with width and height 7 "px" inside coordinate system of 10 x 10 "px" dimensions, the blank space occures.

x, y, width, height define how pattern tile is placed. They are not presentation attributes and can't be defined by CSS styles.
patternUnits takes the following values:
- objectBoundingBox (default) set units for x, y, width, height relative to the object, on which the pattern is applied.
- userSpaceOnUse sets "absolute" units for x, y, width, height:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <defs>
    <pattern
     id="grid"
     x="0" y="0" width="10" height="10"
     viewBox="0 0 10 10"
     patternUnits="userSpaceOnUse"
    >
     <rect width="7" height="7" fill="darkslateblue" />
    </pattern> 
  </defs>
  <circle cx="10" cy="10" r="10" fill="url(#grid)" />
  <circle cx="60" cy="40" r="40" fill="url(#grid)" />   
</svg>

href works the same way as for gradients; only keep in mind that the reference must be a different pattern.

SVG essentials. SVG auxiliary elements and style application

Julia Shlykova — Wed, 02 Apr 2025 03:00:00 +0000

We have seen basic shapes in previous articles and now it's time to move to more complicated ones.

"g" element
"defs" element
"use" element
"symbol" element
Presentation attributes
Inline styles
Internal style sheet
External style sheet

"g" element

The g element stands for "group" and contains graphics elements.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
 <g fill="none" stroke="darkgray" stroke-width="5">
  <circle r="25" cx="30" cy="30" />
  <rect x="40" y="40" width="55" height="55" />
 </g>
</svg>

We defined fill and stroke for g element, and these attributes were applied to the contained elements.

Sidenote
If you use Adobe Illustrator, each layer of the illustration is g element in SVG output.

"defs" element

The defs stands for "definitions" and defines graphical objects (elements and effects) that can be referenced later by their id values. If we have multiple identical shapes or effects, it makes sense to define them once in defs element and then refer to it.

The descendant elements are not rendered unless they are reference by use element.

The graphical objects must have ids so we can clone them using URL reference:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
 <defs>
  <circle fill="lightblue" cx="0" cy="0" r="10" id="smallCircle" />
 </defs>
 <use x="20" y="20" href="#smallCircle" />
 <use x="40" y="40" href="#smallCircle" />
 <use x="60" y="60" href="#smallCircle" />
 <use x="80" y="80" href="#smallCircle" />
</svg>

We can omit defs element and define graphical objects just inside SVG, however, it's good for code readability to place the reusable objects inside defs element.

"use" element

As the example shows, use element refers to circle, which was defined inside defs element, and makes a copy of it.

We can define x and y (coordinates of the position of the element). Attributes width and height can be applied only if the referenced element is either svg or symbol.

"symbol" element

With this element we can set different sizes of the displayed copies. Also, we can group elements by wrapping symbol around it. However, it doesn't display anything unless we refer to it using use element.
Since, we define symbol for later use, it should go inside defs:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
 <defs>
  <symbol id="smallGroup" viewBox="0 0 10 10">
    <polygon fill="seagreen" points="0,10 10,10 5,0" />
    <circle fill="plum" cx="9" cy="9" r="1" />
    <circle fill="sandybrown" cx="1" cy="7" r="1" />
    <circle fill="slateblue" cx="5" cy="8" r="1" />
  </symbol>
 </defs>
 <use width="50" height="50"  x="25" y="40" href="#smallGroup" />
 <use width="40" height="40"  x="30" y="20" href="#smallGroup" />
 <use width="30" height="30"  x="35" y="0" href="#smallGroup" />
</svg>

Here, symbol set its own nested coordinate system for the graphics it contains.

Presentation attributes

In the previous article, we encountered some presentation attributes like fill, stroke and stroke-width. However, there are many more:

fill;
stroke;
stroke-width;
stroke-dasharray
opacity specifies how opaque the whole graphical object is;
fill-opacity applies to the background of the object;
stroke-opacity applies to the border of the object;
paint-order controls the order of fill, stroke and markers. Possible values:
- normal: 1) fill 2) stroke 3) markers
- order of fill, stroke and markers:

if some values are omitted in the sequence, they are placed according to normal.

stroke-dasharray="dash gap..." makes a stroke dashed with specified dash lengths and gap lengths (pixels or percentage of the SVG viewport).

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
 <g fill="none" stroke-width="10">
  <circle
   stroke="orange"
   r="20"
   cx="25"
   cy="25"
   stroke-dasharray="1"
  />
  <circle
   stroke="green"
   r="20"
   cx="65"
   cy="65"
   stroke-dasharray="1 2 4 8"
 />
 </g>
</svg>

The orange circle has only one value 1 for stroke-dasharray. That means 1px for dash and gap. The green circle has four values: 1px for the first dash, 2px for the first gap, 4px for the second dash, 8px for the second gap and repeat until the path ends.

stroke-dashoffset moves dashed stroke at a specified value

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
 <path 
    fill="none"
    stroke="violet" 
    stroke-width="10" 
    d="M10,50 Q30,10 50,50 T90,50"
    stroke-dasharray="5"
    stroke-dashoffset="5"
 />
 <path 
    fill="none"
    stroke="black" 
    stroke-width="1" 
    d="M10,50 Q30,10 50,50 T90,50"
 />
</svg>

We have the stroke with equal sizes for dashes and gaps 5px. Since we moved the dashed stroke by 5px using dashoffset, it starts with a gap now.

stroke-linecap sets the shape of the ends of the open path and takes the following values:

butt

round

square

stroke-linejoin sets the shape for corners and takes the following values:

miter

round

bevel

Important: Presentation attributes are always overridden by styles applied with CSS rules!

Inline styles

We can also use the inline style attribute like in HTML elements:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
 <polyline
  style="
   fill: none; 
   stroke: lightsalmon; 
   stroke-width: 20; 
   stroke-dasharray: 1;
  "
  points="20,20 50,70 80,20"
 />
</svg>

Internal style sheet

The style element contains all styles used in the SVG element and its structure is the same as in HTML document. We can include style element inside defs element or at the top of the svg:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
 <style>
  ellipse, rect {
   fill: lightseagreen;
  }
  rect {
   stroke: teal;
  }
  .ribbon {
   fill: teal;
  }
 </style>
 <ellipse
  cx="50"
  cy="50"
  rx="45"
  ry="20"
 />
 <rect 
  class="ribbon"
  width="50"
  height="36"
  x="25"
  y="20"
  rx="25"
  ry="10"
 />
 <rect 
  width="50"
  height="30"
  x="25"
  y="20"
  rx="25"
  ry="10"
 />
</svg>

External style sheet

For inline SVGs, the style sheet linked to the HTML document applies styles for SVG elements:

index.html

<head>
 ...
 <link href="style.css" rel="stylesheet" type="text/css"></head>
<body>
 <svg>
  ... 
 </svg>
</body>

@import rule

We can also create an external CSS file and import it inside SVG:

<svg>
 <style type="text/css">
  @import "style.css";
 </style>
</svg>

However, such method won't work for SVGs embedded with the img element.

SVG essentials. Basic shapes and path

Julia Shlykova — Tue, 11 Mar 2025 17:00:00 +0000

In the previous article, we have seen the flower consisted of a circle at center and paths for petals. However, there are more shapes that can be drawn with SVG.

Presentational attributes
Circle
Ellipse
Rectangle
Line
Polyline
Polygon
Path
- Cubic Bézier curve
- Quadratic Bézier curve
- Elliptical arc curve
- Relative values

Presentational attributes

Before diving into shapes let's talk a bit about the style defined in the SVG element:

fill - background of the shape;
stroke - color of the shape border;
stroke-width - size of the shape border.

These presentation attributes are always overridden by styles applied with CSS rules;

Circle

Let's draw one more circle:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
 <circle cx="50" cy="50" r="50" fill="green" />
</svg>

cx and cy set the center of a circle;
r stands for radius.

Since the boundary of the SVG is 100x100 and the circle radius is 50, the circle will be at the center of SVG and its border at the SVG border.

Ellipse

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
 <ellipse cx="50" cy="50" rx="50" ry="25" fill="orange" />
</svg>

cx and cy define the center of an ellipse;
rx sets the x-axis radius;
ry sets the y-axis radius;

Rectangle

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
 <rect width="100" height="100" x="0" y="0" rx="50" ry="25" fill="lightblue" />
</svg>

x and y set left top corner of the rectangle;
width and height define the width and height of the rectangle;
rx and ry make the rectangle rounded: if only either rx or ry is set, the other one takes the same value.

Line

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
 <line x1="25" y1="25" x2="75" y2="75" stroke="black" stroke-width="10" />
</svg>

x1 and y1 are coordinates for the start of the line;
x2 and y2 are coordinates for the end of the line.

Polyline

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
 <polyline
 fill="pink"
 stroke="black"
 stroke-width="10"
 points="10,10 50,80 90,10"
 />
</svg>

points are a sequence of coordinates that connect straight line segments.

This element defines open shapes.

Polygon

In contrast to polyline, polygon always closes a shape.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <polygon
   fill="lime"
   stroke="black"
   stroke-width="10"
   points="10,10 50,80 90,10"
 />
</svg>

points are sequence of coordinates that connect straight line segments.

We can see the same set of points as in polyline, but polygon automatically closes the path.

Path

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <path
   fill="yellow"
   stroke="black"
   stroke-width="10"
   d="M10,10 V90 L50,50 L90,90 V10 Z"
 />
</svg>

Mx,y stands for "Move To" and defines the starting point of the drawing with coordinates x y;
Lx,y stands for "Line To" and draws a line to the point with x y coordinates;
Hx draws a horizontal line;
Vy draws a vertical line;
Z closes a path.

We can certainly draw the same shape using either polyline or polygon. So, what's the difference between path and those shapes? Path also allows us to draw curves!

Cubic Bézier curve

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <path 
    fill="rosybrown" 
    stroke="black" 
    stroke-width="10" 
    d="M10,10 V90 C10,50 90,50 90,90 V10 Z" />
</svg>

Cx1,y1 x2,y2 x,y stands for "Curve To" and draws a curve from the current point to the ending point (x,y), using (x1,y1) and (x2,y2) as control points.

Empty circles indicate starting and ending points, while filled ones indicate control points.

Smooth continuation

We can create smooth shapes by relying on the current point:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <path 
    fill="teal" 
    stroke="black" 
    stroke-width="10" 
    d="M10,50 C10,20 50,20 50,50 S90,80 90,50" />
</svg>

Sx2,y2 x,y stands for "Smooth Curve To" and draws the curve by setting the reflection of the second control point on the previous command (either C or S) relative to the current point as (x1,y1) control point. It's better to see the example:

The control point (50,80) (blue circle) was created under the hood, we haven't written it explicitely, it's the reflection of (50,20) point on the point (50,50) and represents the first control point for the second curve.

Quadratic Bézier curve

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <path 
    fill="coral" 
    stroke="black" 
    stroke-width="10" 
    d="M10,10 V80 Q50,40 90,80 V10 Z"
 />
</svg>

Qx1,y1 x,y stands for "Quadratic Curve To" and draws a quadratic curve from the current point to the ending point (x,y), using (x1,y1) as a control point.

Smooth continuation

Just like a cubic curve has a special command for smooth continuation, a quadratic curve has T command:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <path 
    fill="cornflowerblue" 
    stroke="black" 
    stroke-width="10" 
    d="M10,50 Q30,10 50,50 T90,50"
 />
</svg>

Tx,y draws a quadratic curve from the current point to the ending point (x,y), and the control point is the reflection of the control point on the previous command relative to the current point. Let's look at the example:

The blue point was automatically calculated based on the previous control point and the current point.

Elliptical arc curve

Arc is a section of an ellipse.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 200">
  <path 
    fill="khaki" 
    stroke="black" 
    stroke-width="10" 
    d="M10,10 
       V80 
       A40,20 0 0,1 90,80 
       V10 
       Z"
 />
 <ellipse 
    fill="none"
    stroke="gray"
    stroke-width="5"
    rx="40"
    ry="20"
    cx="50"
    cy="80"
 />
</svg>

Arx,ry x-axis-rotation large-arc-flag,sweep-flag x,y draws an arc from the current point to (x,y) point.
- rx,ry are radii of an ellipse;
- x-axis-rotation is an angle (id degrees) for ellipse rotation;
- large-arc-flag and sweep-flag take values either '1' or '0' and decide what part of an ellipse to take. You can see in more detail here.

Here, we see the arc is a part of the ellipse with x-radius "40" and y-radius "20" without any rotation (x-axis-rotation=0).

Relative values

The path has an important feature: we can use lowercase to set relative values:

d="M10,10 v80 l40,-40 l40,40 v-80 Z"

It's the same shape we've built using d="M10,10 V90 L50,50 L90,90 V10 Z" path.

SVG essentials. Introduction

Julia Shlykova — Wed, 05 Mar 2025 03:00:00 +0000

SVG is an XML-based markup language that stands for Scalable Vector Graphics. As the name suggests, images in SVG format are defined by mathematical formulas, not by grids and pixels (in contrast to raster graphics). It makes SVG format ideal for icons, logos and line drawings:

they can resize without loss of quality,
the file size is much smaller than for raster graphics.

Furthermore, we can target elements in an SVG to change their presentation with CSS - fit color to our primary one, add some animation and more! If you need vector images on web, isn't it the best image format?

SVG in HTML document
SVG as XML language
SVG image structure

SVG in HTML document

There are several ways to display an SVG image on a webpage:

directly embedded (inlining SVG):

<html>
  <head>
  </head>
  <body>
    <svg>
    </svg>
  </body>
</html>

We can manipulate this SVG image with JavaScript and CSS. However, the browser can't cache inline SVG.

using img element:

<img src="flower.svg" alt="flower" />

We can't control the SVG image with JavaScript, it won't load any external files like embedded images, style sheets. CSS works only inside SVG code. The browser caches the image. It's the best if you only need a static image.

using object element:

<object data="flower.svg" type="image/svg+xml"></object>

It loads scripts and external files. It allows to provide a fallback image for non-supporting browsers.

using iframe element:

<iframe src="flower.svg"></iframe>

Since we can open SVG image in the browser as it is, we can embed SVG file in iframe. However, every iframe requires more memory and other computing resources.

SVG as XML language

There are main rules for SVG code since it's XML language (that may differ from HTML):

case-sensitivity,
closing tags,
attribute values are in quotation marks (single or double).

SVG image structure

For instance, you got the SVG image created in graphic design software:

Let's analyze the code line by line.

<?xml version="1.0" encoding="UTF-8"?>

The first line identifies file as XML. It's not necessary for SVGs, used in web, unless encoding is other than UTF-8.

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

It's SVG root element. All drawing happens inside this element.

xlmns attribute declares XML namespace: the link to svg tells the browser that this document uses vocabulary defined in SVG.

viewBox defines a drawing region in abstract units characterized by:

an origin min-x min-y. In our example, it's 0 0,

a size (width, height). Here, it's 100 100.

All shapes and lines are drawn in respect to this drawing region.

width and height can be set inside svg tag: width="100" height="100" that means image has 100px as width and height.

<defs>
...
</defs>

defs element defines style or elements, that will be referenced later. In this example, defs contains style element that is familiar from html structure. However, it can also define shapes, gradients, symbols.

<defs>
<style>
    .d {
        fill: #d2693a;
    }

    .d,
    .e {
        stroke: #000;
    }

    .e {
        fill: #8fcc93;
    }
</style>
</defs>

It must look similar for CSS users, there are classes with properties: fill is like background-color for SVG element, stroke is border-color.

<g>
...
</g>

This tag groups different objects. In Adobe Illustrator each layer transforms into <g> element on export as SVG.

<g>
<path class="d" d="M44.11,53.83s23,33.9,0,33.9,0-33.9,0-33.9Z" />
...
<circle class="e" cx="44.11" cy="44.11" r="14.5" />
</g>

Finally, some actual drawing: path is used for more complicated objects, while circle, rect, line, ellipse, polygon are basic shapes. Since SVG is XML language, it's required to close all tags and we see that there's / before closing bracket in circle and path.

Container queries in css

Julia Shlykova — Wed, 22 Jan 2025 03:00:00 +0000

Container queries are fully supported by the main browsers. They work similarly to media queries, with only a difference in what they are based on. Media queries depend on viewport size, while container ones depend on element size.

Practical use of container queries
Basic syntax
Naming
Container query length units
Important notes

Practical use of container queries

Since container queries work similarly to media queries, in what cases would we prioritize container queries over media ones?

For example, when we have elements with the same style in different wrappers, where structure depends on the wrapper's size:

When item class element (in main and aside component) has enough width it splits into two columns.

Basic syntax

Let's learn with an example:

<div class="container">
 <div class="child">
  <h1>Title</h1>
  <p>lorem</p>
 </div>
</div>

First, we need to set container-type property for our container, on the sizes of which we will use a query.

Values of container-type:

size - both dimensions;
inline-size - inline dimension;
normal - not for dimension changes but for container style queries (we can refer to container sizes inside the query).

For our example:

.container {
 container-type: inline-size;
}

Next, we should use the css at-rule @container to define the query. It's set similar to media queries:

@container (width <= 400px) {
 .child {
  padding: 20px;
 }
}

When the container width becomes no more than 400px, the child element's padding becomes 20px.

Naming

We can use container queries for several containers, and to distinguish them we can give names to the containers:

.container {
 container-type: inline-size;
 container-name: main;
}

@container main (width <= 400px) {
 .child {
  padding: 20px;
 }
}

There is a shorthand property:

.container {
 container: main / inline-size;
}

Container query length units

We can use special length units inside the container query:

cqw = 1% of the container's width;
cqh = 1% of the container's height;
cqi = 1% of the container's inline size;
cqb = 1% of the container's block size;
cqmin = min(cqi, cqb);
cqmax = max(cqi, cqb).

Important notes

We can change css attributes only for elements inside the container;
we can apply the same container-name to multiple containers;
container-type: size under the hood applies, besides layout and style, contain: size, which means that the container's size is computed as if it had no children. So, if you don't explicitly set the container sizes, the container will have zero height. See;
container queries may break subgrid.

Subgrid

Julia Shlykova — Fri, 29 Nov 2024 09:41:43 +0000

Introduction
How to use subgrid
Important notes

Introduction

When children of a grid container become grid containers themselves, they don't take track sizing from their parent.

Let's say we want our cards to have two columns with this CSS rule:

grid-template-columns: minmax(5ch, 20ch) 1fr;

Without subgrid

With subgrid

We can see that without subgrid, each card defines its' columns independently, while with subgrid, the parent defines the child's columns.

How to use `subgrid`

Here is the simple example of using subgrid:

Let's start with defining html structure:

<div class="grid">
    <div class="subgrid">
        <div class="grandchild"></div>
    </div>
</div>

We have to set display: grid for the main container and its' child:

.grid {
    display: grid;
}

.subgrid {
    display: grid;
}

And now it's time to define track sizing:

.grid {
    grid-template-columns: repeat(8, 1fr);
}

.subgrid {
    grid-column: 2 / -1;
    grid-template-columns: subgrid;
}

Here, track sizing of the child is inherited from the parent by setting its' own grid-template-columns to subgrid.

So, how to position the grandchild so it will occupy the cell in the third column of the grandparent?

.grandchild {
    grid-column: 2 / 3;
}

Since the child has its' own count, the second column of the child will be the third one of the parent.

Important notes

Gap

The gap property is inherited from parent grid. However, we can simply overwrite it.

DEV Community: Julia Shlykova

SVG animation. Introduction

SVG/SMIL

CSS

JavaScript

Cheat Sheet for Git

rebase vs merge

squash merge

Interactive rebase

Cleanup

Conflicts with rebase

Important notes of rebase

JavaScript Proxy objects

Basic structure

Handler

Trap "get"

Trap "set"

Trap "deleteProperty"

Private properties

Introduction to TypeScript. Setup

Differences between JavaScript and TypeScript

Plain TypeScript setup

TypeScript setup with Vite bundler

TypeScript compiler

TypeScript configuration file (tsconfig.json)

CompilerOptions

SVG dimension attributes and adaptive icons

Table of contents

SVG viewport, viewbox and preserveAspectRatio

preserveAspectRatio

Adaptive icons or logos

Image sprites

Defining media queries inside SVG

SVG essentials. Embedded image and filter effects

Table of contents

Embedded image

Basic structure of SVG filter

Filter primitives

Filter primitive attributes

feDisplacementMap

feDropShadow

feGaussianBlur

feMorphology

feTurbulence

SVG essentials. Gradients and patterns

Gradient in SVG

Linear gradient

Gradient vector

Radial gradient

Gradient attributes

spreadMethod

href

Pattern in SVG

SVG essentials. SVG auxiliary elements and style application

Table of contents

"g" element

"defs" element

"use" element

"symbol" element

Presentation attributes

Inline styles

Internal style sheet

External style sheet

@import rule

SVG essentials. Basic shapes and path

Table of contents

Presentational attributes

Circle

Ellipse

Rectangle

Line

Polyline

Polygon

Path

Cubic Bézier curve

Smooth continuation

Quadratic Bézier curve

Smooth continuation

Elliptical arc curve

Relative values

How to use `subgrid`