ViewBox = "- 155.7 -99 510 510" olan bir SVG dosyam var. Bunun Mac OS X önizlemesindeki yolları -155.7 -99 ile dengelediğine inanıyorum. SVG'yi Illustrator'da açtığımda, yollar hiç denenmiyor. Bu svg’yi şu şekilde nasıl dışa aktarabilirim:
Çalışma yüzeyinin konumunu değiştirmeyi denedim, ancak görünüm kutusunun kökeni asla 0,0 değil.
Yanıtlar:
SVG'ler hakkında küçük bir araştırma yaptım ve görünüşe göre görünüm kutusu Illustrator ile ihraç edilebilecek bir unsur değil. Görünüm kutusu öğesi yalnızca bu öğeyi kullanmayı veya değiştirmeyi seçen belirli programlarla uyumludur. Ne yazık ki, Illustrator bunlardan biri değil.
SVG'yi "Illustrator Düzenleme Özelliklerini Koru" olmadan Illustrator'dan kaydettiyseniz işlemi tersine çevirebilirsiniz. SVG dosyasının verilerinde yaptığınız değişiklikler ne olursa olsun Illustrator uygulamasına yansıtılır ancak sözde görünüm kutusu oluşturmak için hem Çalışma Yüzeyini hem de Katmanları yeniden konumlandırıp yeniden boyutlandırarak gerçekleştirilir.
Şimdilik tek yapabileceğiniz şey Illustrator'da tasarım çalışması ve dosya kutusundaki görüntüleme kutusunun kayması ve konumlandırılması için tüm ekstra kodlar. Artboards Width + Height / X + Y pozisyonunu değiştirerek ve ardından Obje Boyut ve Konum niteliklerini değiştirerek sözde görünüm kutusu oluşturabilirsiniz. Ancak, düzenlenebilir görünüm kutusu özelliklerine sahip bir Illustrator güncellemesi yayınlamadıkça asla gerçek bir görünüm kutusu niteliği olmaz.
Illustrator'da SVG Formatında bazı okumalar: Adobe Illustrator SVG Formatında Kaydet
Birkaç kez bu soruna rastladım ve Illustrator'dan dışa aktarırken SVG görünüm kutusunu tam olarak 0, 0 değerine güvenilir bir şekilde sıfırlamak için benim için çalışan tek şey, yeni bir boş belge oluşturmak ve resmi kopyalayıp yapıştırmak. .
Bu el değmemiş varsayılan çalışma yüzeyinin sol üst köşesi, görünüm kutusunun 0, 0 noktası olarak dışa aktarır. Resminizin tam olarak 0, 0'da başlamasını istiyorsanız akıllı kılavuzları ( cmd-u) veya alignayarlanan pencereyi kullanın Align to Artboard.
Çalışma yüzeyini sağ alt köşeden güvenle yeniden boyutlandırabilirsiniz, ancak sol üst köşeyi hareket ettirirseniz işler ters gitmeye başlar. Çalışma yüzeyinin sol üst köşesini taşımak veya SVG dosyalarını AI'ye içe aktarmak, cetveller, çalışma yüzeyleri ve yalnızca Illustrator tarafından bilinen bir tür görünmez gizli görünüm kutusu başlangıç noktası arasında bir tür tuhaf bir iç bağlantı kesilmesine neden görünüyor.
AFAICT, web ya da yeni gelişen teknolojiyle ilgili çoğu şeyde olduğu gibi, Adobe’nin SVG’ye yaklaşımı, birlikte bir şeyi bürünmüş bir şekilde bir araya getirmek, böylece bir basın bülteninde övünmek, daha sonra buggy, bitmemiş ve sevgisiz bırakmak gibi görünüyordu. 1998 gibi varlığını sürdürüyor.
viewboxSVG'ye dışa aktarmada değiştirilen değerlere çevrilecektir . Yeni bir belge oluşturma ve tüm resimlerin üzerine kopyalama konusunda tamamen haklısınız. Cevabınız doğru +1 olarak işaretlenmelidir.
Preserve Illustrator Editing Capabilitiesdaha fazla ayarlamalar yapmak zorunda kalmam durumunda, ilk kaydettiğim zamanları da kontrol ettiğimden emin olduktan sonra, her şeyin çok iyi olduğunu düşündüğümden sonra, onsuz sakladım (dosya boyutundaki artış oldukça önemli, böylece yapmak isteyeceksiniz.) this)
Bunun konuya çok geç kaldığını biliyorum ama aynı sorunu yaşadım ve aşağıdakileri yaptım.
Umarım bu başka birine yardımcı olur.
width="<W>" height="<H>"Favori metin editörünüzde SVG etiketine eklemeyi de buldum ( ondalık sayılar nerede <W>ve <H>olur).
AI'mın yarattığı SVG'nin merkezlenmemiş ve tam tarayıcı penceresine genişletilmemesine benzer bir sorun yaşadım çünkü AI çalışma yüzeyinin boyutunu değiştirmeye devam ediyor ve merkezlemeyi unutuyor.
Bunu düzeltmenin tek yolu Inkscape'de son bir manuel işlem adımına sahip olmak.
Son olarak, SVG'yi tekrar kaydetmeniz gerekir, ancak Farklı Kaydet iletişim kutusunda "Optimize edilmiş SVG" biçimini kullanın. SVG seçenekleri için bir iletişim kutusu olacak ve "Viewboxing'i etkinleştir" i etkinleştirmelisiniz.
Tüm SVG'lerim aynı büyüklükteki simgeler olduğundan, bu işlem adımı her zaman aynı tuval ve nesne boyutuna sahip olduğum için yalnızca 1 dakika sürer. Fakat evet, bu adımın gerekli olması ve AI'da sabitlenmesi çok yazık.
Bunu anladım. En sonunda! Bunu yapmanın basit bir yolu var. Bunun gibi:
<svg id="xbox" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 60.7"><title>xbox</title><rect width="200" height="60.68" style="fill:none"/><path d="M195.2,49.2l-11.8-16-11.5,16h-4.8L181.2,30,168.4,12.8h4.8l10.2,14,10.5-14h4.8L185.9,30,200,49.2Zm-90.7,0L90.4,30l12.8-17.2H98.4l-10.5,14-10.3-14H72.8L85.6,30l-14,19.2h4.8l11.5-16,11.8,16Z" style="fill:#0f7c10"/><path d="M131,31.3l-2.2-1.6a8.2,8.2,0,0,0,4.4-7c0-2.6-.9-9.9-12.1-9.9H106.4V28.4h-4.8l-2.9,3.5h7.7V49.2h14.7c8.3,0,13.1-4.2,13.1-10.9a8.6,8.6,0,0,0-3.2-7m-20.5-15h10.6c3.2,0,8,1,8,6.1s-2.9,6-8,6H110.5Zm10.6,29.1H110.5V31.9h10.6c4.1,0,8.9,1.3,8.9,6.4s-5.4,7.1-8.9,7.1m32.3-33.6c-10.3,0-17.3,7.7-17.3,19.2s7,18.8,17.3,18.8,17.5-7.6,17.5-18.8-7.3-19.2-17.5-19.2m0,34.2c-7.7,0-13.1-6.1-13.1-15s5.4-15.3,13.1-15.3S166.8,22,166.8,31s-5.5,15-13.4,15M8.9,8.6h0A31,31,0,0,0,0,30.4,32.5,32.5,0,0,0,6.1,48.9h.3C4.2,41.5,16,24.3,22,16.9h0C11.8,6.4,8.9,8.9,8.9,8.6m42.9,0h0a31,31,0,0,1,8.9,21.8,32.5,32.5,0,0,1-6.1,18.5h-.3c2.2-7-9.6-24.3-15.6-31.6h0C48.9,7,51.8,9.6,51.8,9.3M30.4,0A29.9,29.9,0,0,1,46.3,4.5h0c0,.3,0,.3-.3.3C40.3,3.5,31.3,8.3,30.4,8.9h0C28.1,7.7,19.8,3.2,14.7,4.8a.3.3,0,0,1-.3-.3h0A30,30,0,0,1,30.4,0m0,24.3h0c9.2,7,24.9,24.3,20.1,29.1h0a31.5,31.5,0,0,1-40.3,0h0C5.8,48.6,21.1,31.3,30.4,24.3h0" style="fill:#0f7c10"/></svg>Sorun Illustrator'dan bir görüntüyü dışa aktardığınızda (çoğunun yaptığı gibi) çalışma yüzeyi dışa aktarılan SVG'ye dahil edilmedi. Yolların hesaplamalarını temel alacak hiçbir şeyi yoktur.
Benim durumumda, resimlerim için maksimum yükseklik 100pxbuydu ve bu resimler için CSS stillerini genişlik ve yüksekliklerine göre temel almam gerekiyordu. CSS'de vwbirimleri ya 100%da SVG blok boşluğunu doldurmak için sadece eskidir . Bu güzel ölçeklendirir. Bu şekilde, doğru şekilde görüntülendiğinden emin olmak için CSS'deki genişlik ve yüksekliğin ayarlanması ile ilgili karışıklığa yol açmadınız.
Her logodan geçtim ve yüksekliği ayarlıyorum ve 100pxen boy oranına bağlı olarak genişliğin otomatik olarak hesaplanmasına izin verdim . Ardından kullanılmayan alanı kaldırmak için çalışma yüzeyini logoya yerleştiriyorum.
Bir dikdörtgen seçip dolgu ve konturu kapattım ve çalışma yüzeyinin tam olarak aynı boyutta olmasını sağladım. Bu boş nesneyi arkaya yerleştirin. Şimdi dışa aktardığınızda yol üzerinde hesaplamalar üzerinde çalışmak için bir temel olacaktır.
Kodda bunu yapmak için görünür, yolları a içine sarabilir rectve genişliğini ve yüksekliğini ayarlayabilir ve sonra viewBoxaynı şeyi ayarlayabilirsiniz (en boy oranlarını aynı tutabilirsiniz). Yukarıdaki örnekte gösterildiği gibi. Bunu gerçekten test etmedim ancak test edip güncelleyeceğim.
Inkscape kullanarak düzeltmeyi başardım . Illustrator uygulamasının SVG dosyaları için zayıf desteği var gibi görünüyor.
