SVG URL Kodlayıcı

SVG nedir?

SVG, Scalable Vector Graphics (Ölçeklenebilir Vektör Grafikleri) anlamına gelir. Web için vektör tabanlı grafikleri XML formatında tanımlamak amacıyla kullanılır. SVG dosyalarındaki her öğe ve öznitelik animasyona tabi tutulabilir.

• Vikipedi - SVG

CSS'de SVG nasıl kullanılır?

SVG kodunu doğrudan CSS'de kullanmak için önce kodlamanız gerekir. Bunun için bu SVG URL Encoder aracını veya JavaScript'in encodeURIComponent() işlevini kullanabilirsiniz. Kodlanmış bir SVG veri URI'si, url() işlevi aracılığıyla background-image, border-image ve mask CSS özellikleriyle kullanılabilir. Örnek: background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle r='50' cx='50' cy='50' fill='red'/%3E%3C/svg%3E");

CSS'de SVG rengi nasıl değiştirilir?

Herhangi bir SVG'nin rengini değiştirmek için mask ve background-color CSS özelliklerini birleştirebilirsiniz. Aşağıdaki örnek, bir SVG'nin rengini maviye çevirecektir. Örnek: mask: url(“data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle r='50' cx='50' cy='50' fill='currentColor'/%3E%3C/svg%3E”); background-color: blue;

URL nedir?

URL (Uniform Resource Locator), internetteki benzersiz bir kaynağın adresidir. Tarayıcıların HTML sayfaları, CSS belgeleri, görseller vb. gibi kaynakları almak için kullandığı temel mekanizmalardan biridir.

• MDN - What is a URL?

Bir URL nasıl kodlanır?

Bir URL kodlamak için encodeURIComponent() işlevini kullanabilirsiniz. Bu işlev, belirli karakterlerin her geçtiği yeri, karakterin UTF-8 kodlamasını temsil eden bir, iki, üç veya dört kaçış dizisiyle değiştirerek URI'yi kodlar. encodeURI() ile karşılaştırıldığında, bu işlev URI sözdiziminin parçası olan karakterler de dahil olmak üzere daha fazla karakteri kodlar.

• MDN - encodeURIComponent()

Bir URL nasıl çözülür?

Bir URL'yi çözmek için decodeURIComponent() işlevini kullanabilirsiniz; bu işlev, %XX biçimindeki her kaçış dizisini bir UTF-8 kod birimi (bir bayt) olarak değerlendirerek URI'yi çözer. UTF-8'de, ilk bayttaki baştaki 1 bit sayısı (1 baytlık ASCII karakterler için 0, 2, 3 veya 4 olabilir) karakterdeki bayt sayısını gösterir.

• MDN - decodeURIComponent()