Web sitesindeki bir SVG'yi bilgisayarıma nasıl kaydedebilirim?


16

Bu web sitesinden bir logo ile çalışmam gerekiyor (sol üst köşede):

resim açıklamasını buraya girin

İşte sayfadan kopyaladığım kod parçası:

<svg viewBox="0 0 215 50" height="50" width="215" xmlns="http://www.w3.org/2000/svg"><path d="M128.783 40.08v7.74h2.078v-5.66h18.843v5.66h2.08v-7.74h-3.322V5.82h-14.017c0 14.588-.467 23.26-2.596 34.263h-3.064zm-43.58 2.08h4.154V5.82h-4.153v3.116l-9.138 24.352V5.818h-4.153V42.16h4.153v-3.114l9.138-24.35v27.465zm-22.842 0h4.36l-6.904-21.08 4.83-15.262h-2.13l-4.88 15.263H52.08V5.82h-4.155V42.16h4.156v-19h4.048l6.233 19zm71.562-2.08c1.764-10.433 2.492-18.842 2.598-32.186h7.783V40.08h-10.38zm74.6 2.08h4.31L204.894 5.82h-4.31l.88 4.206-6.852 32.137h2.13l2.59-12.097h6.548l2.643 12.098zm-169.574 0h4.31L35....8zm147.355 0h4.158V5.82h-13.968v2.076c-.05 8.05-.414 18.12-1.143 23.204-.466 3.066-1.61 5.508-3.532 5.508v5.555c3.588 0 4.623-4.83 5.246-9.24.936-6.752 1.4-16.976 1.506-25.025h7.732V42.16zM159.88 7.896h9.347V5.818H155.73V42.16h13.497v-2.08h-9.348V20.564h7.265v-2.076h-7.266V7.895zm-59.1 0h9.34V5.818H96.626V42.16h13.496v-2.08h-9.34V20.564h7.266v-2.076h-7.265V7.895zm-96.2 0h8.306v34.267h4.152V7.895h8.306V5.818H4.58v2.077zm28.396 6.023l2.858 14.067h-5.66l2.802-14.067zm169.58 0l2.853 14.067h-5.66l2.807-14.067z"></svg>

Ben bu konuda çok yetenekli değilim, ama daha sonra ".svg" olarak kaydederek bir metin dosyasına yapıştırma denedim, ama hepsi boşuna.
(Belki etiketlerle ilgili bir sorun var)

PS: Her şey telif hakkı ile uygun! Şu anda bir vektör istemek için bu sitedeki diğer tasarımcıyla iletişim kuramıyorum.


2
Logoyu kullanma / uyarlama izniniz var mı? Eğer sadece web 'çalmak' logoları dolaşırsanız ciddi sorun yaşayabilirsiniz. Ve sizden değiştirmenizi istediler, neden sadece kaynak dosyaları istemiyorsunuz?
PieBie

Şimdi bu medyayla çalışıyorum, bir vektör istemek için tasarımcılarından birine ulaşamıyorum!
Aksana Zinchanka

Doğru yapıyormuşsunuz gibi geliyor, sadece kodu .svg olarak kaydedebilmeniz ve sonra svg'yi destekleyen bir vektör düzenleyicide açabilmeniz gerekir. Bu ne şekilde çalışmıyor? Hangi grafik programlarını denediniz? Ve hangi metin editörü (Mac textedit, işleri şaşırtıcı bir şekilde mahvetmeyi sever)
user56reinstatemonica8

1
Kullanıcının söylediği gibi, bir metin düzenleyicisine yapıştırın ve .svgkaydettiğinizde adın sonuna ekleyin . İşletim sistemi ayarlarınıza bağlı olarak, yine de yanlış uzantı ekleyebilir logo.svg.txt. Bunu yaparsa, doğrudan yeniden adlandırın (yeniden kaydetmeden) ve yanlış uzantıyı (.txt) kaldırın. Esasen, tam dosya adı ile bitiyorsa doğru şekilde açılmalıdır .svg.
Dom

Yanıtlar:


20

Bu kodu javascript konsolunuzda çalıştırabilirsiniz:

var e = document.createElement('script');
e.setAttribute('src', 'https://nytimes.github.io/svg-crowbar/svg-crowbar.js'); 
e.setAttribute('class', 'svg-crowbar');
document.body.appendChild(e);

veya bu yer işaretini kullanın . Benim için mükemmel çalıştı:

resim açıklamasını buraya girin


1
Evet, bu işe yarıyor, ancak bu çalışmanın sayfalarındaki üçüncü taraf komut dosyası olduğunu açıklayan bir yorum ekleyebilir misiniz? Bir nytimeskez senaryo muhtemelen iyi, ama öğretmek tehlikeli bir alışkanlık.
Tom

Bu benim için Safari'de Chrome'dan daha iyi çalıştı
MicroMachine

3

Gönderdiğiniz snippet geçerli bir XML değil. Bir XML bildirimi ve <path>etiketin kapatılması gerekir.

<?xml version="1.0" encoding="UTF-8"?>
<svg viewBox="0 0 215 50" height="50" width="215" xmlns="http://www.w3.org/2000/svg">
    <path
    d="M128.783 40.08v7.74h2.078v-5.66h18.843v5.66h2.08v-7.74h-3.322V5.82h-14.017c0 14.588-.467 23.26-2.596 34.263h-3.064zm-43.58 2.08h4.154V5.82h-4.153v3.116l-9.138 24.352V5.818h-4.153V42.16h4.153v-3.114l9.138-24.35v27.465zm-22.842 0h4.36l-6.904-21.08 4.83-15.262h-2.13l-4.88 15.263H52.08V5.82h-4.155V42.16h4.156v-19h4.048l6.233 19zm71.562-2.08c1.764-10.433 2.492-18.842 2.598-32.186h7.783V40.08h-10.38zm74.6 2.08h4.31L204.894 5.82h-4.31l.88 4.206-6.852 32.137h2.13l2.59-12.097h6.548l2.643 12.098zm-169.574 0h4.31L35....8zm147.355 0h4.158V5.82h-13.968v2.076c-.05 8.05-.414 18.12-1.143 23.204-.466 3.066-1.61 5.508-3.532 5.508v5.555c3.588 0 4.623-4.83 5.246-9.24.936-6.752 1.4-16.976 1.506-25.025h7.732V42.16zM159.88 7.896h9.347V5.818H155.73V42.16h13.497v-2.08h-9.348V20.564h7.265v-2.076h-7.266V7.895zm-59.1 0h9.34V5.818H96.626V42.16h13.496v-2.08h-9.34V20.564h7.266v-2.076h-7.265V7.895zm-96.2 0h8.306v34.267h4.152V7.895h8.306V5.818H4.58v2.077zm28.396 6.023l2.858 14.067h-5.66l2.802-14.067zm169.58 0l2.853 14.067h-5.66l2.807-14.067z"
    />
</svg>

Bu şeyleri düzelttikten sonra bile, Inkscape'te açarsam, yine de web sitesindeki logoya benzemiyor. Bunun yerine SVG'yi çıkarmak için böyle bir şey denemek daha iyi .


Firefox ile ya Nesne İnceleyicisi (a ekler </path>) ya da doğrudan Sayfa Kaynağı ( kopyalanmıyor) ile kopyalanması , bana Illustrator ile açılabilen bir SVG verir ve tam olarak sitedeki logoya benzer.
17.05.2015

3

MacOS'ta Safari kullanıyorsanız, bunun için yerleşik işlevler vardır. SVG resmine sağ tıklayın, "Sayfayı farklı kaydet ..." düğmesine basın ve ardından açılan menüden "Biçim: Sayfa Kaynağı" nı seçin.

resim açıklamasını buraya girin

resim açıklamasını buraya girin


Logoya kod yoluyla erişilemiyorsa (örneğin bir sınıfa gömülü) bu işe yaramaz - sadece sağ tıklandığında kullanıcının görüntüyü yüklemesine veya masaüstüne sürükleyip bırakmasına veya geliştiriciye bakmasına izin verebilir menüsünün sayfa kaynakları
MicroMachine

-3

URL'yi kopyalayın ve Inkscape'de açın. Çantada keklik!


Merhaba Alexandra, GDSE'ye hoş geldiniz ve cevabınız için teşekkürler. Bize biraz daha bilgi verebilir misiniz? Inkscape'de bir bağlantı nasıl açılır? Hangi menü seçenekleri seçilir? Asker'in yazılımda bir başlangıç ​​olduğunu ve çoğunlukla iyi olduğunuzu varsayalım. Teşekkürler! Herhangi bir sorunuz varsa , itibarınız yeterli olduğunda lütfen yardım merkezine bakın veya Grafik Tasarım Sohbeti'nde bize ping atın (20). Katkıda bulunmaya devam edin ve sitenin tadını çıkarın!
Vincent

-4

Elbette. İsterseniz karmaşık hale getirin - ama değil. .Svg dosyasını yeni bir tarayıcı penceresinde açın. Illustrator'da veya diğer vektör uygulamalarında yazdır -> pdf olarak kaydet -> aç'ı seçin. :)


5
Zaten SVG'niz var - PDF'ye bir adım ekleyerek neden karmaşık hale getiresiniz?
Michael Schumacher
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.