기타 임의적인 생각(모든 것이 내 것이 아님):

• 우리는 성능이 좋지 않을 기능을 구현하려는 기존 기대가 있는 형식을 지원하지 않기를 정말로 원합니다. 예를 들어 SVG를 구현하면 사람들이 스크립팅, HTML, SMIL 등을 포함한 완전한 SVG 지원을 기대하게 될 것입니다.
• 우리는 우리의 형식을 drawAtlas와 같은 Skia의 성능 기능에 명시적으로 매우 밀접하게 맞춰 설계해야 합니다.

다양한 화면 크기와 밀도를 지원하는 앱 프레임워크에서는 벡터 지원이 중요해 보입니다. 그렇지 않으면 다음과 같은 아이콘이 생깁니다.

대신:

@HansMuller

Kris는 이에 대해서도 언급했습니다. 빌드 시 일부 제한된 SVG 처리를 수행할 수 있습니다. 예를 들어 SVG 설명을 기반으로 MD 아이콘 위젯을 생성할 수 있습니다. 신중하게 수행하면 공간을 절약하고 원래 디자인에 대한 충실도를 높일 수 있습니다.

특히 머티리얼 디자인 아이콘의 경우 머티리얼 디자인 아이콘 글꼴을 사용하여 조사해야 합니다.

@appforartists Cocoa도 android.view도 아이콘에 벡터 형식을 사용하지 않습니다.

@abarth iOS에 대해 놀랍지 않습니다. 하드코딩된 3.5인치 화면으로 시작하여 그 이후로 지원되는 해상도의 정신적 모델/단순성을 유지하기 위해 꽤 열심히 노력한 것 같습니다(참조: 각 iPhone의 너비가 동일하거나 원래 아이패드와 아이패드 미니는 같은 해상도를 가짐) 모바일 개발에 대해서는 잘 모르지만 안드로이드가 벡터 기반이 아니라는 점은 약간 놀랍습니다.

어떤 경우든 아이콘은 위의 스크린샷과 같이 앨리어싱되어 보이지 않아야 하며 벡터는 해상도 독립성을 위한 좋은 솔루션입니다. 예쁜 아이콘을 해결하기 위해 구현하는 방법은 사용자에게 달려 있습니다. : 스마일 :

예쁜 아이콘을 해결하기 위해 구현하는 방법은 사용자에게 달려 있습니다.

아이콘에서 보고 있던 해상도 문제에 대해 별도의 문제를 제출하시겠습니까? @krisgiesing 은 많은 경우를 처리하는 해상도 인식 자산 분석기를 구현했습니다. 처리하지 않는 경우에 대해 배우는 것이 중요합니다.

현재 해상도 인식 지원에 대한 몇 가지 테스트를 추가하려고 하므로 지금이 제대로 작동하지 않는지 이해할 수 있는 좋은 시간이 될 것입니다.

3x의 기기 픽셀 비율이 2.6 인 것 같으며, 이는 아마도 자산이 없을 것입니다.

나는 지금 이 특정한 경우를 보고 있다. 장치 픽셀 비율은 2.625입니다. 우리는 예상되는 3.0x 자산을 선택하고 있습니다. 그러나 렌더링 중에 일종의 추가 앨리어싱 아티팩트를 유발하는 무언가가 진행되고 있는 것 같습니다. 따라서 @abarth 가 글꼴로 전환하여 머티리얼 디자인 아이콘의 경우를 수정했지만 해상도 종속적 크기 조정이 필요한 다른 유형의 이미지 자산을 대신하여 여전히 조사 중입니다.

벡터 형식 지원에 접선이므로 이를 추적하기 위해 또 다른 버그를 열겠습니다.

#2337 참조

Android는 SVG의 성능이 좋은 하위 집합인 "VectorDrawable" 형식을 지원합니다. 이미 커뮤니티 지원이 있고 Android 팀에서 성능이 적절하다고 판단한 경우 동일한 형식을 사용하는 것이 좋습니다.

VectorDrawable은 확실히 SVG의 영향을 받지만 하위 집합이 아닙니다. 또한 XML을 사용하는데, 이는 XML이 생각해낼 수 있는 가장 성능이 좋은 벡터 형식이 아니라는 것을 거의 보장합니다. :-)

VectorDrawable을 엄격한 하위 집합으로 설명하는 것은 잘못되었지만 여전히 좋은 _render_ 성능 보장과 사용 편의성 사이에서 균형 잡힌 절충안으로 보입니다. VectorDrawable 사양은 경로 데이터 구문과 같은 주요 영역에 대한 SVG 사양을 자주 따르므로 많은 개발자가 이미 사용하고 있는 SVG 자산을 훨씬 쉽게 변환하고 기존 Android 앱에 이미 포함된 VectorDrawable을 공유합니다.

XML이 구문 분석에만 영향을 미치기 때문에 XML이 상당한 성능 방해 요소라고 상상할 수 없습니다. Flutter의 60fps 앱 목표에 영향을 미치는 성능의 종류인 _render_ 성능은 한 번 수행하고 캐시할 수 있는 구문 분석 단계가 아니라 Skia가 그려야 하는 벡터 작업 세트에 더 많이 의존하는 것 같습니다.

요점을 자세히 설명하고 싶지는 않지만 이에 대한 작업이 이미 완료되었으므로 "2.0 릴리스 이후" 이정표에서 보류할 필요가 없다는 느낌을 지울 수 없습니다.

머티리얼 디자인 아이콘에 머티리얼 디자인 글꼴을 사용하게 되었습니다. 직접 dart:ui 호출이나 CustomPaint 위젯을 사용하여 오늘 Flutter 위에 이것을 구축하는 데 방해가 되는 장애물에 대해 알지 못합니다: https://docs.flutter.io/flutter/widgets/CustomPaint-class. HTML. 현재로서는 그러한 구축에 대한 즉각적인 계획이 없습니다.

$.02 - 버벅거림이 있는 브라우저( 및 경쟁자 프레임워크인 React Native 는 신경쓰지 않습니다. 솔루션이 해킹됨)도 SVG를 렌더링할 수 있습니다. 이미지 내보내기 옵션을 사용하려면 팀의 각 아이콘 또는 아트 자산에 대해 최소 3개의 파일을 만들어야 합니다. 하나의 SVG 파일이 모든 해상도에서 표시될 수 있는 것과 비교하면 이는 좋지 않은 방법입니다.

Hixie의 위 의견에 대해 기존 기대가 가치 있는 기능 구현을 방해해서는 안 됩니다. 나는 SVG 디스플레이에 대한 기본 지원(저와 제 팀의 많은 문제를 해결함)을 훨씬 더 좋아하고 계속 증가하는 PNG를 수용하기 위해 계속 증가하는 수의 PNG에 의존하는 것보다 확장 옵션을 사용할 수 없다는 것을 알고 싶습니다. 화면 해상도의 수.

팀을 위해 글꼴을 만드는 것으로 돌아가고 있지만 글꼴 형식이 앱에서 조정해야 하는 줄 높이 및 문자 간격에 대한 추가 형식을 추가하기 때문에 기본 SVG 지원만큼 좋지 않습니다. 또한 글꼴은 고정된 해상도(12px, 16px, 20px, 36px...)로 표시되기를 원하므로 제한적입니다.

멋진 Flutter 프레임워크에 감사드립니다. :)

SVG 지원을 원하는 모든 사람이 SVG 지원을 Flutter용 Dart 패키지로 구현하도록 권장합니다.

관심 있는 분들을 위해 드로잉을 위한 저수준 라이브러리인 https://docs.flutter.io/flutter/dart-ui/dart-ui-library.html 을 가리킵니다.

팀에서: Dart 라이브러리는 솔루션이 충분하지 않습니다. 그냥 넘겨.

그것에 대해 자세히 설명해 주시겠습니까? Flutter의 전체 프레임워크는 Dart 라이브러리입니다. 여기서 구현하는 모든 것은 Dart 라이브러리가 될 것입니다. "충분히 좋은" 조건은 무엇입니까?

예를 들어 얼마 전에 순수 Dart에서 (단순하고 포괄적이지 않은) SVG 파서를 구현했습니다.

https://github.com/matanlurey/svg

다음 중 하나는 다소 사소한 것일 수 있습니다.

ㅏ. dart:ui 내부에서 사용하는 런타임 SVG -> SvgRenderElement 를 만듭니다.
비. SVG를 다음과 같이 변환하는 빌드 타임 컴파일 단계를 만듭니다.

// compiled from star.svg
void drawStarSvg(canvas, width, height) { ... }

@deborah-ufw 관심이 있으시면 채팅을 통해 자세히 알아보세요. 이메일을 보내주시겠어요?

안녕하세요 Seth, matanlurey 및 Hixie - 답변에 감사드립니다. 저는 아마도 Dart 플러그인 솔루션을 거부한 것이 우리의 수석 엔지니어였기 때문에 깊이 이야기할 적절한 사람이 아닐 것입니다.

나는 이 Github 문제에 대한 링크를 그들에게 전달하고 그들의 코멘트에 대한 기술적인 이유를 제공하도록 요청하고 싶습니다.

또한 http://gitter.im/flutter/flutter 및 필요한 경우 https://flutter.io/support/에 나열된 기타 연락 방법을 통해 엔지니어와 직접 채팅할 수 있습니다. :)

추가하겠습니다. 감사합니다! :디

또 다른 접근 방식은 http://svgpp.org/ 와 같은 것을 기본 수준에서 통합하고 Flutter 플러그인 시스템을 사용하여 통신하는 것입니다. 이것은 아마도 완전한 SVG 지원을 위한 최상의 크기/성능 특성을 제공할 것이지만 종속성을 유지하는 비용을 희생해야 합니다.

엔진 수준에서 SVG 지원을 찾는 것은 어떻습니까? 나는 표준의 완전한 지원을 기대하는 것이 합리적이거나 바람직하지 않다고 생각하지만 호소의 일부는 교차 기능 팀과 기존 도구에 대한 지원입니다.

Skia가 기본적인 SVG 지원을 제공한다는 인상을 받았습니다. 이것을 Flutter에서 사용할 수 있도록 하는 방법이 없나요?

내가 말할 수 있는 바에 따르면, 그것은 단지 실험적이고 부분적이었습니다. https://bugs.chromium.org/p/skia/issues/detail?id=5596 비트 여기에 열린 문제가 있습니다. 1년이 넘었습니다. 그들은 또한 로드맵에 나열하고 있지만 우선 순위가 무엇인지 다시 명확하지 않습니다.

SVG 지원의 핵심 부분인 SVG 문서 모델을 노출하지 않기 때문에 엔진 수준에서 SVG를 지원하는 것은 이치에 맞지 않습니다.

Flutter가 SVG를 지원한다면, 실제 SVG를 실제로 실제로 지원하는 것이 궁극적인 목표가 될 것입니다. 기능을 무심코 구현하는 것은 Flutter의 철학에 어긋납니다.

SVG 문서 모델을 SVG 지원의 핵심 부분으로 노출하는 것은 보이지 않습니다. 있으면 좋겠지만 내가 염두에 두고 있는 사용 사례에 꼭 필요한 것은 아닙니다.

예, 라이브러리 수준 지원을 통해 더 많은 기능을 사용할 수 있습니다. 하지만 엔진 자체가 SVG 데이터(중요한 하위 집합)를 렌더링할 수 있는 경우 SVG 하위 집합에 의해 정의된 벡터 이미지 자산을 렌더링하기에 충분할 것입니다.

이 문제는 분명히 그것보다 더 큽니다. 하지만 기존 SVG 자산을 가져와서 모두 부피가 큰 래스터 이미지로 변환하지 않고 다른 해상도에서 적절하게 렌더링할 수 있게 되어 기쁩니다.

예, SVG 자산 파일 가져오기는 정말 좋지만 SVG 사양은 800페이지가 넘습니다. Skia(벡터 그래픽 라이브러리)에서 렌더링하기 위해 정적 파일을 가져오는 것은 문제가 되지 않습니다. 그래서 나는 그것을 복용하고 있습니다. 항상 그렇듯이 주말에만 아르바이트를 할 수 있으므로 바로 볼 수 없습니다. 또한 수많은 SVG 파일이 있지만 모두 동일한 항목(flaticon의 아이콘 모음)을 사용하므로 이 기능을 원하는 사람들의 샘플 SVG 파일에 감사드립니다.

카를로스.

저도 시간이 지나면서 이것에 대해 조금 고민했습니다. 제가 생각해낸 것은 다음과 같습니다.

엔진 레벨 구현

이것은 다음과 같은 이유로 매력적으로 보입니다.

1. 이론적으로 image: new AssetImage('graphics/background.svg') 와 같은 것을 지원하여 일부 C/C++ 코드를 구문 분석하고 SVG 데이터를 Skia 렌더링 명령으로 변환합니다.
2. 엔진 수준에서 Skia에 상당히 쉽게 연결할 수 있는 하나 이상의 좋은 후보
3. WebKit의 SVG 로직은 굉장하지만 의존성이 너무 많은 것 같습니다.
4. librsvg가 너무 잘 이식될 것이라고 생각하지 않습니다(Cairo와 긴밀하게 연결되고 Rust로 기본 언어로 전환됨 - 최소한 Skia를 백엔드로 사용할 수 있는 방법을 찾아야 함).

그러나 최소한 몇 가지 어려움이 있습니다.

• 텍스트를 올바르게 처리
• CSS를 적절하게 처리(만약 있다면? 그러나 추가하는 것은 간단한 작업이 아닙니다)
• 추가 기능에 대한 지원을 확장하는 것(또는 사용자가 기능에 대한 지원을 보다 원활하게 추가할 수 있도록 허용하는 것)은 어렵습니다.
• 애니메이션을 다루는 것이 매우 어려운 것 같습니다.

다트 레벨 구현

1. Flutter의 dart:ui 는 SVG가 이미 필요로 하는 Skia의 많은 기본 요소를 제공합니다.
2. 텍스트 렌더링이 엔진 수준보다 이 수준에서 훨씬 더 쉽게 처리될 것이라고 생각합니다.
3. 더 많은 커뮤니티가 유지/확장하기 쉬워야 합니다.
4. 구문 분석 로직과의 직접적인 상호 작용을 보다 저렴하게 처리할 수 있어야 합니다(예외 및/또는 애니메이션을 처리하기 위해?)

그러나 몇 가지 어려움이 있습니다.

• CSS 지원이 훨씬 좋지 않을 수 있습니다.
• 애니메이션을 지원하는 데 훨씬 도움이 되지 않을 수 있습니다.
• 더 느릴 수 있음

테스트 데이터

샘플 SVG에 관한 한 1.1 테스트 스위트에서 지원되는 SVG(또는 부분적으로 지원되는 경우 부분적으로 지원되는 SVG)를 식별하는 것이 가장 유용할 것입니다. 그것들은 여기에서 찾을 수 있습니다:
https://github.com/w3c/web-platform-tests/tree/master/svg/import

또는 여기에서 일부 PNG 비교: https://www.w3.org/Graphics/SVG/Test/20110816/

@cbazza , 이것을 구현하는 방법은 무엇입니까? 이 시점에서 저는 Dart 패키지 수준 구현에 더 기울고 있습니다.

또한 아이콘 유형 지원은 IconData와 같은 것으로 쉽게 처리될 수 있다고 생각합니다. 코드 포인트당 단일 경로만 지원해야 하므로 별도로 처리하는 것이 가장 좋습니다.

dart:ui 위에 'Dart 레벨 구현'을 생각하고 있습니다.

2가지 기본 사용 사례:

(1) 다음과 같은 정적 아이콘 svg 파일을 로드합니다.
"이미지: new AssetImage('graphics/background.svg')", 여기서
파일은 파일 시스템에서 또는 네트워크를 통해 올 수 있습니다.
동적으로.

(2) DSX를 통한 위젯 기반 svg 지원(JSX 유사 구성)
다음과 매우 유사합니다.
https://github.com/react-native-community/react-native-svg

'테스트 데이터'와 관련하여 필요한 사람들의 실제 파일이 필요합니다.
이것은 w3 테스트 스위트가 아닙니다. SVG 지원은 종속적입니다.
dart:ui 가 지원하는 항목에 따라 원하는 svg 파일에 다음이 포함되어 있으면
dart:ui 로 할 수 없는 일, 나는 할 수 있을 것입니다
빨리 알아보십시오.

카를로스.

반응형 기본 SVG 모델로 가야 한다고 생각하지 않습니다. 실제 사례를 지원하고 싶습니다. 약간 w3 제품군을 다루는 것이 작동하는 것과 작동하지 않는 것, 구현하는 것이 얼마나 어려운지에 대한 더 나은 기준을 제공할 것이라고 생각합니다)

맞아요 뭔가 오해가 있는듯...
(1)을 수행할 때 표준 SVG 파일을 사용하고 dart:ui (Skia)를 제공할 수 있는 한 최대한 지원하려고 노력할 것입니다.
SVG와 같은 구성을 처리하기 위해 위젯을 생성하는 (2)를 수행하면 해당 react-native-svg 라이브러리와 매우 유사하게 보일 것입니다. 이것은 매우 다른 2가지입니다.

@cbazza 앱의 svgs 사용 사례는 주로 아이콘으로 사용하는 단색 svgs에 대한 것입니다. 다음은 대표적인 최근 svgs를 선택하여 Dropbox에 있는 zip 파일에 대한 링크입니다. https://www.dropbox.com/s/dp38wxc22625cvc/icons.zip?dl=0

여기에 관심을 가져주셔서 감사합니다. SVG Flutter 플러그인이 활성화되는 것을 보게 되어 기쁩니다!

나는 다소 SVG 파일 시퀀스의 일부 최소한의 구문 분석을 수행하고 나중에 아이콘 애니메이션을 표시하는 데 사용하는 Dart 파일을 덤프하는 도구를 작성했습니다. vitool .

이 도구를 사용하여 AnimatedIcons 데이터를 생성했으며 수동 테스트 앱 ( cd dev/manual_tests; flutter run -t lib/animated_icons.dart )을 실행하여 결과를 확인할 수 있습니다.

최적이거나 완전하지는 않지만 현재 가지고 있는 애니메이션 아이콘 세트에서 작동하며 누군가는 이를 분기/확장할 권한이 있다고 느껴야 합니다.

이 단색 아이콘에 대해 @deborah-ufw 할 수 있는 일은 아이콘 글꼴을 만들고 아이콘 위젯 을 사용하여 아이콘을 표시하는 것입니다.

@amirh 는 색상 벡터 글꼴을 만들기가 쉽지 않은 것 같습니다.

@amirh 위의 전체 스레드를 읽은 경우 글리프를 아이콘으로 사용하여 글꼴을 만들고 정의하는 것은 SVG가 지원되지 않기 때문에 수행해야 하는 추가 단계입니다. SVG 지원은 글꼴보다 훨씬 효율적입니다. 또한 zoechi가 맞습니다. 여러 색상이 있는 벡터 아트는 글꼴로 만드는 것이 거의 불가능합니다.

죄송합니다. 샘플 아이콘을 보고 단색 아이콘만 필요하다고 생각했습니다.

@deborah-ufw, 파일에 대해 감사드립니다. 정확히 제가 찾던 것이었고 이미 제 파일에 없는 것을 찾았습니다.

@amirh , 네, 당신의 훌륭한 작품을 이미 보았습니다 ;)

svg 또는 vector asset xml을 flutter용 이미지에 소스로 넣을 수 있는 방법이 마침내 생겼습니까?

@Hixie : 다중 플랫폼 네이티브 모바일 팀의 경우 이것이 진정한 고충이지만 이 문제를 해결하려면 부분적이고 비교적 간단한 SVG 지원 만 필요하다는 점을 (재)고려하십시오. SVG 표준 유지 관리자에게 이것은 무모한 것으로 간주될 수 있지만 Flutter는 일반 표준 작성자가 아닌 모바일 개발자를 위한 것입니다. Flutter가 실제적인 고통을 덜어준다면 모바일 개발자의 마음을 사로잡을 것입니다.

또한 이러한 오랜 요구에도 불구하고 커뮤니티 지원 접근 방식은 Flutter 경쟁자 Xamarin 에서 실행 가능한 솔루션을 생성하지 못했다는 점을 고려하십시오(Xamarin 경험 5년에서 - 라이브러리는 디자인 도구 내보내기를 처리할 수 없고, 너무 제한적이며, 안정적이지 않으며, 유료 및/또는 비공개 소스).

이 때문에 Xamarin 커뮤니티가 실패한 곳에서 Flutter 커뮤니티가 성공할 것이라고 낙관하지 않습니다. 나는 그것이 실용적이라고 추정한다. SVG 아이콘에 대한 부분 지원은 Flutter 팀이 기존 Skia 프리미티브를 사용하여 제공할 수 있는 것입니다.

이는 Flutter의 목표에 잘 부합합니다 . 모바일 개발자가 기록적인 시간 내에 아름답고 고성능의 UX를 제공할 수 있도록 합니다. 그것은 생산성, 충실도 및 성능을 향상시킬 것입니다(SVG는 모든 PNG보다 훨씬 빠르게 로드됩니다.

핵심 요구 사항은 일반적으로 사용되는 크리에이티브 디자이너 도구(예: Adobe)에서 확장 가능한 기본 앱 아이콘에 이르기까지 생산적인 워크플로입니다.

현재 PNG 접근 방식은 생산성과 앱 크기 측면에서 매우 낭비적입니다. 모든 아이콘을 최대 9개의 고정 비트맵(Android 6개, iOS 3개)으로 생성하고 제공한 다음 런타임에 후처리하는 것은 너무 원시적입니다. 문제는 해상도의 크기와 변형이 증가함에 따라 꾸준히 증가합니다.
그렇지 않으면 유쾌한 혁신적이고 생산적인 Flutter 개발자 경험에서 아픈 엄지손가락으로 튀어나옵니다. Flutter는 여기에서 개발자의 마음과 마음을 얻을 수 있는 진정한 기회가 있다고 생각합니다.

또한 @dnfield 위에서 언급한 Flutter에서 구현하기 위한 장애물로 언급된 SVG 기능 은 제 경험상 관련이 없거나 해당 디자인 자산에 대해 PNG로 다시 돌아가는 것이 약간 불편할 정도로 드문 것입니다.
Don't care: CSS, HTML, SMIL, 문서 모델, 스크립팅
애니메이션, 텍스트: 이를 위해 다른 기술로 대체할 만큼 희귀합니다.

이 설명의 길이가 솔루션의 가치를 전달하기를 바랍니다. 헉!

@VincentH-Net 나도 아파서 100% 동감!!! SVG 파일 중 일부를 저에게 보내주십시오. 아마도 Xamarin은 SVG 지원을 처리할 수 있는 벡터 그래픽 엔진의 부족으로 인해 SVG 지원을 제공하는 데 어려움을 겪었을 것입니다. 이것은 Flutter with Skia의 경우가 아니므로 커뮤니티 솔루션이 일어날 것이라고 매우 낙관합니다.

FWIW, Xamarin에는 SkiaSharp에서 사용할 수 있는 Skia도 있습니다. SVG는 최소한의 구현에도 까다로울 수 있습니다.

하지만 @cbazza 이 문제에 대해 귀하와 협력하는 데 매우 관심이 있습니다.

그리고 애니메이션 측면에서 Lottie를 활성화하면 많은 사용 사례를 충족할 수 있을 것이라고 생각합니다.

@dnfield 이 Lottie 애니메이션은 Flutter 위젯으로 쉽게 다시 빌드할 수 있다고 생각합니다.

@dnfield , 위젯에서 상위 수준 작업을 수행하는 동안 엔진 수준의 변경 사항을 처리하는 하위 수준 사람이 될 수 있습니다(비동기 svg 구문 분석, 캐시되어 렌더링 업데이트 시 캔버스로 보낼 수 있는 '그림' 구성 등).
네, Lottie 작업은 디자이너/개발자 워크플로에 매우 좋습니다.
@zoechi 모든 것을 처리하는 작동하는 Lottie 위젯을 간단히 가져올 수 있는데 위젯을 사용하여 손으로 무언가를 다시 빌드하는 이유는 무엇입니까? 위의 내 이전 목표(2)가 위젯 애니메이션과 함께 잘 작동할 것이라고 말했지만(따라서 나도 하고 싶은 이유).

@zoechi - 목표는 디자이너가 개발자 입장에서 최소한의 노력으로 이러한 것을 만들고 렌더링할 수 있도록 하는 것입니다. 두 번째 목표는 사전 컴파일을 필요로 하지 않고 런타임 시 리소스로 로드할 수 있도록 하는 것입니다.

SVG의 경우에도 마찬가지입니다. 예, 개발자는 확실히 SVG 벡터 데이터를 Dart로 변환할 수 있지만 이상적으로는 벡터 드로잉(SVG 여부) 리소스를 포함하고 런타임에 렌더링할 수 있습니다.

다시 말해서, 저는 디자이너에게 벡터 자산을 한 번 생성하고 최소한의 수정으로 Flutter 애플리케이션에서 사용할 수 있도록 지시할 수 있기를 원합니다(디자이너가 이를 다양한 래스터 형식으로 5번 내보내지 않고도 Apple 또는 Samsung이 다음 전화를 출시하는 즉시 무효화됨).

다양한 래스터 형식

예, 지난 10년처럼 느껴집니다.

https://github.com/luberda-molinet/FFImageLoading 살펴볼 가치가 있을 수 있으며 Skia를 사용하여 Xamarin용 SVG를 렌더링합니다.

@escamoteur

감사합니다. 정말 좋아 보입니다. 비동기가 아니라는 점만 빼면 됩니다. ;)

최근에 Android 애플리케이션에서 벡터 드로어블만 사용하고 있는데 눈에 띄는 성능 저하가 보이지 않습니다. 아이콘이 선명하고 앱 크기가 훨씬 작습니다. 또한 다양한 이미지를 테스트하는 것이 훨씬 쉽고 빠릅니다. 이 @2 , @3 , @4 , @5 ,.... 솔루션은 Flutter와 같은 현대적인 프레임워크에서 한 걸음 물러난 것처럼 보입니다.
나는 왜 당신이 안드로이드 벡터 드로어블을 담당하는 팀에 갈 수 없고 그 문제를 해결하기 위해 그들의 아이디어나 구현(가능한 경우)을 사용할 수 없는지 이해하지 못합니다.

나는 여기 캔버스에 그려진 일부 SVG를 가지고 놀았습니다. path 요소는 구현하기 가장 까다롭지만 노출되면 정말 도움이 되는 Skia API가 있습니다. 나는 그것을 엔진에 노출시키는 실험을 했고, 좀 더 다듬을 시간이 생기면 PR을 열 것입니다.

대략적인 아이디어는 이미 존재하는 Skia API를 사용하여 SVG 데이터 문자열에서 dart:ui Path 를 생성할 수 있도록 하는 것입니다. 제안된 방법은 static Path Path.parseFromSvgData(String svgData) -> Path 입니다.

적용할 수 있는 다양한 변형/획/채우기를 구문 분석하는 데 약간의 작업이 남아 있습니다. @amirh 가 한 작업에서 상당한 양의 것을 빌릴 수 있다고 생각합니다(SkParsePath에는 없는 제약 조건이 있는 것처럼 보였고 SkParsePath와 마찬가지로 SkParsePath는 각 그리기 명령에 대해 왕복이 아닌 경로를 그리기 위해 기본 측에 한 번 왕복). 저도 비슷한 이유로 @matanlurey 를 사용하지 않았습니다.

https://github.com/flutter/flutter/blob/master/dev/tools/vitool/lib/vitool.dart , https://github.com/dnfield/flutter_svg (현재 두 SVG를 렌더링할 수 있음 해당 프로젝트에 캔버스에 포함됨) 및 https://github.com/dnfield/engine/tree/path_svg (현재 Lottie에 대한 PathMeasure/PathMetrics 관련 작업도 포함되어 있음).

안녕하세요 @dnfield 입니다 .

다음은 귀하의 초기 구현에 대한 제 의견입니다. 내가 무슨 말을 하든 여러분의 열정과 코딩 진행에 아무런 차이가 없어야 합니다. 나중에 항상 사용할 수 있기 때문에 더 많이 할수록 더 좋습니다.

내가 가진 문제는 아키텍처이며 여기에 이유가 있습니다. UI가 60프레임/초로 응답하도록 하려면 각 프레임이 UI를 차단하기 전에 실행하는 데 ~16ms만 있어야 합니다. 따라서 절반이 Flutter에서 작업을 수행하는 데 사용된다고 가정하고 SVG 파서에 8ms를 남겨두고 휴대전화/태블릿이 아무리 강력하더라도 해당 기간에 SVG 파일을 구문 분석하고 이미지를 생성할 방법이 없습니다. 따라서 가장 좋은 방법은 느린 장치를 대상으로 하고 여러 프레임을 사용하여 이를 수행할 수 있는 비동기 코드를 사용하는 것입니다. 그러나 핵심은 각 프레임이 최대 8ms까지만 실행할 수 있고 다음 프레임에서 반환 및 선택해야 한다는 것입니다.

따라서 비동기가 아니기 때문에 dart:xml 을 사용하여 XML을 구문 분석할 수 없으며 전체 파일이 구문 분석될 때까지 차단됩니다. 또한 이미지 생성은 8ms 안에 모든 것을 할 수 없기 때문에 비동기식이어야 합니다. 성급하게 코드를 최적화하는 것은 의미가 없으므로 읽을 수 있는 최상의 코드를 작성하십시오. 나는 효과가있을 계획이 있지만 시간이 걸릴 것이므로 항상 당신의 작업을 가져 와서 나중에 사용할 수 있기 때문에 당신처럼 계속 해주셨으면합니다. 내 디자인은 현재 이미지 로드 기능(AssetImage 및 NetworkImage)에 연결되며 사용자는 '.png' 대신 '.svg'를 지정하기만 하면 됩니다.

카를로스.

@cbazza 그냥 아이디어: 파싱은 분리하여 수행할 수 있습니다. UI 격리 이외의 격리에서 메시지 채널과 통신하고 복사 대신 참조로 격리 간에 데이터를 전달할 수 있도록 몇 가지 작업이 수행된 것 같습니다(상태나 진행 상황은 확실하지 않음).

@cbazza - 감사합니다. 나는 dart_xml이 이에 대한 최선의 솔루션이라고 생각하지 않지만, 작동하고 드로잉 로직 주변에서 약간의 진행을 가능하게 합니다(비동기 XML 파서를 구현하는 동안 이것을 완전히 차단하고 싶지 않았습니다). 나는 또한 ImageProvider 구현에 대해 살펴보기 시작했지만 이것이 사용자에게 모호할 수 있는 구현 세부 사항이 될 수 있다고 생각합니다.

나는 이 API에 대해 어떤 식으로든 설정되어 있지 않습니다. 그러나 우리는 최소한 SVG 그리기부터 시작할 수 있으며 아마도 괜찮은 휴대폰에서 간단한 것을 지원할 수 있을 것입니다.

XML/SVG 읽기/파싱 API 작업을 하시겠습니까?

@zoechi - 스트리밍 리더 모델을 사용하면 훨씬 더 나은 메모리 사용량과 더 나은 구문 분석 시간을 얻을 수 있습니다.

@zoechi 예, 격리를 보았지만 기본 값(null, num, bool, double, String)과 목록 및 맵만 전달할 수 있으며 개체 및/또는 개체 트리는 전달할 수 없으므로 비동기 경로가 더 좋아 보였습니다. async xml 파싱을 알아내는 것에 대한 또 다른 흥미로운 점은 위젯이나 요소 트리와 같은 모든 비동기 트리 처리에 개념이 적용된다는 것입니다. 이렇게 하면 예를 들어 React의 Fiber에서와 같이 비동기 조정이 가능합니다. :)

@dnfield 예 비동기 xml/svg 파서/프로세서에서 작업 중입니다.

웹 보기를 사용하여 SVG를 렌더링하는 것이 옵션이 될 수 있는지 궁금합니다.

간단한 버튼에는 너무 무겁고 webview가 60 프레임/초 변경을 처리할 수 있을지 확신이 서지 않습니다. 예를 들어 아이콘을 이동하거나 크기를 조정한다고 가정해 보겠습니다.

저는 iOS 개발자가 아니므로 이제 iOS 11도 벡터 자산을 지원 한다는 것을 알았습니다. SVG가 아니라 PDF입니다. PDF 벡터 자산을 지원하기가 더 쉽습니까?

아니요. Quartz는 내부 렌더링 시스템을 위해 PDF와 많은 역사적 연관성을 가지고 있으므로 iOS 장치에서 이 작업을 더 쉽게 수행할 수 있습니다. Skia는 PDF 렌더러가 아니며 파일 형식(IMO)은 지원되는 것과 지원하지 않는 것에 대해 많은 모호성을 야기합니다(사용 가능한 수정 도구로 좋지 않음).

PDF는 SVG보다 복잡하고 PDF/X 하위 집합(벡터 자산에 사용됨)은 인쇄용으로 설계되었습니다. Flutter에서 PDF 렌더링 지원을 보고 싶지만 SVG에 충실합시다.

svg(점, 선, 곡선, 채우기, 이동)의 단순한 VectorDrawable 하위 집합에 만족합니다. Flutter는 RAD를 허용하고 진정한 멀티플랫폼(데스크톱 출시 예정)을 목표로 하지만 지금은 불가능합니다. Android 및 Apple 플랫폼은 모두 60"+ 4HD 화면에 있습니다. 벡터 그래픽은 필수입니다.

PS 실례지만, iOS를 포함한 많은 플랫폼에서 기본적으로 작동하는 Kotlin으로 인해 VG가 없으면 (플러터 팀) 작업이 사라질 것입니다. 물론 Kotlin은 아직 베타 버전이지만 Flutter도 마찬가지입니다. :(

@ohir Kotlin 네이티브를 사용하여 iOS와 Android 모두에서 작동하는 크로스 플랫폼 보기(단일 코드)를 작성하는 방법을 설명해 주세요. 반응 네이티브 위젯 추상화의 kotlin 버전을 만들 의도가 없다면?

가능성이 무한하기 때문에 Kotlin 원주민이 무엇을 할 것인지 과소평가하지 맙시다. Cocos2d-x를 사용하여 Flutter와 같은 것을 만드는 실험에서 Flutter를 사용하게 되었습니다. 모든 것이 오픈 소스이고 교차 수분에 사용할 수 있기 때문에 그들은 그것을 너무 및/또는 React Native 및/또는 Flutter를 사용할 수 있습니다. :)

예, 전적으로 동의합니다. 개발자의 kotlin 사랑과 채택은 엄청나고 플랫폼 간 컴파일은 무한한 가능성을 만듭니다. 그러나 오늘날 모바일 크로스 플랫폼용 Flutter 베타와 Kotlin 네이티브 베타를 비교하는 것은 무의미합니다.
어쨌든 주제에서 벗어났습니다.

@lukaspili 지금까지 Android용ko가 있습니다. 레이아웃 DSL은 각 플랫폼 하위 트리에 포함된 apko , linko 및 winko*에서도 그대로 작동할 수 있습니다. 그러나 이것은 Flutter VG 문제에 대한 OT입니다. [*은(는) 아직 존재하지 않습니다.]

모든 열정적인 대화에 감사드립니다! 우리는 이 문제를 벡터 형식 및 API에 대한 사용 사례와 요구 사항에 초점을 맞추고 싶습니다. 주제에 대해 미리 감사드립니다! :)

사람들은 이것을 SVG 지원 문제로 나누고 이것을 일부 TBD 플러터 벡터 형식으로 유지하는 것에 대해 어떻게 생각합니까?

그것은 나에게 이해가 될 것입니다. 원래 문제는 일종의 Flutter 관련 벡터 형식으로 표현됩니다.

svg와 같은 지원을 위해 @cbazza 만세. 기본적으로 앱의 전체 UI를 그리는 데 사용하는 아이콘이 아닌 svgs가 많이 있습니다. 어떻게 보내야 합니까?

플러터로 이동하고 싶지만 수백만 개의 png를 생성하면 앱 크기가 심각하게 커지고 보기 흉해질 것입니다.

예, 파일을 볼 수 있는 URL을 보내주십시오.

따라서 이 시점에서 저는 Flatbuffer 기반 접근 방식을 추구하고 있습니다. 저는 Skia가 경로를 캡처하는 방식과 같이 벡터 드로잉 명령을 캡처할 수 있는 Flatbuffer 스키마를 정의하는 중입니다.

나는 이것이 SVG와 반 상호 운용 가능하다는 것을 알 수 있었고(예: SVG 사용 사례를 다룰 수 있는 SVG -> Flatbuffer 변환 도구 또는 Android Vector Drawable XML -> Flatbuffer가 있음) 많은 성능 저하를 피할 수 있습니다. SVG에 직면했습니다(스트리밍 XML 구문 분석 부족, SVG 경로 데이터를 구문 분석한 다음 비트 단위로 기본으로 보내야 함). 나는 또한 SVG 형식보다 더 작은 바이너리 파일을 생성할 수 있었습니다(비록 얼마나 잘 확장될지는 두고 볼 일이지만).

또한 주어진 SVG에서 지원되지 않는 기능에 대해 변환 도구에서 미리 더 명확하게 제공할 수 있어야 합니다(예: "ForeignElements는 이 형식에서 지원되지 않습니다").

Flatbuffer 파싱 비트는 Dart 또는 C++에서 수행할 수 있습니다. dart의 한 가지는 경로를 빌드하고 Canvas에서 그리기 위해 Skia에 명령을 일괄 처리할 수 있는 방법이 있다는 것입니다.

SVG를 Skia 노드 작업으로 컴파일 타임 구문 분석 및 다이제스트를 수행하는 훨씬 더 간단한 솔루션이 있습니다. 이렇게 하면 SVG의 런타임 구문 분석이 모두 제거되고 중간 버퍼의 유지 모드 캐싱이 허용됩니다.

@sandrobilbeisi 당신은 https://github.com/amirh/flutter/commit/69de4bbf3177d9766a386c55b27a12619da43a05 와 같은 것을 의미합니까?

그것은 주목할만한 ... 그리고 vitool도 있습니다 https://github.com/flutter/flutter/blob/master/dev/tools/vitool/lib/vitool.dart

하지만 Xcode가 iOS 결과물을 위한 SVG 자산과 함께 사용하는 것과 같은 빌드 단계로 더 많이 생각하고 있었습니다.

@sandrobilbeisi 컴파일 시간 동안 svgs에서 비트맵을 생성한다는 의미입니까?

BTW Xamarin 패키지 ffimageloading은 렌더링된 비트맵을 캐시하므로 한 번만 렌더링됩니다. 또한 네트워크 이미지와 크기가 조정된 이미지를 캐시하여 매우 빠르게 만듭니다.

비트맵이 아니라 원래 < 캔버스 > 의 벡터 그래픽 엔진인 Skia
https://skia.org/ ( ps 12년 전 Google에 인수됨 : http://www.satine.org/archives/2007/03/05/the-skia-source-code-dilemma/ )

svg를 skia 이미지 형식으로 변환하는 것을 의미합니까?

네

SVG 테스트 파일에 대한 @cbazza 링크: https://github.com/slingshotapp/artwork

프로젝트 수준에서 vitool을 실행하는 방법이 있습니까? 생성된 파일을 만들 수 있지만 내 프로젝트에 .g.dart 를 추가하지 못하도록 하는 많은 비공개 클래스에 액세스해야 합니다.

<flutter>/dev/tools/vitool 의 도구 참조: #dart bin/main.dart --asset-name=_$hello --output=here.g.dart ./test_assets/horizontal_bar_relative.svg

@emilieroberts 감사합니다. 하지만 해당 파일은 SVG 형식이 아니라 SVG와 매우 유사한 사용자 지정 Android 벡터 형식입니다.

@cbazza oops, 실제로 - 대부분의 svgs가 현재 거기에 있습니다 :)

@cbazza 사용자 정의 Android 벡터의 의미를 명확히 할 수 있습니까? Android 벡터 드로어블과 달리 <svg 태그가 있습니다.

현재 vitool로 무엇을 하고 있는지는 놀랍지만 어디에서도 문서의 흔적을 찾을 수 없습니다. AnimatedIcons.arrow_menu 를 사용하여 예제를 작성할 수 있지만, Flutter SDK 외부의 자산에서 이를 수행하는 데 필요한 작업도 알고 싶습니다.

@fmatosqg 맞습니다 . vitool에서 생성한 애니메이션을 실행하는 데 사용되는 코드는 프레임워크 전용입니다. 그 이유는 Flutter에 적합한 벡터 형식이 무엇인지(이 문제에서 추적)에 대해 여전히 미해결 질문이 있고 특정 형식을 지원하는 공개 API를 피하고 싶었기 때문입니다. 우리는 미래에 주요 변경 사항을 원하지 않습니다).
AnimatedIcon에 대한 현재 API 표면을 통해 프레임워크에서 내부적으로 vitool에 의해 생성된 파일을 사용할 수 있으며 클라이언트를 중단하지 않고 기본 구현 및 벡터 형식을 계속 교체할 수 있습니다.

vitool을 사용하여 파일을 생성하고 프로젝트에서 사용하려면 packages/flutter/lib/src/material/animated_icons 에서 코드를 복사하고 프로젝트의 일부로 포함하면 됩니다. AnimatedIcon에서 사용하는 기계를 변경합니다).

불편을 드려 죄송합니다. 빠른 시일 내에 더 나은 솔루션을 얻을 수 있기를 바랍니다.

특히 https://github.com/flutter/flutter/issues/13834 가 진행된다면 이 아이디어가 마음에 듭니다. 나는 그러한 것이 모놀리식 SDK의 일부가 되어서는 안 된다고 생각하지만, 그것이 공식 또는 커뮤니티 패키지라면 특별히 걱정하지 않아도 됩니다.

큰 G 의 누군가가 Shiny (Go 데스크탑 프레임워크)를 위해 만든 svg의 하위 집합에 대한 압축 형식 이 있습니다. 바이너리 표현이며 기본 Android 실행기 아이콘 크기를 100바이트 미만으로 가져올 수 있습니다. 위의 스레드 및 IMSO에서 설명한 대로 벡터 그리기는 Skia의 의무여야 하며 Flutter는 사용 가능한 가장 간결한 표현을 전달합니다. res/ svg 파일을 내부 형식으로 컴파일하는 도구의 의무입니다.
[ @amirh Re: 좋은 벡터 형식이 무엇인지에 대한 열린 질문 ]

그래서 FWIW에서 flutter_svg에서 모든 그림이 실제로 중간 개체에 의해 수행되도록 코드를 공식화했습니다. SVG 관련 작업은 기본적으로 SVG를 해당 개체에 매핑하는 것입니다. 중간 형식을 완전히 안정화하려면 아직 해야 할 일이 있습니다(예: 텍스트 지원을 시작했지만 지금은 매우 좋지 않습니다).

Android Vector Drawables에 대한 지원을 프레임워크로 이식하기 시작했습니다(외부 색상 및 스타일 참조 등에 대한 지원 제외, 아직 클립 경로 또는 기타 기능은 지원하지 않음). 이런 식으로 Shiny를 지원하거나 실제로 다른 형식을 지원하는 것이 완전히 가능해야 합니다. 지원해야 할 많은 흥미로운 사례를 다루는 데 도움이 되기 때문에 이 시점에서 SVG를 통해 작업하는 것을 좋아합니다. 그래서 지금은 그것이 제 주요 초점입니다.

이 스레드와 JSX 지원에 대한 긴 스레드를 읽은 후 거버넌스 문제가 있다는 생각을 지울 수 없습니다. Flutter 팀은 _자신들이_ 느끼는 것이 중요하다고 느끼는 개발자의 요구에 따라 수천 가지 다른 방향으로 끌려갈 위험이 있습니다. 아마도 Flutter는 Apache와 같은 "인큐베이터" 프로젝트를 도입해야 합니다. 요청된 기능은 Flutter 팀 자체의 기여로 오픈 소스 방식으로 플러그인에 의해 구현됩니다. 플러그인이 충분한 지원, 효능 및 인기를 얻으면 핵심 Flutter 프레임워크에 포함될 후보가 됩니다.

나는 이것이 대부분의 보컬 개발자가 여기에 표시되는 가슴과 눈썹에 의존하기보다 "입이 있는 곳에 코드"를 넣을 수 있게 하고 Flutter 팀이 핵심 엔지니어링에 더 집중할 수 있도록 해줄 것이라고 생각합니다.

나는 정중하게 동의하지 않습니다. 버킷 5와 같은 이정표를 살펴보면 팀이 무엇을 하고 있는지 알 수 있고 버킷 6으로 이동하면 우선 순위를 고려하는 것이 무엇인지 알 수 있습니다. 또한 다른 이정표를 보면 긴급하지 않은 것으로 간주되는 것이 무엇인지 알 수 있습니다.

또한 플러터 코어에 무언가를 추가해야 하는 이유는 "플러그인을 만들 수 있고 모두에게 작동하고 모두가 원한다"는 것 이상이어야 합니다. 그것이 플러그인을 만드는 이유이지만 이 저장소나 다른 플러터 저장소에 추가하기에는 충분하지 않습니다.

플러그인이 되어서는 안 되는 것들의 예: @dnfield 가 엔진에 추가하여 그가 소유한 플러그인의 이점을 얻고 사용할 수 있도록 하는 것입니다. 이러한 플러그인은 엔진에 추가되지 않은 경우 모든 기능을 수행할 기회가 없습니다.

목소리를 내는 것이 중요하지만 그것이 통과할 것이라는 보장은 없습니다. 입이 있는 곳에 코드를 넣는 것도 중요하지만 여전히 충분하지 않습니다. 이 프로젝트는 투명성이 높고 개발자의 말을 분명히 경청하지만 민주주의가 아니며 결과에 대한 추론 없이 대중 투표가 승리한다는 의미는 아닙니다.

예, Flutter의 프레임워크에서 작업하는 개발자가 버그에 대한 토론으로 인해 주의가 산만해지지 않을까 걱정하지 마십시오. :-) 우리는 토론을 읽고 모든 사람의 의견을 매우 중요하게 생각하지만 결국에는 명확한 지침 원칙 이 있으며 가장 큰 목소리에 반응하지 않을 것입니다. 우리는 커뮤니티 전체가 무엇에 관심을 가지고 있는지 파악하기 위해 신중한 시장 분석을 수행합니다.

간단한 질문을 남기는 흥미로운 대화. Flutter 팀은 Flutter에서 디자인 단계(SVG)에서 벡터 그래픽으로 이동할 것을 어떻게 권장합니까?

@lukepighetti https://github.com/dnfield/flutter_svg 를 시도하고 얼마나 걸리는지 확인할 수 있습니다.

개인적으로 저는 Flutter의 SVG 파일에 대해 제공되는 솔루션에 만족하지 않습니다. 나는 flutter_svg 패키지를 사용했는데 만족하지 않습니다.

SVG 지원은 내 생각에 표준 라이브러리에서 기본적으로 지원되어야 합니다. 데스크탑 앱 및 웹사이트와 같은 더 큰 화면에서 Flutter를 사용하기 시작하려면 이것이 필수입니다.

@socialmammoth 어떤 결함이 있는지 자세히 설명해 주시겠습니까?

내가 잠시 숙고해 온 한 가지는 .skp(SKIAPICT) 형식을 지원하는 것이 가치가 있는지 여부입니다. 직접 하지 않는 데는 충분한 이유가 있다고 생각합니다. 형식은 Skia의 큰 버전이 될 때마다 버전이 안정적으로 보장되지 않습니다.

그러나 몇 가지 흥미로운 속성이 있습니다. 특히 Chrome/Chromium에서 SKP(렌더링된 SVG)를 생성하는 것이 가능하며 실제로 필요한 대부분의 또는 모든 Skia 그리기 명령을 이미 지원하고 있을 가능성이 매우 높습니다. 대다수의 SKP를 렌더링합니다.

SVG에서 Dart/Flutter 코드를 생성할 수 있도록 SVG 플러그인에 대한 코드 생성 유형의 솔루션을 만들 계획이었습니다. 이 시점에서 SKP to Dart 빌드 프로세스를 조사하는 것이 더 흥미로울 것이라고 생각합니다. Flutter SVG용으로 작성된 일부 코드는 프레임워크(예: RawPicture 및 관련 인프라로 이식될 수 있습니다. 대략 RawImage 에 해당하며 SKP의 출력을 가져오는 무언가를 연결할 수 있습니다(어쨌든 SVG 렌더링의 거의 표준인 Chrome에서 렌더링한 SVG에서 생성됨). SVG를 사용하는 도구를 만들고 헤드리스 Chromium을 호출하여 SKP로 렌더링한 다음 SKP를 Flutter가 런타임에 렌더링할 수 있는 일부 Dart 파일로 변환하는 것이 가능해야 합니다.

이것이 해결되지 않는 큰 영역 중 하나는 런타임에 벡터 그래픽을 동적으로 로드하는 것입니다(예: SvgPicture.network ). 그러나 이러한 제한에도 불구하고 이것이 여전히 가치 있고/허용되는 솔루션인지에 대한 피드백에 관심이 있습니다.

또한 이 시점에서 Flutter에서 SVG에 대한 "기본" 지원을 받지 못할 것이라는 믿음으로 이 말을 합니다. 이는 부분적으로 SVG 자체에 브라우저/HTML 렌더링 소프트웨어 외부에서 구현하는 것이 중요하지 않은 많은 수하물(XML, CSS, 외부 자산을 가져오는 기능)이 있고 우리가 시도하는 소프트웨어에 많은 팽창을 추가하기 때문입니다. 기대어. 프레임워크를 크게 변경하지 않고도 상당한 양의 SVG를 구현하는 것이 완전히 가능하기 때문이기도 합니다. 하지만 몇 가지 사항(특히 현재 filterEffect s 및 textPath )은 아마도 엔진에 대한 몇 가지 추가 조정의 이점을 누릴 수 있습니다.

네트워크에서 직접 SVG를 로드할 수 있다는 것은 형식 기능의 하위 집합만 지원한다는 것을 의미하더라도 주요 이점이라고 생각합니다.

Flutter 전용 벡터 형식을 갖는 것은 Android가 VectorDrawables로 하는 것처럼 들리는데, 이는 잘 작동하지만 SVG에 이미 존재하는 많은 도구의 이점을 누릴 수 없다는 의미이기도 합니다. 또한 모든 형식 변환으로 인해 디자인을 반복하는 것이 어색합니다.

Flutter가 2018년 프레임워크에서 기대하는 것이 바로 이것이기 때문에 Flutter가 기본적으로 SVG를 지원하는 것을 보고 싶습니다. 저는 생태계가 성장하기를 원하기 때문에 프론트 엔드 개발자가 Flutter에 액세스할 수 있기를 바랍니다.

@dnfield

.skp(SKIAPICT) 형식.

IMHO 흥미로운 접근 방식. 그러나 Flutter 도구(적어도 AS에서는)는 변환을 원활하게 처리해야 합니다. 디자이너는 현재 Android의 벡터 드로어블 가져오기가 부과하는 제한 사항에 어느 정도 익숙하므로 다른 해야 할 일과 하지 말아야 할 일을 확실히 처리할 수 있습니다.

일반 개발자의 경우 매뉴얼은 다음과 같이 읽어야 합니다. " svg 도면을 여기에 드롭하고 여기에 주석을 달고 마음대로 사용하십시오. svg가 지원되는 SVG 하위 집합(여기 참조)을 준수하지 않으면 컴파일러 또는 분석기( flutter analyze )가 알려줍니다. 당신은 당신의 svg에 무엇이 잘못되었는지 ". 또는 그런 것.

@dnfield

생성할 Chrome/Chromium 가져오기

PoC 및 테스트에는 적합하지만 실제 솔루션 IMHO는 그렇게 큰 종속성을 필요로 하지 않을 수 있습니다. 물론 베타에서 그리고 두 번째 '어려운 방법'으로 괜찮을 수 있습니다. skPicture가 허용하는 쉬운 애니메이션 그림을 얻으려면. 내가 틀릴 수도 있다. 디자이너는 일반적으로 노트북 덮개 아래에 브라우저가 있는 큰 양동이를 가지고 있습니다. 그럼에도 불구하고 예술 작품은 자주 변경됩니다. 프로토타입 단계뿐만 아니라 출시 시점이 다가오고 개발자들은 버그 헌팅 열풍에 휩싸입니다.

[즉. 우리는 일치하는 svg 가져오기를 처리하는 플러터 도구가 필요하거나 크롬이 전적으로 디자이너의 손에 있는 방법이 필요합니다. 개발자의 것이 아닙니다.]

추신. launcher_icons 패키지 방식은 시작할 때 flutter packages pub run flutter_svg_to_skp:main -i path/to/svgs -o path/to/skps 할 수 있습니다.

-- 내 ¢2

@cachapa

네트워크에서 직접 SVG를 로드할 수 있음

이것은 유효성 검사 및 해결 방법을 다룰 별도의 거대한 패키지에 대한 작업입니다.
가능한 비호환성과 생산자의 변덕에 대해.
먼저 "네트워크에서 SVG 로드" 패키지가 사용할 개발자 제공 벡터 형식을 그리는 엔진을 가져옵니다. :)

@cachapa 및 @ohir - flutter_svg _already_는 네트워크를 통한 SVG 로드를 지원합니다( SvgPicture.network ). 그러나 그 패키지는 결국 SVG 사양 전체를 지원하지 않을 것입니다. 목표는 실제로 대부분의 SVG를 렌더링하기에 충분한 사양을 지원하는 것입니다. 이 시점의 주요 예외는 fliterEffect 이고 (흐림 효과, 색상 필터 등이 없음) 많은 텍스트 관련 지원이 있지만 다른 몇 가지가 있습니다( marker s는 지원되지 않으며 xlink:href 참조의 certian 유형은 여전히 ​​지원되지 않습니다. 전체 CSS 사양, 스크립팅 및 상호 작용과 같이 내가 의도적으로 지원하지 않는 몇 가지 문제도 있습니다.

@lukepighetti 웹 기반 프론트 엔드 개발자에게만 기대가 존재한다고 생각합니다. Qt는 SVG를 지원하지만 제한된 하위 집합만 지원합니다. GNOME은 librsvg를 사용하여 조금 더 지원하지만 다시 몇 가지 문제가 있습니다(Linux 환경 외부에서 사용하는 것은 정말 어렵습니다). resvg에 무슨 일이 일어나는지 보고 싶지만 그것을 통합하는 GUI 라이브러리는 모릅니다.

@dnfield 당신이 훌륭한 일을 했기 때문에 나는 당신의 일을 비판하고 싶지 않으며 그것에 대해 대단히 감사합니다. 색상이 예상대로 작동하지 않아 실망스럽습니다. 나는 내 자신의 색을 선택해야 했습니다. 저는 예술가도 아니고 색맹이기도 합니다.

Flutter는 최신 브라우저와 동일한 방식으로 SVG를 지원해야 합니다. 그것은 필수입니다. 웹 페이지에서 직접 복사하거나 가져온 자산을 수정 없이 사용할 수 있어야 합니다.

솔직히 말해 하나님께는 최소한 패키지가 있다는 사실에 감사합니다. 하지만 우리는 색상이 필요하고 효과가 필요합니다. 성능이 문제라면 사람들이 기능을 켜도록 강요하지 않고 기능을 끌 수 있도록 선택적으로 만드는 것보다 더 중요합니다.

SVG에 대한 전체 사양 지원이 필요합니다. @lukepighetti 에 동의합니다. Hummingbird에서는 이것이 필수입니다. 그렇지 않으면 웹 개발자가 Flutter를 비웃고 어려운 패스를 줄 것입니다.

@yjbanov 조차도 여기 그의 기사에서 언급합니다: https://medium.com/flutter-io/hummingbird-building-flutter-for-the-web-e687c2a023a8

@dnfield 가 'resvg'를 언급했기 때문에 @SocialMammoth 는 아마도 flutter_svg도 완전한 svg 지원 대신 'SVG 정적' 지원을 목표로 해야 할 것입니다.
http://www.w3.org/TR/SVG11/feature#SVG -정적,
모든 사람을 행복하게 해야 한다고 생각합니다.

Chrome조차도 모든 SVG 기능을 지원하지 않으며 특히 오른쪽에서 왼쪽으로 쓰는 텍스트 렌더링은 버그가 있습니다(지난 몇 년 동안 진전이 없음). 즉, 완전한 SVG 지원이 현실적이지 않다고 생각합니다. SVG-static은 합리적인 하위 집합인 것 같습니다. flutter_svg에서 텍스트 hadling(경로의 텍스트 포함), 필터 및 마스크가 그리워집니다. https://drifted.in/horologium-app/ 와 같은 빌드를 위해 Flutter에서 지원하는 것이 좋을 것입니다.

@SocialMammoth

Flutter는 최신 브라우저와 동일한 방식으로 SVG를 지원해야 합니다.

아니요. Flutter 앱은 간결해야 합니다. 이 문제는 모든 SVG를 처리하는 전능한 패키지에 관한 것이 아니라 "벡터 드로어블 형식 지원" ( SVG 지원 안 함)이라고 명시적으로 나와 있습니다. 내가 이해하는 것처럼 목표는 지금까지 모든 플러터 앱에서 비트맵 자산을 최대한 제거하는 것입니다. 그리고 그것은 엔진 수준에서. @dnfield 는 패키지를 통해 훌륭한 일을 했습니다. 이제 플러터(skia) 엔진이나 앱 자체를 확장하지 않고 Dart에서 사용할 수 있는 일부 벡터 그래픽을 얻을 때입니다. .skp 사용은 그 목표를 위한 좋은 선택인 것 같습니다. 그것은 이미 Android의 벡터 드로어블보다 더 많은 것을 허용하고 이미 엔진에 있습니다. 디자이너는 기능 세트를 수용할 것입니다.

@ohir 나는 그때 우리가 동의하지 않는다고 생각합니다. SVG 파일을 지원하지 않는 프론트엔드 프레임워크는 정말 나쁜 농담입니다.

글쎄, 나는 flutter가 svg가 유용할 필요는 없다고 생각하지만 좋을 것입니다. svg가 아닌 경우 일반적인 벡터 그래픽 응용 프로그램에서 쉽게 얻을 수 있는 일부 형식보다.

기본적으로 SVG는 여기에서 사용할 표준 벡터 형식이지만 SVG의 모든 기능에 대한 지원을 기대할 수는 없습니다. 목표는 항상 일반적인 벡터 그래픽 응용 프로그램에서 벡터 자산을 가져오기 위해 최소를 지원하는 것이었습니다. .skp 를 읽고 쓸 수 있는 벡터 그래픽 응용 프로그램은 무엇입니까?

벡터 형식이 유비쿼터스인지 여부에 대한 테스트는 Adobe Illustrator, Affinity Designer 및 Inkscape에서 사용할 수 있는지 여부입니다. 내가 아는 한 SVG는 거의 남아 있습니다. 모든 SVG 기능이 필요하지 않다는 데 동의합니다. 기본 패스 획 및 채우기만 있으면 됩니다.

나는 이것을 권위있게 말할 수는 없지만 .skp 를 지원하도록 벡터 그래픽 응용 프로그램을 설득하는 것보다 SVG의 하위 집합을 구현하는 것이 더 쉬울 것이라고 생각합니다.

@lukepighetti : Dan의 아이디어는 엔진의 내부 형식을 사용하는 것입니다. 이 솔루션의 핵심은 SVG를 엔진이 이해하는 형식으로 변환하는 것입니다. 실행 가능한 변환기가 존재하는 한 Inkscape가 이 형식을 알고 있는지 여부는 중요하지 않습니다.

어제는 의구심이 들었지만 오늘은 조금 조사한 결과 크롬 자동화가 잘 지원되는 것 같습니다. 헤드리스 크롬 을 렌더링 프록시와 함께 사용할 수 있다면 svg->skp 변환기로도 사용할 수 있습니다. 약간 무겁지만 저렴합니다. 정말 낮은 매달린 과일, @dnfield :).

거의 3년 전에 @Hixie 가 설정한 목표 와 잘 맞습니다.

@dnfield 내가 틀렸다면 저를 수정하십시오.
.skp 는 기본적으로 Skia Picture의 바이너리 형식이라고 가정합니다.

dart:ui 에도 Dart Land에서 생성할 수 있는 Skia Picture에 대한 래퍼가 있다는 점을 감안할 때 이 그림의 내용에는 다른 Skia 기능이 포함되어 있지 않습니까? 기본적으로 Chrome의 기능은 모든 Skia 기능을 사용하는 반면 dart:ui 의 기능은 사용하지 않습니다(Flutter 엔진을 통해 제공되는 항목으로 제한됨)? '성능' 주장에 대해선 좀 이상하지 않나요? Flutter engine & dart:ui 는 느린 것으로 간주되는 Skia를 모두 제거하지만(성능 수치는 표시하지 않음) Chrome에서 생성한 .skp 파일을 통해 들어오는 경우 이 모든 것을 사용할 수 있습니까?

또 다른 것은 .skp 를 사용할 때 아이콘의 색상을 지정하는 방법입니다. 예를 들어 아이콘이 2가지 이상의 색상을 사용한다면?

Flutter에서 Dart를 사용하면 모든 픽셀을 제어할 수 있다는 오래된 주장은 어떻습니까? 나에게 'svg static'을 지원하는 flutter_svg 패키지는 Dart 랜드의 미래 혁신을 가능하게 할 것이기 때문에 가야 할 길입니다. Dart를 우회하고 C++에서 처리하도록 하면 Dart가 해킹할 수 없는 것처럼 보입니다.

Skia는 SVG를 지원하는 것 같습니다. Flutter가 SVG 지원을 직접 제공하지 않는 이유는 무엇입니까?

내가 말할 수 있는 바에 따르면 Flutter 팀은 Skia 패키지 크기를 가능한 한 작게 유지하기를 원합니다. Skia가 SVG를 지원하는지 몰랐지만 지원한다면 그것은 낮은 매달린 과일입니다. 참고로 Skia가 지원하기 때문에 Flutter에 Lottie 지원을 추가하는 데 또 다른 문제가 있습니다.

Skia는 SVG에서 그림 가져오기를 지원하지 않지만 SVG 생성에 대한 실험적인 지원을 제공합니다(여기서 유용하지 않음).

예, 패키지 크기가 문제입니다.

SVG 지원을 요청 하려면 https://github.com/flutter/flutter/issues/15501 을 참조하십시오.

이 버그는 특히 SVG를 지원하지 않고 벡터 그래픽을 지원하는 것에 관한 것입니다.

벡터 그래픽 형식에 관심이 있는 사람들을 위해 사용 사례가 궁금합니다.

나는 지금까지 다음과 같은 사실을 알고 있습니다.

• 아이콘. 동적으로 색상을 다시 지정해야 하는 정적 이미지(예: 비활성화된 경우 회색으로 표시됨) 및 대상 렌더 크기에 따라 다양한 세부 수준이 필요할 수 있습니다. 텍스트가 있을 가능성이 없습니다.

• 애니메이션 아이콘: 위에서 설명한 두 개의 아이콘과 하나에서 다른 아이콘으로 원활하게 전환하는 방법에 대한 설명입니다.

• 배경: 화면보다 훨씬 더 클 수 있는 이미지, 시차로 표시될 수 있습니다. 텍스트가 없을 가능성이 있는 모양, 그라디언트 및 그림자가 있는 일반적으로 단순한 장면.

벡터 그래픽에 대한 동기를 부여하는 다른 사용 사례가 있습니까? 여기에 설명하십시오. 감사 해요.

단일 그래픽으로 여러 해상도 지원, 특히 고해상도 화면에 대한 상위 호환성

내 앱은 기본적으로 회의의 동반자입니다. 이동 및 확대/축소 기능이 있는 호텔 지도를 포함하고 싶습니다. 고해상도 래스터를 사용하는 것은 크기와 성능상의 이유로 비실용적입니다. 벡터 그래픽은 완벽합니다.

지금은 매우 불편하고 온라인에서만 작동하는 포함된 PDF 웹 보기를 사용하고 있습니다.

• 맞춤형 '실제 유사' 노브는 벡터 그래픽 없이는 사실상 달성할 수 없습니다. 특히 회전, 기울이기 또는 전단을 녹이는 것.

Dan의 말에 덧붙이자면: 1kB의 벡터 소스만으로도 7인치 태블릿과 105인치 4HD TV 모두에서 세밀하고 부드러운 화면을 생성할 수 있습니다. 10 또는 14"(캐셔 대면) 및 5 또는 7"(고객 대면) 화면용 금전 등록기 키오스크 앱의 최근 사례입니다. 모든 5000개 이상의 벡터 드로잉 세트는 크기가 5MB 미만이었습니다. 사용된 정확한 두 화면에 대해 png로 변환된 '야채' 하위 집합(~150)은 30MB를 초과했습니다. 전체 인벤토리 세트는 GBytes 범위에서 끝날 수 있습니다.

PS 다음으로 중요한 것은 예를 들어 선택된 채우기를 통해 정의된 터치 영역이 있는 벡터 그래픽을 갖는 것입니다. 이것은 대부분 정적이지만 세부 사항이 풍부한 인터페이스의 전체 클래스에 대해 수천 줄의 코드를 절약할 수 있습니다.
대화식 기계 작동 설명서에서와 같이.

꿈은 제쳐두고 - 우리 디자이너들이 먼저 간단한 벡터 드로잉을 사용하게 하세요 :)

지금까지 피드백에 감사드립니다. 매우 도움이 됩니다.

@ohir "회전, 기울이기 또는 녹이기"에 대해 자세히 설명해 주시겠습니까?

내가 실제로 매우 만족하는 이에 대한 해결 방법은 path_parsing 패키지(https://pub.dev/packages/path_parsing)를 사용하여 SVG 경로 문자열에서 캔버스 그리기 명령을 생성한 다음 이를 사용하는 것입니다. 그리는 CustomPainter 위젯을 만듭니다. 경로(직사각형, 원 등) 이외의 다른 SVG 모양의 경우 약간 지루하지만 너무 어렵지 않은 그리기 명령으로 수동으로 변환합니다.

이것은 간단한 벡터 아이콘에 정말 잘 작동하며 앱 전체에서 크기와 색상이 다른 동일한 위젯을 사용할 수 있습니다.

코드는 다음과 같습니다. https://gist.github.com/jpotterm/7b30739e0af722baf97a397d9841d908

SVG 파일을 구문 분석하고 유사한 결과를 생성하는 캔버스 그리기 명령을 생성하는 공식 플러터 명령줄 도구가 있다면 정말 유용할 수 있습니다.

@Hixie
예. https://dribbble.com/shots/1083175-Air-conditioning-controller#
중앙 회전 노브와 그 주위의 게이지는 현재 Canvas API로 세심하게 그릴 수 있지만 2Kb(xml svg)와 약 300-500B의 드로어블에 들어갈 수도 있습니다. 일부 '벡터 그래픽' 인터페이스를 통해 노출된 Skia 수준의 벡터 그래픽과 기본적인 아핀 변환이 있었다면 이 노브는 게이지 세그먼트에 채우기를 적용하고 표시기 작은 원의 경로를 회전하는 것만으로 살아 있게 만들 수 있었습니다.

더 중요한 것은 색상 및 기타 세부 사항이 포함된 이 전체 손잡이가 디자이너가 계획한 대로 정확하게 그려져야 한다는 것입니다. 벡터 드로잉 + 채우기 + 그라디언트 + 좋은 디자이너의 인터페이스는 다음과 같습니다. https://www.artua.com/app-design-deckadance/
개발자 측의 Affine 변환은 이러한 디자인을 반응적이고 생동감있게 만듭니다.
스큐 및 전단 변형: 예를 들면 다음과 같습니다. 제어 레버 시프트를 모델링하는 데 사용됩니다.
(살바도르 달리의 유령에 의해 유발되었을 가능성이 있는 "멜트" 단어 이동 ;)

/주제를 벗어/

@jpotterm
SVG 파일을 구문 분석하고 유사한 결과를 생성하는 캔버스 그리기 명령을 생성하는 공식 플러터 명령줄 도구가 있다면 정말 유용할 수 있습니다.

나는 비슷한 것을 생산했습니다. 주석을 찾고 지정된 SVG PathData를 사용하여 Path 개체를 반환하는 getter를 생성하는 코드 생성기입니다. 사람들이 원한다면 그것을 정리하고 소스를 공개할 수 있습니다.

내가 기여하는 앱 은 벡터 그래픽에 완벽하게 적합합니다. UI를 구성하는 수백 개의 작은 흑백 라인 아트 그래픽이 있습니다. 색상을 지정하고 크기를 조정할 수 있습니다.

모든 다른 밀도에서 여러 색상으로 이 작업을 수행하는 것은 끔찍하고 지속 불가능하며 최종 패키지를 거대하게 만듭니다. 이 이미지는 손으로 그린 ​​그래픽에서 가져온 것입니다.

의견을 보내주신 모든 분들께 감사드립니다. 매우 도움이 되는 의견.

벡터 그래픽 형식에 관심이 있는 사람들을 위해 사용 사례가 궁금합니다.

또 다른 사용 사례는 기본적으로 동적 그래픽이 필요한 모든 것입니다.

• 차트
• 로딩 바
• 그림
• 등

Skia가 SVG의 하위 집합(어쨌든 유용한 부분)을 지원하기 때문에 Flutter가 이를 지원하지 않는다는 사실에 사실 매우 놀랐습니다.

나는 예술에 SVG를 사용하고 싶습니다. 고품질의 전체 화면 태블릿 PNG는 2MB 이상이 될 수 있지만 동등한 SVG는 5-10kb가 될 수 있습니다. 몇 개의 화면을 추가하면 패키지에 100kb가 아닌 20mb가 표시됩니다.

프로그래밍 방식 그래픽의 경우 저는 CustomPaint의 열렬한 팬이므로 차트, 로드 막대, 그리기 등과 같은 작업에는 SVG를 사용하지 않을 것입니다. CustomPaint API에 대해 우려하는 사람들에게는 정신적으로 HTML Canvas API와 많이 비슷합니다. 그리고 예, CustomPaint에서 작성하는 것이 비용이 많이 든다는 데 동의하지만 결국에는 견고하고 매우 빠르고 아름답게 렌더링됩니다.

SVG를 지원하려면 그라디언트, 획 등과 같은 모든 SVG 기능을 지원해야 합니다. 이것은 Android 프로젝트에서 수행되지 않았으며 거의 ​​모든 다른 개발자가 개발자에게 경고 플래그를 표시합니다. 플랫폼은 SVG 및 벡터를 지원합니다. 그래픽의 기본, 제대로 하세요!

@harounhajem 해당 주제에 대해서는 https://github.com/flutter/flutter/issues/15501 및 https://github.com/dnfield/flutter_svg 를 참조하십시오.

차트에 대한 @PierBover 특히 https://pub.dev/packages/charts_flutter 를 고려하십시오.

방금 Flutter에 뛰어 들었습니다. Ionic 3에서 Ionic 4로 개인 앱을 리팩토링하고 있었는데 (다시) 완전히 다르고 처음부터 앱이 필요했습니다.
그래서 Flutter로 이동하여 시도해 보기로 결정했습니다. 내가 말했듯이, 나는 이 앱을 끝내고 작동시켰고 여기에는 내가 내 앱에 준비한 많은 그래픽과 아이콘이 포함되어 있습니다. 나는 디자이너가 아니며 이 디자인에 대한 비용을 지불해야 합니다.
나는 그의 SVG 자산을 재사용하고 싶어하는 이 상황에 대해 나만이 아니라는 것을 이해합니다.

@erperezildo - https://pub.dev/packages/flutter_svg 참조

(왜 이것이 닫히지 않았는지 확실하지 않음)

SVG가 아닌 벡터 드로어블 형식을 지원하는 실제 문제가 해결되지 않았기 때문에?

오, 내 잘못 @jonahgreenthal. 나는 SVG 지원을 찾아 여기에 왔고 세 번째 코멘트가 같은 것을 요구하는 것을 보았습니다.

Uber는 iOS용으로 이 작업을 수행했습니다: https://github.com/uber/cyborg
Flutter에서 이와 유사한 것을 보는 것은 흥미로울 것입니다.

이에 대한 업데이트가 있습니까?

@dnfield 는 svg를 새 위젯으로 표시하는데 잘 작동했지만 AssetImage 속성에서는 작동하지 않습니다. CircleAvatar 위젯을 사용하여 표시해야 합니다.

@Hixie 사용자가 아이콘의 의미를 이해하는 데 도움이 되므로 svg 아이콘에 여러 색상이 필요한 사용 사례도 있습니다. 따라서 솔루션에 테마 색상을 사용자 지정하는 기능도 포함되기를 바랍니다.

현재 일부 사람들은 SVG를 글꼴로 변환하고 아이콘 패키지와 동일한 방식으로 사용하도록 제안하지만 이 경우 아이콘에 여러 색상을 사용할 수 없습니다.

4년 동안 유용한 솔루션 없이 다양한 댓글을 남겼습니다. 간단히 말해서 - 아니요, 가능하지 않습니다. 아니요, 계획되지 않았습니다.

이것이 왜 문제/어려운지 최소한 알 수 있습니까?

Flutter_svg는 플러터에서 SVG에 대한 적절한 지원을 제공합니다. Rive는 Flutter용 벡터 기반 형식도 지원합니다.

이 문제는 새로운 벡터 기반 형식을 만드는 것에 관한 것입니다. 시간이 걸립니다 :)

@dnfield svgs 를 전달할 수 없는 배경 속성이 있는 위젯이 있습니다. 이것을 보관할 수 있는 방법이 있습니까?

새 형식을 만드는 대신 적절한 svg 지원을 추가하십시오. Svg는 사실상의 표준입니다.

내가 앱을 만들 때마다 일반적으로 연결된 웹 사이트가 있고 웹 사이트는 svg를 사용하며 모든 해상도에서 가볍고 아름다운 아름다운 애니메이션 svg를 사용합니다.
이미지와 애니메이션을 다시 구현하는 대신 일관성을 적절하게 달성할 수 있도록 Flutter에서 애니메이션된 svg를 재사용하는 것이 정말 합리적입니다!

SVG는 이미 존재하고 작동하며 다른 모든 곳에서 널리 사용되고 지원됩니다. 그것에 초점을 맞추는 것이 우리에게 필요한 것입니다.

이 문제는 새로운 벡터 기반 형식을 만드는 것에 관한 것입니다.

이 문제는 바퀴를 재발명하는 것에 관한 것입니다. 그렇죠? @d-silveira에 동의합니다. 더 나은 내장 추가, svg에 대한 적절한 지원, 새로운 벡터 기반 형식이 필요하지 않습니다.

예, 더 나은 휠을 발명하는 것입니다. SVG는 Flutter_svg를 사용하여 Flutter에서 이미 지원됩니다.

빌드 시에 svg를 가져와서 내부적으로 처리하거나 가져오는 동안 코드를 자동 생성할 수 있는 것이 더 좋습니다. 기본 Android와 유사 - svg를 가져올 수 있으며 Android 경로 정의 xml은 소스 svg에서 생성됩니다. Flutter 프로젝트로 가져오기는 벡터 자산을 그리는 데 재사용할 다트 코드를 생성할 수 있습니다.

@Hixie 는 상황을 개선하는 데 좋습니다. 이에 대해서는 논의하지 않겠지만 그동안 svg가 아닌 이미지만 허용하는 일부 위젯을 어떻게 지원할 수 있습니까? (예를 들어 배경 속성이 있는 것들)

그것은 flutter_svg에 대한 기능 요청이 될 것입니다.

@Hixie Flutter SVG는 거기에 이미지를 생성할 수 있지만 프레임워크가 경우에 따라 이미지보다 사진 촬영에 더 관대했다면 좋을 것입니다. 제출 https://github.com/flutter/flutter/issues/49712

flutter_svg

왜 그런 겁니까? 이것은 flutter_svg 패키지와 전혀 관련이 없습니다.

CircleAvatar(
  backgroundImage: MySVGImage(),
)

@Hixie flutter_svg는 일부 경우에만 작동합니다. 실용적인 예를 보여 드리겠습니다. 일부 끝점에서 이미지 URL을 반환하는 REST API를 사용해야 합니다. 이미지는 백오피스에서 사용자가 생성하므로 일부는 png, 일부는 jpg, 일부는 svg입니다. 백오피스는 URL에 파일 확장자를 포함하지 않고 HEAD를 지원하지 않으므로 미리 이미지 유형을 알 수 있는 방법이 없습니다.
플러터의 예상되는 동작은 이미지 유형을 추측하기 위해 강제로 점프하는 대신 image.network에서 URL을 수신하고 처리하는 것입니다. svg인 경우 flutter_svg로 전환합니다.
이 모든 것은 모든 경우에 flutter_svg가 이미지에 대한 드롭인 대체가 아니라는 사실조차 고려하지 않습니다! :피

SVG는 일반적으로 일부 사용 사례에서만 작동합니다. :-)

이 특정 문제는 SVG가 아닌 벡터 그래픽 형식을 갖는 것에 관한 것입니다. 다른 요구 사항이 있는 경우 별도의 문제로 제출하는 것이 좋습니다.

이전 논의에서 몇 가지 중요한 고려 사항은 다음과 같습니다.

• 우리는 완전한 SVG 지원을 원하지 않습니다. 사양에 너무 비싸고, 무겁거나, Flutter에 이미 있는 것과 중복됩니다.
• 지원되는 형식에서 이러한 작업은 그래픽 엔진(Skia)에서 효과적이고 효율적이며 최적화되어 있음을 강조해야 합니다.
• 전체 런타임 인터프리터를 지원하기보다는 빌드 시 형식을 처리할 수 있습니다.

그렇다면 누군가가 플러터에 최적화된 이미지를 위한 새로운 벡터 형식을 만드는 방법은 무엇일까요? 위의 내용을 바탕으로 제안 된 것이라고 생각합니다 ...

Rive에 있는 사람들이 SVG 변환 라이브러리를 만들 수 있을 것입니다. 그들은 이미 Flutter를 위한 독점(그리고 오픈 소스) 벡터 엔진을 가지고 있습니다. @luigi-rosso

Flutter 프로젝트에 svg 가져오기 지원을 추가하지 않는 이유는 무엇입니까? 그리고 다트 코드/새로운 벡터 드로어블 등으로 변환합니다. 네이티브 Android에서도 동일한 상황이 발생하므로 svg를 직접 사용하지 않고(이는 그다지 의미가 없다고 생각합니다) 대신 프로젝트로 가져옵니다. svg는 다음에서 제거됩니다. 지원되지 않고 기능이 필요하지 않으며 Android 경로 정의로 변환됩니다.

Flutter를 위한 좋은 아이디어가 아닙니까?

@giaur500 이 문제는 그것에 관한 것이 아닙니다. SVG에 대해 구체적으로 제안할 사항이 있으면 별도의 문제를 제출해 주십시오.

공정하게 말하자면, 이 호의 많은 의견은 SVG와 Flutter에 대해 논의하고 있습니다.

따르다

SVG는 훌륭한 픽셀 수준의 사용자 인터페이스에 적합합니다. 지금까지 훌륭한 픽셀에 대해 최고입니다.

@lukepighetti 네. 불행히도 그것들은 모두 주제에서 벗어났고 여기에 그것들을 가지고 있다고 해서 Flutter가 개선되지는 않습니다.

이전 논의에서 몇 가지 중요한 고려 사항은 다음과 같습니다.

• 우리는 완전한 SVG 지원을 원하지 않습니다. 사양에 너무 비싸고, 무겁거나, Flutter에 이미 있는 것과 중복됩니다.
• 지원되는 형식에서 이러한 작업은 그래픽 엔진(Skia)에서 효과적이고 효율적이며 최적화되어 있음을 강조해야 합니다.
• 전체 런타임 인터프리터를 지원하기보다는 빌드 시 형식을 처리할 수 있습니다.

빌드 시간 도구는 훌륭할 것입니다. 벡터를 가져와 모든 화면 밀도를 렌더링하고 자산을 이미지로 추가합니다. Apple iOS는 PDF 아이콘을 사용하여 이 작업을 수행합니다.

빌드 시에 svg를 가져와서 내부적으로 처리하거나 가져오는 동안 코드를 자동 생성할 수 있는 것이 더 좋습니다. 기본 Android와 유사 - svg를 가져올 수 있으며 Android 경로 정의 xml은 소스 svg에서 생성됩니다. Flutter 프로젝트로 가져오기는 벡터 자산을 그리는 데 재사용할 다트 코드를 생성할 수 있습니다.

좋아요

@giaur500 이 문제는 그것에 관한 것이 아닙니다. SVG에 대해 구체적으로 제안할 사항이 있으면 별도의 문제를 제출해 주십시오.

새로운 문제가 생성되었습니다: https://github.com/flutter/flutter/issues/63752

이 상태는 무엇입니까?
VectorDrawable과 유사한 것을 지원하거나 Android의 경우 VectorDrawable 자체를 지원하려는 의도가 전혀 있습니까?

생태계 도입을 고려하고 있는 개발자로서 이것이 제가 네이티브로 남을 수 있도록 설득할 수 있는 강점이라고 말하고 싶습니다.

나는 그것을 직접 시도한 적이 없지만 flutter svg lib는 at
경로와 같은 벡터 드로어블의 최소 핵심 기능.

2020년 8월 15일(토) 19:46 n00bmind, [email protected] 이(가) 작성했습니다.

이 상태는 무엇입니까?
비슷한 것을 지원하려는 의도가 전혀 있습니까?
VectorDrawable 또는 Android용 VectorDrawable 자체?

생태계 도입을 고려하는 개발자로서 저는 이것이
내가 원어민으로 남도록 설득하는 강점..

—
당신이 언급되었기 때문에 이것을 받는 것입니다.
이 이메일에 직접 답장하고 GitHub에서 확인하세요.
https://github.com/flutter/flutter/issues/1831#issuecomment-674375846 ,
또는 구독 취소
https://github.com/notifications/unsubscribe-auth/ABI4Y4LWYSYEIWI3RRSSCK3SAZKO5ANCNFSM4B3FXMMQ
.

상태는 아무것도 아닌 것 같아요. 이 스레드에는 결론이 없으며 네이티브 벡터 드로어블과 유사한 것을 개발하려는 내 아이디어는 즉시 닫힙니다.

flutter svg 패키지가 작동하지 않는 이유가 있습니까? 우리는 우리 앱 중 하나를 성공적으로 사용하고 있습니다. Vector Drawable을 사용한 적이 없으므로 SVG와 어떻게 비교되는지 잘 모르겠습니다.

flutter_svg 패키지는 이런 종류의 사용 사례를 살펴볼 가치가 있는 것 같습니다.
@lukepighetti 성능을 어떻게 평가하시겠습니까? 내 사용법은 앱의 여기저기서 스플래시 이미지와 몇 가지 아이콘 크기의 그래픽이 될 것이므로 멋진 것은 없습니다.

flutter_svg 패키지는 이런 종류의 사용 사례를 살펴볼 가치가 있는 것 같습니다.

@lukepighetti 성능을 어떻게 평가하시겠습니까? 내 사용법은 앱의 여기저기서 스플래시 이미지와 몇 가지 아이콘 크기의 그래픽이 될 것이므로 멋진 것은 없습니다.

나는 당신의 사용 사례에 대해 그것을 매우 높게 평가할 것입니다. 사람들이 내부적으로 뭔가를 하도록 플러터 팀에 압력을 가하기 전에 실제로 시도해야 한다고 생각합니다.

@lukepighetti

내부적으로 뭔가를 하도록 플러터 팀에 압력을 가하기 전에.

이 특정 문제의 진짜 문제는 Skia 플러터 그래픽 엔진이 엔진을 호출하여 프리미티브를 단계별로 그리는 상당히 무거운 다트 패키지를 가져오지 않고 최고 속도로 실행되는 "드로어블 같은" 벡터 형식을 만드는 데 필요한 모든 것을 갖추고 있다는 것입니다.

사람들이 정말 _(svg package)_ 시도해야 한다고 생각합니다.

나는 사람들이 가능한 모든 곳에서 큰 소리로 구글 직원들에게 이 gh-issue에 전화해야 한다고 생각합니다. 왜냐하면 4년이 지난 지금은 부정적인 PR만이 2020년의 모바일 프레임워크가 정말로 우리에게 휴대전화를 휴대하도록 강요해야 하는지에 대해 생각하기 위해 Google에서 누군가를 걷어차게 할 수 있기 때문입니다. 우리 앱에 있는 그 모든 메가바이트의 래스터 그래픽.

[@힉시]

내가 뭔가를 놓치고 있지 않는 한, 이러한 플러터 기능에 대한 구현은 설명하는 사용 사례를 해결하는 것으로 보이는 @dnfield 의 flutter_svg 패키지와 매우 유사할 것입니다. 또한 유지 관리자는 핵심 Flutter 팀에 있으므로 품질을 확신할 수 있습니다. 이 패키지가 https://github.com/flutter/plugins 에 있으면 기분이 더 나아질까요?

제가 놓치고 있는 것이 있다면 이 주제에 대해 더 많이 배울 수 있도록 저를 교육해 주십시오.

@lukepighetti

문제 제목의 "SVG 아님"은 빨간색으로 굵게 표시되며 깜박여야 한다고 생각합니다.

이 문제는 특히 svg 형식에 관한 것이 아닙니다 .

OP(그리고 나)는 Skia의 경로 API를 노출하여 자산 그래픽이 고정 엔디안의 이진 형식으로 표현될 수 있기를 희망했습니다. Dan은 심지어 svg 자산을 사용할 수 있도록 하는 flutter_svg에서 작동 하는 Skia에 대한 패치를 수행했습니다. 여전히 우리는 앱 런타임에 xml을 구문 분석하고 엔진을 호출하여 그립니다. 또한 apk에 번들로 제공되는 정적 자산에 대해서도 마찬가지입니다.

사용자 정의 벡터 드로어블 형식 (이름을 fvd 로 지정)에 대한 적절한 지원으로 디자이너 작업의 구문 분석이 한 번 발생합니다. 앱 빌드 시 fvd 형식의 개체가 Skia에 직접 throw됩니다. 그래픽이 많은 앱에서 이러한 접근 방식은 앱 크기에 막대한 영향을 미치고 렌더링 시간을 눈에 띄게 절약할 수 있습니다. [ 자기소개 ]

위의 내용이 내가 이 문제를 어떻게 보는지 보여주고 마침내 해결하도록 부름을 정당화하기를 바랍니다.
flutter_svg 라이브러리의 일부로도.

Flutter는 경쟁 기술에 비해 또 다른 이점을 가질 자격이 있습니다.

가치가 있기 때문에 flutter_svg를 사용하는 데 본질적으로 잘못된 것은 없습니다. 단지 몇 가지 아주 간단한 것조차 부족하다는 것뿐입니다. 예를 들어 백분율을 지원하지 않고 렌더링을 시도할 때 바로 충돌이 발생한다는 것입니다. 이 댓글은 flutter_svg 라이브러리에 대한 노크가 아니라 그냥 flutter_svg를 사용할 수 있다고 말하는 사람들에게 설명하기 위한 것입니다.

flutter_svg는 스크립팅, HTML, SMIL 등을 지원하지 않음에도 불구하고 매우 잘 작동하는 것 같습니다.

보기에 좋고 파일 자산, 네트워크 또는 일반 문자열에서 SVG를 빌드할 수 있습니다.