SVG Dosyası Hakkında (Oluşturmak, Düzenlemek, Kaydetmek)

[emrehandilekci]

SVG Dosyası oluşturma ve kaydetme konusunda bi sorun yaşamaktayım. Ve sizlerin yardımına ihtiyacım var. Öncelikle oluşturmak istediğim dosyayı sizlere fikir vermek üzere belirteyim.

https://codepen.io/kenchen/pen/tgBiE

Burada X yazan yere kendi istediğim bir şeyi yerleştirmek ve arka plan rengini değiştirip (Ön Yükleme) preloader dosyasını SVG olarak kaydetmek istiyorum. Ama her girdiğim dosyada HTML CSS ve JSS ayrı ayrı veriliyor. Bunları nasıl birleştirip tek bir dosya yapabilirim?

HTML kodu ile oluştursam bile arkaplanı bu örnekteki gibi yapamıyorum. Yardımcı olabilir misiniz?

Sevgili @orhan hocam sizin bir bilginiz varsa kısaca yardımcı olabilir misiniz?

 

[orhan]

emrehan bey Börü_v1 [SMF 2.0 - Responsive Theme] bu tarz mi bir loder istiyorsunuz? Nerede nasil kullanılacaksa yazarsanız ona göre bakalım.

 

[emrehandilekci]

Evet Orhan bey. En son Börü temasını almıştım. Orada 5 mor çubuk dönüyordu. Yukarıdaki gibi bir yükleme ekranı olsun istiyorum. Kodlardan istediğim renkleri belirleyebilirim. Edit yapabilirim. Ama istediğim bu yukarıdaki gösterdiğim gibi arkaplanı olabilen yükleme ekranı olması. Ben logoyu ortasına yerleştirip etrafına dönen bir çember koymayı düşünüyorum. Az buçuk tahmin edebilmişsinizdir. Bir tane daha var bi düşüncem size fikir versin diye ekleyeceğim ama bulamadım. Bulursam onuda ekleyeceğim. Bundan harici ufak bir konuda daha yardımınıza ihtiyacım var onuda bu konudan sonra size ileteyim buradan. Veya yeni bir konu açarım.

https://loading.io/background/m-trianglify/

Buldum Orhan bey bahsettiğim bu arkaplandı. Yani bunun üstüne logomu ve etrafına dönen bir çemberi düşünebilirsiniz. Mesela X etrafında dönen çember.

 

[orhan]

Aslinda basit js vs kulanmaya gerek yok iki satir kod

#global-loader {
    position: fixed;
    z-index: 50000;
    background: url(../images/loader.svg) no-repeat 50% 50% #e0dde6;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: 0 auto;
}

arti Adobe Illustrator ile svg dosyanizi oluşturun

 

[emrehandilekci]

Aslinda basit js vs kulanmaya gerek yok iki satir kod

#global-loader {
    position: fixed;
    z-index: 50000;
    background: url(../images/loader.svg) no-repeat 50% 50% #e0dde6;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: 0 auto;
}

arti Adobe Illustrator ile svg dosyanizi oluşturun

Biraz daha açık anlatabilir misiniz Orhan bey. Arkaplan dosyam anladığım kadarıyla loader.svg. Bu arkaplan dosyasının üstüne logomu png resmi olarakta ekleyebilirim. Bu kod dönen çemberi oluşturur mu? Ve kodu ne yapmalıyım Orhan bey. Ben kodu nereye yazmalı yerleştirmeliyim anlayamadım.

Normalde forumda loader.svg dosyası yüklüyken otomatik yükleme ekranı gelmektedir. Ancak biraz karmaşık geldiği için o çemberi döndürecek kodu nereye nasıl yerleştireceğim anlayamadım.

 

[orhan]

Merhaba size örnek bir dosya hazirladim bir tex editoruyle acip kaynagina bakin anlarsiniz.

 

[emrehandilekci]

Merhaba size örnek bir dosya hazirladim bir tex editoruyle acip kaynagina bakin anlarsiniz.

Orhan hocam yoğunluktan bakamadım. Kaldığım yerden devam ediyorum. Ellerinize sağlık, yardımınız için çok teşekkür ediyorum. Bakıyorum hemen.